Added styles for the captions and video bar

static/css/application.css

@@ -117,7 +117,7 @@ input, select {
   font-weight: 800;
   font-style: italic; }
 
-.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
+.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
   content: ".";
   display: block;
   height: 0;
@@ -2679,12 +2679,18 @@ div.course-wrapper section.course-content section.tutorials ul {
   list-style: disc outside none;
   margin-left: 22.652px; }
 div.course-wrapper section.course-content div.staff_info {
+  zoom: 1;
   white-space: pre-wrap;
   border-top: 1px solid #ccc;
   padding-top: 22.652px;
   margin-top: 22.652px;
   line-height: 22.652px;
   font-family: Consolas, "Lucida Console", Monaco, "Courier New", Courier, monospace; }
+div.course-wrapper section.course-content div.staff_info:before, div.course-wrapper section.course-content div.staff_info:after {
+  content: "";
+  display: table; }
+div.course-wrapper section.course-content div.staff_info:after {
+  clear: both; }
 div.course-wrapper section.course-content div.ui-slider {
   border: 1px solid #aaa;
   background: #ddd;
@@ -2776,7 +2782,13 @@ section.course-content div.video-subtitles {
   border-top: 1px solid #e1e1e1;
   border-bottom: 1px solid #e1e1e1;
   background: #f3f3f3;
-  position: relative; }
+  position: relative;
+  zoom: 1; }
+section.course-content div.video-subtitles:before, section.course-content div.video-subtitles:after {
+  content: "";
+  display: table; }
+section.course-content div.video-subtitles:after {
+  clear: both; }
 section.course-content div.video-subtitles div.video-wrapper {
   float: left;
   width: 65.761%;
@@ -2853,7 +2865,7 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   display: block;
   cursor: pointer;
   height: 14px;
-  padding: 16.989px 22.652px;
+  padding: 16.989px;
   text-indent: -9999px;
   width: 14px; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li a.play {
@@ -2865,7 +2877,7 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
 section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li a.pause:hover {
   background-color: #444; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li div#vidtime {
-  padding-left: 22.652px;
+  padding-left: 16.989px;
   font-weight: bold;
   line-height: 46px;
   -webkit-font-smoothing: antialiased; }
@@ -2941,13 +2953,14 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles {
   float: left;
   display: block;
-  padding-right: 11.326px;
+  padding: 0 11.326px;
   margin-left: 0;
   color: #797979;
-  padding-left: 50px;
   line-height: 46px;
+  width: 30px;
+  text-indent: -9999px;
   font-weight: 800;
-  background: url("/static/images/cc.png") 16px center no-repeat;
+  background: url("/static/images/cc.png") center no-repeat;
   -webkit-font-smoothing: antialiased;
   -webkit-transition-property: all;
   -moz-transition-property: all;
@@ -2968,16 +2981,58 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   -moz-transition-delay: 0;
   -ms-transition-delay: 0;
   -o-transition-delay: 0;
+  transition-delay: 0;
+  opacity: 1;
+  position: relative; }
+section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles:after {
+  text-indent: 0;
+  position: absolute;
+  top: 0;
+  right: -40px;
+  content: "turn off";
+  display: block;
+  width: 70px;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition-property: all;
+  -moz-transition-property: all;
+  -ms-transition-property: all;
+  -o-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.15s;
+  -moz-transition-duration: 0.15s;
+  -ms-transition-duration: 0.15s;
+  -o-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  -webkit-transition-delay: 0;
+  -moz-transition-delay: 0;
+  -ms-transition-delay: 0;
+  -o-transition-delay: 0;
   transition-delay: 0; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles:hover {
   color: #fff;
   text-decoration: none;
-  background-color: #444; }
+  background-color: #444;
+  padding-right: 80px;
+  background-position: 11px center; }
+section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles:hover:after {
+  right: 0;
+  opacity: 1;
+  visibility: visible; }
+section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles.off {
+  opacity: .7; }
+section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles.off:after {
+  content: "turn on"; }
 section.course-content div.video-subtitles ol.subtitles {
   float: left;
   width: 31.522%;
   padding-top: 10px;
-  height: 530px;
+  max-height: 460px;
   overflow: hidden; }
 section.course-content div.video-subtitles ol.subtitles li {
   border: 0;
@@ -3020,6 +3075,9 @@ section.course-content div.video-subtitles.closed ol.subtitles {
   width: 0px;
   height: 0; }
 
+div.course-wrapper.closed section.course-content div.video-subtitles ol.subtitles {
+  max-height: 577px; }
+
 nav.sequence-nav {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;

templates/sass/courseware/_courseware.scss

@@ -175,6 +175,7 @@ div.course-wrapper {
     }
 
     div.staff_info {
+      @include clearfix();
       white-space: pre-wrap;
       border-top: 1px solid #ccc;
       padding-top: lh();

templates/sass/courseware/_video.scss

@@ -6,7 +6,7 @@ section.course-content {
     border-bottom: 1px solid #e1e1e1;
     background: #f3f3f3;
     position: relative;
-    @extend .clearfix;
+    @include clearfix();
 
     div.video-wrapper {
       float: left;
@@ -106,7 +106,7 @@ section.course-content {
               display: block;
               cursor: pointer;
               height: 14px;
-              padding: lh(.75) lh();
+              padding: lh(.75);
               text-indent: -9999px;
               width: 14px;
 
@@ -129,7 +129,7 @@ section.course-content {
             }
 
             div#vidtime {
-              padding-left: lh();
+              padding-left: lh(.75);
               font-weight: bold;
               line-height: 46px; //height of play pause buttons
               -webkit-font-smoothing: antialiased;
@@ -186,20 +186,52 @@ section.course-content {
           a.hide-subtitles {
             float: left;
             display: block;
-            padding-right: lh(.5);
+            padding: 0 lh(.5);
             margin-left: 0;
             color: #797979;
-            padding-left: 50px;
             line-height: 46px; //height of play pause buttons
+            width: 30px;
+            text-indent: -9999px;
             font-weight: 800;
-            background: url('/static/images/cc.png') 16px center no-repeat;
+            background: url('/static/images/cc.png') center no-repeat;
             -webkit-font-smoothing: antialiased;
             @include transition();
+            opacity: 1;
+            position: relative;
+
+            &:after {
+              text-indent: 0;
+              position: absolute;
+              top: 0;
+              right: -40px;
+              content: "turn off";
+              display: block;
+              width: 70px;
+              opacity: 0;
+              visibility: hidden;
+              @include transition();
+            }
 
             &:hover {
               color: #fff;
               text-decoration: none;
               background-color: #444;
+              padding-right: 80px;
+              background-position: 11px center;
+
+              &:after {
+                right: 0;
+                opacity: 1;
+                visibility: visible;
+              }
+            }
+
+            &.off {
+              opacity: .7;
+
+              &:after {
+                content: "turn on";
+              }
             }
           }
         }
@@ -210,7 +242,7 @@ section.course-content {
       float: left;
       width: flex-grid(3, 9);
       padding-top: 10px;
-      height: 530px;
+      max-height: 460px;
       overflow: hidden;
 
       li {
@@ -254,3 +286,9 @@ section.course-content {
     }
   }
 }
+
+div.course-wrapper.closed section.course-content div.video-subtitles {
+  ol.subtitles {
+    max-height: 577px;
+  }
+}

templates/video.html

@@ -32,7 +32,7 @@
           <ol id="video_speeds"></ol>
         </div>
 
-        <a href="#" class="hide-subtitles">turn off</a>
+        <a href="#" class="hide-subtitles">Captions</a>
         </div>
       </section>
     </section>
@@ -54,7 +54,7 @@
     <li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
     <li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
     <li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
-    <!-- <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li> -->
+    <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
   </ol>
 
 </div>
@@ -65,10 +65,15 @@
       $('.hide-subtitles').click(function() {
         $('div.video-subtitles').toggleClass('closed');
 
-        var link_text = $('.hide-subtitles').text();
-        $(this).text((link_text == 'turn off') ? 'turn on' : 'turn off');
+        $(this).toggleClass("off");
+        // var link_text = $('.hide-subtitles').text();
+        // $(this).text((link_text == 'turn off') ? 'turn on' : 'turn off');
         return false;
        });
+
+      $("div.speeds").click(function(){
+        $("div.speeds ol#video_speeds").slideToggle();
+        });
   });
 </script>
 </%block>

templates/video_init.js

@@ -37,7 +37,7 @@ function add_speed(key, stream) {
   var id = 'speed_' + stream;
 
   if (key == video_speed) {
-    $("#video_speeds").append(' <li class=active id="'+id+'">'+key+'x</li>');
+    $("#video_speeds").append(' <li class="active" id="'+id+'">'+key+'x</li>');
   } else {
     $("#video_speeds").append(' <li id="'+id+'">'+key+'x</li>');
   }