Added more bug fixes

static/css/application.css

@@ -511,7 +511,8 @@ html body div.qtip div.ui-tooltip-content {
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
   font: 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-  margin-top: -30px; }
+  margin-top: -30px;
+  margin-right: 3px; }
 html body section.outside-app {
   max-width: 600px;
   padding: 22.652px; }
@@ -3165,7 +3166,8 @@ 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.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; }
+  opacity: 1;
+  display: block; }
 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;
@@ -3187,6 +3189,7 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   -moz-box-shadow: inset 1px 0 0 #555555, 0 2px 0 #444444;
   box-shadow: inset 1px 0 0 #555555, 0 2px 0 #444444;
   left: -1px;
+  display: none;
   position: absolute;
   top: 0;
   width: 100%;
@@ -3386,7 +3389,12 @@ section.course-content div.video-subtitles.fullscreen {
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 999; }
+  z-index: 999;
+  overflow: hidden; }
+section.course-content div.video-subtitles.fullscreen.closed ol.subtitles {
+  width: auto;
+  height: auto;
+  right: -31.984%; }
 section.course-content div.video-subtitles.fullscreen a.exit {
   position: absolute;
   top: 20px;
@@ -3432,7 +3440,27 @@ section.course-content div.video-subtitles.fullscreen ol.subtitles {
   background: rgba(0, 0, 0, 0.8);
   padding: 22.652px;
   max-width: 23.482%;
-  max-height: 100%; }
+  max-height: 100%;
+  -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.fullscreen ol.subtitles li {
   color: #aaa; }
 section.course-content div.video-subtitles.fullscreen ol.subtitles li.current {

static/js/jquery.ui.touch-punch.min.js

+/*
+ * jQuery UI Touch Punch 0.2.2
+ *
+ * Copyright 2011, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
\ No newline at end of file

templates/sass/courseware/_video.scss

@@ -209,6 +209,7 @@ section.course-content {
 
                 ol#video_speeds {
                   opacity: 1;
+                  display: block;
                 }
               }
 
@@ -236,6 +237,7 @@ section.course-content {
                 border-bottom: 0;
                 @include box-shadow(inset 1px 0 0 #555, 0 2px 0 #444);
                 left: -1px;
+                display: none;
                 position: absolute;
                 top:0;
                 width: 100%;
@@ -405,6 +407,15 @@ section.course-content {
       top: 0;
       width: 100%;
       z-index: 999;
+      overflow: hidden;
+
+      &.closed {
+        ol.subtitles {
+          width: auto;
+          height: auto;
+          right: -(flex-grid(4));
+        }
+      }
 
       a.exit {
         position: absolute;
@@ -460,6 +471,7 @@ section.course-content {
         padding: lh();
         max-width: flex-grid(3);
         max-height: 100%;
+        @include transition();
 
         li {
           color: #aaa;

templates/sass/layout/_layout.scss

@@ -37,6 +37,7 @@ html {
        color: #fff;
        font: 12px $body-font-family;
        margin-top: -30px;
+       margin-right: 3px;
       }
     }
 

templates/video.html

@@ -67,20 +67,20 @@
 </div>
 
 <%block name="js_extra">
+<script src="/static/js/jquery.ui.touch-punch.min.js"></script>
 <script type="text/javascript" charset="utf-8">
   $(function() {
-      $('.add-fullscreen, .hide-subtitles').qtip({
+      // tooltips for full browser and closed caption
+      $('.add-fullscreen, .hide-subtitles ').qtip({
           position: {
             my: 'top right',
-            at: 'top right'
-          }
+            at: 'top center',
+            target: 'mouse'
+            }
         });
 
+      //full browser
       $('.add-fullscreen').click(function() {
-          //var window_height = $(window).height();
-          //var video_height = (window_height - 97) + 'px';
-          //$('div.video-wrapper, div.tc-wrapper').css('max-height', window_height);
-          //$('object#myytplayer').css('height', video_height);
 
           $('div.video-subtitles').toggleClass('fullscreen');
 
@@ -103,6 +103,7 @@
         });
 
 
+      //hide subtitles
       $('.hide-subtitles').click(function() {
         $('div.video-subtitles').toggleClass('closed');
 
@@ -112,11 +113,6 @@
         return false;
        });
 
-      var dropUpHeight = $('ol#video_speeds').height();
-      console.log(dropUpHeight);
-
-      // $('ol#video_speeds').css('top', -(dropUpHeight));
-
       $("div.speeds a").hover(function() {
         $(this).toggleClass("open");
         });