Added fixes for bugs for the video

static/css/application.css

@@ -510,8 +510,8 @@ html body div.qtip div.ui-tooltip-content {
   border: none;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
-  font: 12px 14px;
+  font: 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-  margin-top: 5px; }
+  margin-top: -30px; }
 html body section.outside-app {
   max-width: 600px;
   padding: 22.652px; }
@@ -2909,16 +2909,12 @@ section.course-content div.video {
   background: #f3f3f3;
   display: block; }
 section.course-content div.video-subtitles {
-  display: table;
   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.tc-wrapper {
-  display: table-cell;
-  width: 100%; }
 section.course-content div.video-subtitles div.video-wrapper {
   float: left;
   width: 65.761%;
@@ -3169,6 +3165,8 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   clear: both; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a.open {
   background: url("/static/images/open-arrow.png") 10px center no-repeat; }
+section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a.open ol#video_speeds {
+  opacity: 1; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a h3, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a div#wiki_panel input[type="button"], div#wiki_panel section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a input[type="button"] {
   color: #999;
   font-size: 12px;
@@ -3185,22 +3183,36 @@ 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 div.speeds a ol#video_speeds {
   background-color: #444;
   border: 1px solid #000;
-  border-top: 0;
+  border-bottom: 0;
-  -webkit-box-shadow: inset 1px 0 0 #555555;
+  -webkit-box-shadow: inset 1px 0 0 #555555, 0 2px 0 #444444;
-  -moz-box-shadow: inset 1px 0 0 #555555;
+  -moz-box-shadow: inset 1px 0 0 #555555, 0 2px 0 #444444;
-  box-shadow: inset 1px 0 0 #555555;
+  box-shadow: inset 1px 0 0 #555555, 0 2px 0 #444444;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
   left: -1px;
   position: absolute;
-  top: 46px;
+  top: 0;
   width: 100%;
-  z-index: 10; }
+  z-index: 10;
+  -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;
+  opacity: 0; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a ol#video_speeds li {
   border-bottom: 1px solid #000;
   -webkit-box-shadow: 0 1px 0 #555555;
@@ -3375,21 +3387,15 @@ section.course-content div.video-subtitles.fullscreen {
   top: 0;
   width: 100%;
   z-index: 999; }
-section.course-content div.video-subtitles.fullscreen.closed div.video-wrapper {
-  width: 82.88%;
-  margin: 0 auto;
-  float: none; }
-section.course-content div.video-subtitles.fullscreen.closed ol.subtitles {
-  width: 0px;
-  height: 0; }
 section.course-content div.video-subtitles.fullscreen a.exit {
   position: absolute;
   top: 20px;
-  right: 20px;
+  left: 20px;
   color: #aaa;
   text-transform: uppercase;
   letter-spacing: 1px;
-  font-style: 12px; }
+  font-style: 12px;
+  display: none; }
 section.course-content div.video-subtitles.fullscreen a.exit::after {
   content: "✖";
   display: -moz-inline-box;
@@ -3402,14 +3408,29 @@ section.course-content div.video-subtitles.fullscreen a.exit::after {
   padding-left: 6px; }
 section.course-content div.video-subtitles.fullscreen a.exit:hover {
   color: #993333; }
-section.course-content div.video-subtitles.fullscreen div.tc-wrapper {
-  padding: 20px;
-  vertical-align: middle;
-  max-height: 100%;
-  overflow-y: scroll; }
 section.course-content div.video-subtitles.fullscreen div.tc-wrapper object#myytplayer {
-  max-height: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
   overflow: hidden; }
+section.course-content div.video-subtitles.fullscreen div.tc-wrapper section.video-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9999; }
+section.course-content div.video-subtitles.fullscreen ol.subtitles {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 22.652px;
+  max-width: 23.482%;
+  max-height: 100%; }
 section.course-content div.video-subtitles.fullscreen ol.subtitles li {
   color: #aaa; }
 section.course-content div.video-subtitles.fullscreen ol.subtitles li.current {

templates/sass/base/_variables.scss

@@ -2,7 +2,7 @@
 // ---------------------------------------- //
 
 // fonts
-$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
+$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
 $body-font-size: 14px;
 
 // grid

templates/sass/courseware/_video.scss

@@ -18,14 +18,8 @@ section.course-content {
   }
 
   div.video-subtitles {
-    display: table;
     @include clearfix();
 
-    div.tc-wrapper {
-      display: table-cell;
-      width: 100%;
-    }
-
     div.video-wrapper {
       float: left;
       width: flex-grid(6, 9);
@@ -212,6 +206,10 @@ section.course-content {
 
               &.open {
                 background: url('/static/images/open-arrow.png') 10px center no-repeat;
+
+                ol#video_speeds {
+                  opacity: 1;
+                }
               }
 
               h3 {
@@ -235,14 +233,15 @@ section.course-content {
               ol#video_speeds {
                 background-color: #444;
                 border: 1px solid #000;
-                border-top: 0;
+                border-bottom: 0;
-                @include box-shadow(inset 1px 0 0 #555);
+                @include box-shadow(inset 1px 0 0 #555, 0 2px 0 #444);
-                @include inline-block();
                 left: -1px;
                 position: absolute;
-                top: 46px;
+                top:0;
                 width: 100%;
                 z-index: 10;
+                @include transition();
+                opacity: 0;
 
                 li {
                   border-bottom: 1px solid #000;
@@ -406,29 +405,15 @@ section.course-content {
       width: 100%;
       z-index: 999;
 
-      &.closed {
-        @extend .trans;
-
-        div.video-wrapper {
-          width: flex-grid(7.5,9);
-          margin: 0 auto;
-          float: none;
-        }
-
-        ol.subtitles {
-          width: 0px;
-          height: 0;
-        }
-      }
-
       a.exit {
         position: absolute;
         top: 20px;
-        right: 20px;
+        left: 20px;
         color: #aaa;
         text-transform: uppercase;
         letter-spacing: 1px;
         font-style: 12px;
+        display: none;
 
         &::after {
           content: "✖";
@@ -442,19 +427,35 @@ section.course-content {
       }
 
       div.tc-wrapper {
-        padding: 20px;
-        vertical-align: middle;
-        max-height: 100%;
-        overflow-y: scroll;
-
-
         object#myytplayer {
-          max-height: 100%;
+          height: 100%;
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          left: 0;
           overflow: hidden;
         }
+
+        section.video-controls {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          z-index: 9999;
+        }
       }
 
       ol.subtitles {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        height: 100%;
+        background: rgba(#000, .8);
+        padding: lh();
+        max-width: flex-grid(3);
+        max-height: 100%;
+
         li {
           color: #aaa;
 

templates/sass/layout/_layout.scss

@@ -35,8 +35,8 @@ html {
        border: none;
        background: rgba(#000, .8);
        color: #fff;
-       font: 12px $body-font-size;
+       font: 12px $body-font-family;
-       margin-top: 5px;
+       margin-top: -30px;
       }
     }
 

templates/video.html

@@ -72,10 +72,10 @@
 <script type="text/javascript" charset="utf-8">
   $(function() {
       $('.add-fullscreen, .hide-subtitles').qtip({
-        position: {
+          position: {
-my: 'top center',  // Position my top left...
+            my: 'top right',
-at: 'bottom center', // at the bottom right 
+            at: 'top right'
-        }
+          }
         });
 
       $('.add-fullscreen').click(function() {
@@ -114,11 +114,13 @@ at: 'bottom center', // at the bottom right
         return false;
        });
 
-      $("ol#video_speeds").hide();
+      var dropUpHeight = $('ol#video_speeds').height();
+      console.log(dropUpHeight);
+
+      // $('ol#video_speeds').css('top', -(dropUpHeight));
 
       $("div.speeds a").hover(function() {
         $(this).toggleClass("open");
-        $("ol#video_speeds").slideToggle(150);
         });
 
       $("div.speeds a").click(function() {

templates/video_init.js

@@ -88,6 +88,7 @@ function add_speed(key, stream) {
     var active = $(this).text();
     $("p.active").text(active);
   });
+
 }
 
 var l=[]
@@ -128,6 +129,9 @@ $(document).ready(function() {
       add_speed(l[i], streams[l[i]])
     }
 
+    var dropUpHeight = $('ol#video_speeds').height();
+    console.log(dropUpHeight);
+    $('ol#video_speeds').css('top', -(dropUpHeight));
 });
 
 function toggleVideo(){