From c4b5b6b3c047aa2f7fb98b493ccd96cfa56ba1c5 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 5 Apr 2012 13:57:20 -0400
Subject: [PATCH] Added some fixes for bugs in full screen mode

---
 static/css/application.css                 |  73 ++++++++-------------
 static/images/fullscreen.png               | Bin 0 -> 114 bytes
 templates/courseware.html                  |   1 +
 templates/main.html                        |   2 +-
 templates/sass/courseware/_courseware.scss |   9 +++
 templates/sass/courseware/_video.scss      |  56 +++++++---------
 templates/video.html                       |  12 +++-
 7 files changed, 72 insertions(+), 81 deletions(-)
 create mode 100644 static/images/fullscreen.png

diff --git a/static/css/application.css b/static/css/application.css
index 1660bfdbdb..c582285440 100644
--- a/static/css/application.css
+++ b/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;
-  display: block;
-  padding: 0 11.326px;
-  margin-left: 0;
-  line-height: 46px;
+  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;
+  float: left;
+  line-height: 46px;
+  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;
diff --git a/static/images/fullscreen.png b/static/images/fullscreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2f9054fe16b05e6e3313296cbb77d842308248a
GIT binary patch
literal 114
zcmeAS@N?(olHy`uVBq!ia0vp^azHH3!3HE{?Ehy0DN9cm$B>F!Z_jSzWia4ib~HQj
z@3CR0vBRzghXvce^v*W+)ZLqYme0VTKuhLq`@#9lY;1n5%8c*Z_3spatWyXQSO+wO
N!PC{xWt~$(69CziBYXe=

literal 0
HcmV?d00001

diff --git a/templates/courseware.html b/templates/courseware.html
index ec4be8c6c4..f64060b0f6 100644
--- a/templates/courseware.html
+++ b/templates/courseware.html
@@ -1,4 +1,5 @@
 <%inherit file="main.html" />
+<%block name="bodyclass">courseware</%block>
 <%block name="title"><title>Courseware – MITx 6.002x</title></%block>
 
 <%block name="js_extra">
diff --git a/templates/main.html b/templates/main.html
index d8ee2d5452..ca6a7c2ae5 100644
--- a/templates/main.html
+++ b/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]-->
diff --git a/templates/sass/courseware/_courseware.scss b/templates/sass/courseware/_courseware.scss
index d048c4a69f..493b0239d1 100644
--- a/templates/sass/courseware/_courseware.scss
+++ b/templates/sass/courseware/_courseware.scss
@@ -1,3 +1,12 @@
+html { 
+  height: 100%;
+  max-height: 100%;
+}
+body.courseware {
+  height: 100%;
+  max-height: 100%;
+}
+
 div.course-wrapper {
   @extend .table-wrapper;
 
diff --git a/templates/sass/courseware/_video.scss b/templates/sass/courseware/_video.scss
index d2c447aaa1..1aed842d6b 100644
--- a/templates/sass/courseware/_video.scss
+++ b/templates/sass/courseware/_video.scss
@@ -254,15 +254,18 @@ section.course-content {
           }
 
           a.add-fullscreen {
-            float: left;
-            display: block;
-            padding: 0 lh(.5);
-            margin-left: 0;
-            line-height: 46px; //height of play pause buttons
-            color: #797979;
-            @include transition();
+            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;
+            float: left;
+            line-height: 46px; //height of play pause buttons
+            margin-left: 0;
+            padding: 0 lh(.5);
+            text-indent: -9999px;
+            @include transition();
+            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;
diff --git a/templates/video.html b/templates/video.html
index 2847f04791..0fc563d43c 100644
--- a/templates/video.html
+++ b/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;
        });