Added some fixes for bugs in full screen mode

static/css/application.css

@@ -2643,6 +2643,14 @@ button.ui-button::-moz-focus-inner {
   border-color: #AAA;
   color: #111; }
 
+html {
+  height: 100%;
+  max-height: 100%; }
+
+body.courseware {
+  height: 100%;
+  max-height: 100%; }
+
 div.course-wrapper ul, div.course-wrapper ol {
   list-style: none; }
 div.course-wrapper section.course-content p {
@@ -3189,12 +3197,18 @@ 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:hover {
   opacity: 1; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.add-fullscreen {
-  float: left;
+  background: url(/static/images/fullscreen.png) center no-repeat;
+  border-right: 1px solid #000;
+  -webkit-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
+  -moz-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
+  box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
+  color: #797979;
   display: block;
-  padding: 0 11.326px;
-  margin-left: 0;
+  float: left;
   line-height: 46px;
-  color: #797979;
+  margin-left: 0;
+  padding: 0 11.326px;
+  text-indent: -9999px;
   -webkit-transition-property: all;
   -moz-transition-property: all;
   -ms-transition-property: all;
@@ -3215,10 +3229,7 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   -ms-transition-delay: 0;
   -o-transition-delay: 0;
   transition-delay: 0;
-  border-right: 1px solid #000;
-  -webkit-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
-  -moz-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
-  box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555; }
+  width: 30px; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.add-fullscreen:hover {
   color: #fff;
   text-decoration: none;
@@ -3257,50 +3268,13 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   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;
-  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 div.video-wrapper:hover section.video-controls ul, section.course-content div.video-subtitles div.video-wrapper:hover section.video-controls div {
   opacity: 1; }
 section.course-content div.video-subtitles div.video-wrapper:hover section.video-controls div#slider {
@@ -3374,6 +3348,13 @@ 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;

templates/courseware.html

 <%inherit file="main.html" />
+<%block name="bodyclass">courseware</%block>
 <%block name="title"><title>Courseware – MITx 6.002x</title></%block>
 
 <%block name="js_extra">

templates/main.html

@@ -26,7 +26,7 @@
   <script type="text/javascript" src="${ settings.LIB_URL }mathjax-MathJax-c9db6ac/MathJax.js?config=TeX-AMS_HTML-full"></script>
 </head>
 
-<body class="<%block name="bodyclass"/>">
+<body class="<%block name='bodyclass'/>">
   <!--[if lte IE 9]>
   <p class="ie-warning">You are using a browser that is not supported by <em>MITx</em>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
   <![endif]-->

templates/sass/courseware/_courseware.scss

+html { 
+  height: 100%;
+  max-height: 100%;
+}
+body.courseware {
+  height: 100%;
+  max-height: 100%;
+}
+
 div.course-wrapper {
   @extend .table-wrapper;
 

templates/sass/courseware/_video.scss

@@ -254,15 +254,18 @@ section.course-content {
           }
 
           a.add-fullscreen {
-            float: left;
+            background: url(/static/images/fullscreen.png) center no-repeat;
+            border-right: 1px solid #000;
+            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            color: #797979;
             display: block;
-            padding: 0 lh(.5);
-            margin-left: 0;
+            float: left;
             line-height: 46px; //height of play pause buttons
-            color: #797979;
+            margin-left: 0;
+            padding: 0 lh(.5);
+            text-indent: -9999px;
             @include transition();
-            border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            width: 30px;
 
             &:hover {
               color: #fff;
@@ -287,39 +290,15 @@ section.course-content {
             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";
-              }
             }
           }
         }
@@ -405,6 +384,21 @@ 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;

templates/video.html

@@ -35,9 +35,9 @@
           <ol id="video_speeds"></ol>
         </div>
 
-        <a href="#" class="add-fullscreen">Full screen</a>
+        <a href="#" class="add-fullscreen" title="Full screen">Full screen</a>
 
-        <a href="#" class="hide-subtitles">Captions</a>
+        <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
         </div>
       </section>
     </section>
@@ -69,6 +69,8 @@
 <%block name="js_extra">
 <script type="text/javascript" charset="utf-8">
   $(function() {
+      $('.add-fullscreen, .hide-subtitles').qtip();
+
       $('.add-fullscreen').click(function() {
           //var window_height = $(window).height();
           //var video_height = (window_height - 97) + 'px';
@@ -95,7 +97,11 @@
       $('.hide-subtitles').click(function() {
         $('div.video-subtitles').toggleClass('closed');
 
-        $(this).toggleClass("off");
+        var link_title = $(this).attr('title');
+        console.log(link_title);
+
+        ///$(this).attr('title', 'Turn on captions' ? 'Turn off captions' : 'Turn on captions');
+
         return false;
        });