From 1016843ae2559d321d707d70e7d0849cea473b23 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 3 Apr 2012 11:46:45 -0400 Subject: [PATCH] Added style and js for speed picker and hover for scrubber --- static/css/application.css | 133 +++++++++++++++++++++----- templates/sass/courseware/_video.scss | 69 ++++++++++--- templates/video.html | 9 +- templates/video_init.js | 3 + 4 files changed, 176 insertions(+), 38 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 53237c27f5..ee4fa0cc06 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -2830,26 +2830,84 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr background: #c2c2c2; border: none; border-bottom: 1px solid #000; - height: 14px; } + height: 7px; + -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#slider a.ui-slider-handle { - -webkit-border-radius: 20px; - -moz-border-radius: 20px; - -ms-border-radius: 20px; - -o-border-radius: 20px; - border-radius: 20px; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + -ms-border-radius: 15px; + -o-border-radius: 15px; + border-radius: 15px; -webkit-box-shadow: inset 0 1px 0 #bf4040; -moz-box-shadow: inset 0 1px 0 #bf4040; box-shadow: inset 0 1px 0 #bf4040; background: #993333 url(/static/images/slider-handle.png) center center no-repeat; border: 1px solid #4d1919; cursor: pointer; + height: 15px; + margin-left: -7px; + top: -4px; + width: 15px; + -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; + -webkit-background-size: 50%; + -moz-background-size: 50%; + -ms-background-size: 50%; + -o-background-size: 50%; + background-size: 50%; } +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 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 ul.vcr { float: left; margin-right: 22.652px; } @@ -2884,16 +2942,15 @@ 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 { float: right; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds { - border-right: 1px solid #000; border-left: 1px solid #000; + 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; float: left; line-height: 46px; margin-right: 0; - -webkit-font-smoothing: antialiased; - opacity: .7; + position: relative; -webkit-transition-property: all; -moz-transition-property: all; -ms-transition-property: all; @@ -2913,7 +2970,9 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr -moz-transition-delay: 0; -ms-transition-delay: 0; -o-transition-delay: 0; - transition-delay: 0; } + transition-delay: 0; + width: 110px; + -webkit-font-smoothing: antialiased; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds h3, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds div#wiki_panel input[type="button"], div#wiki_panel section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds input[type="button"] { display: -moz-inline-box; -moz-box-orient: vertical; @@ -2922,9 +2981,13 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr zoom: 1; *display: inline; *vertical-align: auto; - padding: 0 11.326px; - font-weight: normal; } -section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds { + padding: 0 5.663px 0 11.326px; + font-weight: normal; + text-transform: uppercase; + font-size: 12px; + letter-spacing: 1px; + color: #999; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds p.active { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; @@ -2932,21 +2995,47 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr zoom: 1; *display: inline; *vertical-align: auto; - padding-right: 11.326px; } -section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li { - cursor: pointer; - color: #fff; + padding: 0 11.326px 0 0; + margin-bottom: 0; + font-weight: bold; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds { + background-color: #444; + border: 1px solid #000; + border-top: 0; + -webkit-box-shadow: inset 1px 0 0 #555555; + -moz-box-shadow: inset 1px 0 0 #555555; + box-shadow: inset 1px 0 0 #555555; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; - *vertical-align: auto; } + *vertical-align: auto; + left: -1px; + position: absolute; + top: 48px; + width: 100%; + z-index: 10; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li { + border-bottom: 1px solid #000; + -webkit-box-shadow: 0 1px 0 #555555; + -moz-box-shadow: 0 1px 0 #555555; + box-shadow: 0 1px 0 #555555; + color: #fff; + cursor: pointer; + padding: 0 11.326px; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li.active { font-weight: bold; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li:last-child { + border-bottom: 0; + margin-top: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li:hover { - color: #aaa; } + color: #aaa; + background-color: #666; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds:hover { opacity: 1; background-color: #444; } diff --git a/templates/sass/courseware/_video.scss b/templates/sass/courseware/_video.scss index 5f83f11c39..1ec241dda1 100644 --- a/templates/sass/courseware/_video.scss +++ b/templates/sass/courseware/_video.scss @@ -71,24 +71,40 @@ section.course-content { background: #c2c2c2; border: none; border-bottom: 1px solid #000; - height: 14px; + height: 7px; + @include transition(); a.ui-slider-handle { - @include border-radius(20px); + @include border-radius(15px); @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%)); background: $mit-red url(/static/images/slider-handle.png) center center no-repeat; border: 1px solid darken($mit-red, 20%); cursor: pointer; - height: 20px; - margin-left: -10px; + height: 15px; + margin-left: -7px; top: -4px; - width: 20px; + width: 15px; + @include transition(); + @include background-size(50%); &:focus, &:hover { background-color: lighten($mit-red, 10%); outline: none; } } + + &: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 { @@ -141,38 +157,67 @@ section.course-content { float: right; div.speeds { - border-right: 1px solid #000; border-left: 1px solid #000; + border-right: 1px solid #000; @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); float: left; line-height: 46px; //height of play pause buttons margin-right: 0; - -webkit-font-smoothing: antialiased; - opacity: .7; + position: relative; @include transition(); + width: 110px; + -webkit-font-smoothing: antialiased; h3 { @include inline-block(); - padding: 0 lh(.5); + padding: 0 lh(.25) 0 lh(.5); font-weight: normal; + text-transform: uppercase; + font-size: 12px; + letter-spacing: 1px; + color: #999; + } + + p.active { + @include inline-block(); + padding: 0 lh(.5) 0 0; + margin-bottom: 0; + font-weight: bold; } // fix for now ol#video_speeds { + background-color: #444; + border: 1px solid #000; + border-top: 0; + @include box-shadow(inset 1px 0 0 #555); @include inline-block(); - padding-right: lh(.5); + left: -1px; + position: absolute; + top: 48px; + width: 100%; + z-index: 10; li { - cursor: pointer; + border-bottom: 1px solid #000; + @include box-shadow( 0 1px 0 #555); color: #fff; - @include inline-block(); + cursor: pointer; + padding: 0 lh(.5); &.active { font-weight: bold; } + &:last-child { + border-bottom: 0; + margin-top: 0; + @include box-shadow(none); + } + &:hover { color: #aaa; + background-color: #666; } } } diff --git a/templates/video.html b/templates/video.html index 0f82fa5b8c..bb7d1b9ed0 100644 --- a/templates/video.html +++ b/templates/video.html @@ -29,6 +29,7 @@

Speed

+

    @@ -66,13 +67,13 @@ $('div.video-subtitles').toggleClass('closed'); $(this).toggleClass("off"); - // var link_text = $('.hide-subtitles').text(); - // $(this).text((link_text == 'turn off') ? 'turn on' : 'turn off'); return false; }); - $("div.speeds").click(function(){ - $("div.speeds ol#video_speeds").slideToggle(); + $("ol#video_speeds").hide(); + + $("div.speeds").click(function() { + $("ol#video_speeds").slideToggle(); }); }); diff --git a/templates/video_init.js b/templates/video_init.js index 787a9be5ad..c9fe437888 100644 --- a/templates/video_init.js +++ b/templates/video_init.js @@ -38,6 +38,7 @@ function add_speed(key, stream) { if (key == video_speed) { $("#video_speeds").append('
  1. '+key+'x
    2. '); + $("p.active").text(key + 'x'); } else { $("#video_speeds").append('
  2. '+key+'x
    3. '); } @@ -46,6 +47,8 @@ function add_speed(key, stream) { change_video_speed(key, stream); $(this).siblings().removeClass("active"); $(this).addClass("active"); + var active = $(this).text(); + $("p.active").text(active); }); }