Fixed issues with full screen

static/css/application.css

@@ -2863,6 +2863,13 @@ section.course-index div#accordion ul.ui-accordion-content li a p {
 section.course-index div#accordion ul.ui-accordion-content li a p.subtitle {
   color: #666; }
 
+section.course-content div.video {
+  padding: 6px 22.652px;
+  margin: 0 -22.652px;
+  border-top: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
+  background: #f3f3f3;
+  display: block; }
 section.course-content div.video-subtitles {
   display: table;
   zoom: 1; }
@@ -3168,6 +3175,41 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   background-color: #444; }
 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;
+  color: #797979;
+  -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;
+  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; }
+section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.add-fullscreen:hover {
+  color: #fff;
+  text-decoration: none;
+  background-color: #444; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles {
   float: left;
   display: block;
@@ -3297,14 +3339,18 @@ section.course-content div.video-subtitles.fullscreen {
   border: 0;
   padding: 0;
   height: 100%;
-  left: 22px;
   position: fixed;
+  left: 0;
   top: 0;
+  bottom: 0;
   width: 100%;
+  max-height: 100%;
   z-index: 999; }
 section.course-content div.video-subtitles.fullscreen div.tc-wrapper {
   padding: 20px;
-  vertical-align: middle; }
+  vertical-align: middle;
+  min-height: 100%;
+  overflow: hidden; }
 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/courseware/_video.scss

 section.course-content {
+  div.video {
+    padding: 6px lh();
+    margin: 0 (-(lh()));
+    border-top: 1px solid #e1e1e1;
+    border-bottom: 1px solid #e1e1e1;
+    background: #f3f3f3;
+    display: block;
+  }
   div.video-subtitles {
-    // padding: 6px lh();
-    // border-top: 1px solid #e1e1e1;
-    // border-bottom: 1px solid #e1e1e1;
-    // background: #f3f3f3;
     display: table;
     @include clearfix();
 
@@ -261,6 +265,24 @@ 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();
+            border-right: 1px solid #000;
+            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+
+            &:hover {
+              color: #fff;
+              text-decoration: none;
+              background-color: #444;
+            }
+          }
+
           a.hide-subtitles {
             float: left;
             display: block;
@@ -368,15 +390,19 @@ section.course-content {
       border: 0;
       padding: 0;
       height: 100%;
-      left: 22px;
       position: fixed;
+      left: 0;
       top: 0;
+      bottom: 0;
       width: 100%;
+      max-height: 100%;
       z-index: 999;
 
       div.tc-wrapper {
         padding: 20px;
         vertical-align: middle;
+        min-height: 100%;
+        overflow: hidden;
       }
 
       ol.subtitles {

templates/video.html

@@ -2,7 +2,8 @@
   <h1> ${name} </h1>
 % endif
 
-<div class="video-subtitles">
+<div class="video">
+<div class="video-subtitles fullscreen">
 <div class="tc-wrapper">
 
   <div class="video-wrapper">
@@ -63,6 +64,7 @@
 </div>
 
 </div>
+</div>
 
 <%block name="js_extra">
 <script type="text/javascript" charset="utf-8">