From 8b563c0c9dd356003a898a2080325f57d15a5bf9 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 5 Apr 2012 10:18:20 -0400
Subject: [PATCH] added some more styles for the fullscreen video
---
static/css/application.css | 61 ++++++++++++++++-------
templates/sass/courseware/_video.scss | 69 ++++++++++++++++++++-------
templates/video.html | 20 +++++++-
3 files changed, 113 insertions(+), 37 deletions(-)
diff --git a/static/css/application.css b/static/css/application.css
index 1c4abf1501c..1660bfdbdbe 100644
--- a/static/css/application.css
+++ b/static/css/application.css
@@ -3056,19 +3056,6 @@ 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#slider a.ui-slider-handle:focus, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider a.ui-slider-handle:hover {
background-color: #bf4040;
outline: none; }
-section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:hover {
- height: 14px;
- margin-top: -7px; }
-section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:hover a.ui-slider-handle {
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- -ms-border-radius: 20px;
- -o-border-radius: 20px;
- border-radius: 20px;
- height: 20px;
- margin-left: -10px;
- top: -4px;
- width: 20px; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr {
float: left;
margin-right: 22.652px; }
@@ -3314,6 +3301,21 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
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 {
+ height: 14px;
+ margin-top: -7px; }
+section.course-content div.video-subtitles div.video-wrapper:hover section.video-controls div#slider a.ui-slider-handle {
+ -webkit-border-radius: 20px;
+ -moz-border-radius: 20px;
+ -ms-border-radius: 20px;
+ -o-border-radius: 20px;
+ border-radius: 20px;
+ height: 20px;
+ margin-left: -10px;
+ top: -4px;
+ width: 20px; }
section.course-content div.video-subtitles ol.subtitles {
float: left;
width: 31.522%;
@@ -3363,19 +3365,42 @@ section.course-content div.video-subtitles.closed ol.subtitles {
section.course-content div.video-subtitles.fullscreen {
background: rgba(0, 0, 0, 0.95);
border: 0;
- padding: 0;
+ bottom: 0;
height: 100%;
- position: fixed;
left: 0;
+ max-height: 100%;
+ padding: 0;
+ position: fixed;
top: 0;
- bottom: 0;
width: 100%;
- max-height: 100%;
z-index: 999; }
+section.course-content div.video-subtitles.fullscreen a.exit {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ color: #aaa;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-style: 12px; }
+section.course-content div.video-subtitles.fullscreen a.exit::after {
+ content: "✖";
+ display: -moz-inline-box;
+ -moz-box-orient: vertical;
+ display: inline-block;
+ vertical-align: baseline;
+ zoom: 1;
+ *display: inline;
+ *vertical-align: auto;
+ padding-left: 6px; }
+section.course-content div.video-subtitles.fullscreen a.exit:hover {
+ color: #993333; }
section.course-content div.video-subtitles.fullscreen div.tc-wrapper {
padding: 20px;
vertical-align: middle;
- min-height: 100%;
+ max-height: 100%;
+ overflow-y: scroll; }
+section.course-content div.video-subtitles.fullscreen div.tc-wrapper object#myytplayer {
+ max-height: 100%;
overflow: hidden; }
section.course-content div.video-subtitles.fullscreen ol.subtitles li {
color: #aaa; }
diff --git a/templates/sass/courseware/_video.scss b/templates/sass/courseware/_video.scss
index e60f7d1115e..d2c447aaa11 100644
--- a/templates/sass/courseware/_video.scss
+++ b/templates/sass/courseware/_video.scss
@@ -136,18 +136,6 @@ section.course-content {
}
}
- &:hover {
- height: 14px;
- margin-top: -7px;
-
- a.ui-slider-handle {
- @include border-radius(20px);
- height: 20px;
- margin-left: -10px;
- top: -4px;
- width: 20px;
- }
- }
}
ul.vcr {
@@ -336,6 +324,25 @@ section.course-content {
}
}
}
+
+ &:hover section.video-controls {
+ ul, div {
+ opacity: 1;
+ }
+
+ div#slider {
+ height: 14px;
+ margin-top: -7px;
+
+ a.ui-slider-handle {
+ @include border-radius(20px);
+ height: 20px;
+ margin-left: -10px;
+ top: -4px;
+ width: 20px;
+ }
+ }
+ }
}
ol.subtitles {
@@ -388,21 +395,47 @@ section.course-content {
&.fullscreen {
background: rgba(#000, .95);
border: 0;
- padding: 0;
+ bottom: 0;
height: 100%;
- position: fixed;
left: 0;
+ max-height: 100%;
+ padding: 0;
+ position: fixed;
top: 0;
- bottom: 0;
width: 100%;
- max-height: 100%;
z-index: 999;
+ a.exit {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ color: #aaa;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-style: 12px;
+
+ &::after {
+ content: "✖";
+ @include inline-block();
+ padding-left: 6px;
+ }
+
+ &:hover {
+ color: $mit-red;
+ }
+ }
+
div.tc-wrapper {
padding: 20px;
vertical-align: middle;
- min-height: 100%;
- overflow: hidden;
+ max-height: 100%;
+ overflow-y: scroll;
+
+
+ object#myytplayer {
+ max-height: 100%;
+ overflow: hidden;
+ }
}
ol.subtitles {
diff --git a/templates/video.html b/templates/video.html
index 95677493b0e..2847f047917 100644
--- a/templates/video.html
+++ b/templates/video.html
@@ -69,11 +69,29 @@
<%block name="js_extra">
<script type="text/javascript" charset="utf-8">
$(function() {
- $('.add-fullscreen').click(function(){
+ $('.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');
+
+ if ($('div.video-subtitles').hasClass('fullscreen')) {
+ $('div.video-subtitles').append('<a href="#" class="exit">Exit</a>');
+ } else {
+ $('a.exit').remove();
+ }
+
+ $('.exit').click(function() {
+ $('div.video-subtitles').removeClass('fullscreen');
+ $(this).remove();
+ return false;
+ });
return false;
});
+
$('.hide-subtitles').click(function() {
$('div.video-subtitles').toggleClass('closed');
--
GitLab