Skip to content

E
edx-platform
Commit fa89f839 by Kyle Fiedler
Options

Added some fixes for bugs in full screen mode

parent 7b8e662e
Showing with 70 additions and 79 deletions
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;
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment