Youtube and stats modules style improvements

- Remove unnecessary  images
- Change intro youtube video default quality
- Close button for intro youtube widget
- Stats widget style improvements

diff --git a/cloudcms/static/cloudcms/css/modules.css b/cloudcms/static/cloudcms/css/modules.css
index 1dc2384..820a540 100644 (file)
--- a/cloudcms/static/cloudcms/css/modules.css
+++ b/cloudcms/static/cloudcms/css/modules.css
@@ -655,6 +655,8 @@ a.prompt                                                                            { float: right; color:#fff; background:#F24E53;   padding:5px
 a.prompt:hover                                                                 { text-decoration: none; position: relative;   border: 2px solid #F24E53; background: #fff; color:#F24E53;}
 .user-not-authenticated        a.prompt                                { display: inline-block;}
 
-.video-thumb                                                                   { border:2px dashed #3582AC;  overflow: hidden; height: 282px; position: relative;}
+.video-thumb                                                                   { border:2px dashed #3582AC;  overflow: hidden; height: 282px; position: relative; margin-bottom: 1em}
 .video-thumb .play                                                             { position: absolute; top:0; left:0; height: 100%;width: 100%; display: block; background:url(../images/play-off.png) no-repeat center center; text-indent: -1000px }
-.video-thumb .play:hover                                               { background-image: url(../images/play-on.png); text-decoration: none;}
\ No newline at end of file
+.video-thumb .play:hover                                               { background-image: url(../images/play-on.png); text-decoration: none;}
+#stop-youtube                                                                  { font-weight: bold; font-size:20px; display: block; visibility: hidden; text-align: right;color:#3582AC;}
+#stop-youtube:hover                                                    { text-decoration: none; color:#F89A1C; }

diff --git a/cloudcms/static/cloudcms/images/stats_bg.png b/cloudcms/static/cloudcms/images/stats_bg.png
deleted file mode 100644 (file)
index 84e323f..0000000
Binary files a/cloudcms/static/cloudcms/images/stats_bg.png and /dev/null differ

diff --git a/cloudcms/static/cloudcms/images/stats_bg@2x.png b/cloudcms/static/cloudcms/images/stats_bg@2x.png
deleted file mode 100644 (file)
index 5ccd352..0000000
Binary files a/cloudcms/static/cloudcms/images/stats_bg@2x.png and /dev/null differ

diff --git a/cloudcms/static/cloudcms/js/common.js b/cloudcms/static/cloudcms/js/common.js
index 583b8f8..23f11b9 100644 (file)
--- a/cloudcms/static/cloudcms/js/common.js
+++ b/cloudcms/static/cloudcms/js/common.js
@@ -343,7 +343,8 @@ $(document).ready(function() {
        \r
 $(window).resize(function() {\r
     \r
-   setContainerMinHeight('.container .wrapper');\r
+   setContainerMinHeight('.container .wrapper'); \r
+   $(".stats-block li em").equalHeights();\r
     \r
 \r
 });\r
@@ -362,4 +363,4 @@ $(window).scroll(function () {
 \r
 \r
 \r
-});
+});\r

diff --git a/cloudcms/static/cloudcms/js/youtube.js b/cloudcms/static/cloudcms/js/youtube.js
index 2cc8a33..a7ada4a 100644 (file)
--- a/cloudcms/static/cloudcms/js/youtube.js
+++ b/cloudcms/static/cloudcms/js/youtube.js
@@ -6,14 +6,14 @@ function  YouTube(options) {
   this.videoEl = this.wrapper.find('.player-placeholder');
   this.currwidth = this.wrapper.width();
   this.currheight = parseInt(458* (this.currwidth/816));
+  this.close = $('#stop-youtube');
   var self = this;
   
   this.player =  new YT.Player(this.videoEl[0], {
     height: self.currheight,
     width: self.currwidth,
     playerVars: { 'modestbranding':1},
-    videoId: options.youtube_id,
-    suggestedQuality: 'hd1080',
+    videoId: options.youtube_id, 
     events: {
       'onStateChange': function(event) {
         if ( event.data == YT.PlayerState.ENDED ) {
@@ -39,12 +39,13 @@ YouTube.prototype.initEvents = function() {
       self.wrapper.animate({
         height: self.currheight
       },1000, function(){
+        self.close.css('visibility','visible');
         self.link.hide();
-  self.player.setPlaybackQuality('hd1080');
+        self.player.setPlaybackQuality('hd720');
         self.player.playVideo(); 
       })
   });
-  $('.stop-youtube').click(function(e){
+  this.close.click(function(e){
     e.preventDefault();
     self.endEvents();
   })
@@ -52,12 +53,12 @@ YouTube.prototype.initEvents = function() {
 
 YouTube.prototype.endEvents = function() {
   var self = this;
-
+  self.close.css('visibility','hidden');
   self.image.fadeIn({duration:1500,easing:'easeOutCirc'}); 
-    $(self.player.a).show().fadeIn({duration:1500,easing:'easeOutCirc'}); 
-    self.wrapper.animate({
-      height:'282'
-    },1000, function(){
-      self.link.show();
+  $(self.player.a).show().fadeIn({duration:1500,easing:'easeOutCirc'}); 
+  self.wrapper.animate({
+    height:'282'
+  },1000, function(){
+    self.link.show();
   })
 }

diff --git a/cloudcms/templates/content/intro_video.html b/cloudcms/templates/content/intro_video.html
index bbc556e..a9ad810 100644 (file)
--- a/cloudcms/templates/content/intro_video.html
+++ b/cloudcms/templates/content/intro_video.html
@@ -1,4 +1,4 @@
-<a href="" class="stop-youtube">close</a>
+<a href="#" id="stop-youtube" title="hide video">X</a>
 <div class="video-thumb">
        <a href="#" class="play">play</a>
        <img src="{{ content.image.get_absolute_url }}" alt="">

diff --git a/cloudcms/templates/content/stats_block.html b/cloudcms/templates/content/stats_block.html
index 5f22ff7..73e8cd1 100644 (file)
--- a/cloudcms/templates/content/stats_block.html
+++ b/cloudcms/templates/content/stats_block.html
@@ -1,6 +1,6 @@
 <div class="stats-block">
         <h2 style="color:{{ content.color }}">{{ content.title }}</h2>
-       <ul>
+       <ul class="clearfix">
                {% if content.running_vms %}
                <li class="running_vms"><em>{{ content.title_running_vms }}</em><span>0</span></li>
                {% endif %}
@@ -20,7 +20,6 @@
                <li class="active_networks"><em>{{ content.title_active_networks }}</em><span>0</span></li>
                {% endif %}
                 
-        
        </ul>
        <script>
        var stats_settings = {