From 67db5c12f52f8977fdd9c472f036d47233f28f5d Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 9 Apr 2012 12:04:49 -0400 Subject: [PATCH] Added arrow to show the dropdown --- static/css/application.css | 68 +++++++++++++++++--------- static/images/closed-arrow.png | Bin 0 -> 112 bytes static/images/open-arrow.png | Bin 0 -> 105 bytes templates/sass/courseware/_video.scss | 56 +++++++++++++-------- templates/video.html | 4 +- 5 files changed, 84 insertions(+), 44 deletions(-) create mode 100644 static/images/closed-arrow.png create mode 100644 static/images/open-arrow.png diff --git a/static/css/application.css b/static/css/application.css index 07365a9ae7..ec8daaf4e9 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -3129,10 +3129,13 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr -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; + cursor: pointer; float: left; - line-height: 0; - padding-right: 5.663px; + line-height: 46px; margin-right: 0; + padding-left: 15px; + background: url("/static/images/closed-arrow.png") 10px center no-repeat; + position: relative; -webkit-transition-property: all; -moz-transition-property: all; -ms-transition-property: all; @@ -3153,18 +3156,14 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr -ms-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; - cursor: pointer; - -webkit-font-smoothing: antialiased; } + -webkit-font-smoothing: antialiased; + width: 110px; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds.open { + background: url("/static/images/open-arrow.png") 10px center no-repeat; } 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"] { - float: left; - padding: 0 5.663px 0 11.326px; - font-weight: normal; - text-transform: uppercase; - font-size: 12px; - letter-spacing: 1px; color: #999; - line-height: 46px; } -section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds p.active { + font-size: 12px; + font-weight: normal; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; @@ -3172,24 +3171,47 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr zoom: 1; *display: inline; *vertical-align: auto; - padding: 0 11.326px 0 0; - margin-bottom: 0; + letter-spacing: 1px; + padding: 0 5.663px 0 11.326px; + text-transform: uppercase; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds p.active { font-weight: bold; - display: none; } -section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; - *vertical-align: auto; } + *vertical-align: auto; + margin-bottom: 0; + padding: 0 11.326px 0 0; } +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; + 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 { - float: left; + 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 5.663px; - line-height: 46px; } + 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 { @@ -3199,9 +3221,11 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr -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 { - background-color: #444; } + 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; } + opacity: 1; + background-color: #444; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.add-fullscreen { background: url(/static/images/fullscreen.png) center no-repeat; border-right: 1px solid #000; diff --git a/static/images/closed-arrow.png b/static/images/closed-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..4cfb9b9861205170296fc2c19baeeac4ef1d4fb9 GIT binary patch literal 112 zcmeAS@N?(olHy`uVBq!ia0vp^Y(UJ-0U~39{!9Z>=AJH&Ar-eu&s%aa81OJV{*P&u zUzZTF;wFm=53}8|Z>gWnH9v_h>=0nl_~*c~C~VQgMWwFnNpjzI+%ufeyzeN`2nJ7A KKbLh*2~7Z8h$Acj literal 0 HcmV?d00001 diff --git a/static/images/open-arrow.png b/static/images/open-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..37bfa53eac297fe3049a45350e177b49b46cb7ac GIT binary patch literal 105 zcmeAS@N?(olHy`uVBq!ia0vp^AT}!p8<4C?sm%aV2A(dCAr-e;PZ{ztFt9K?*qeWN z@5Qd^DEtM1wGwSQ~k>}m#GpLHoS)-P=U>SgeB^>bP0l+XkK DIw>DY literal 0 HcmV?d00001 diff --git a/templates/sass/courseware/_video.scss b/templates/sass/courseware/_video.scss index 1aed842d6b..069c356920 100644 --- a/templates/sass/courseware/_video.scss +++ b/templates/sass/courseware/_video.scss @@ -194,43 +194,57 @@ section.course-content { 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: 0; - padding-right: lh(.25); - margin-right: 0; - @include transition(); cursor: pointer; + float: left; + line-height: 46px; //height of play pause buttons + margin-right: 0; + padding-left: 15px; + background: url('/static/images/closed-arrow.png') 10px center no-repeat; + position: relative; + @include transition(); -webkit-font-smoothing: antialiased; + width: 110px; + + &.open { + background: url('/static/images/open-arrow.png') 10px center no-repeat; + } h3 { - float: left; - padding: 0 lh(.25) 0 lh(.5); - font-weight: normal; - text-transform: uppercase; - font-size: 12px; - letter-spacing: 1px; color: #999; - line-height: 46px; //height of play pause buttons + font-size: 12px; + font-weight: normal; + @include inline-block(); + letter-spacing: 1px; + padding: 0 lh(.25) 0 lh(.5); + text-transform: uppercase; } p.active { - @include inline-block(); - padding: 0 lh(.5) 0 0; - margin-bottom: 0; font-weight: bold; - display: none; + @include inline-block(); + margin-bottom: 0; + padding: 0 lh(.5) 0 0; } // 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(); + left: -1px; + position: absolute; + top: 48px; + width: 100%; + z-index: 10; li { - float: left; + border-bottom: 1px solid #000; + @include box-shadow( 0 1px 0 #555); color: #fff; cursor: pointer; - padding: 0 lh(.25); - line-height: 46px; //height of play pause buttons + padding: 0 lh(.5); &.active { font-weight: bold; @@ -243,13 +257,15 @@ section.course-content { } &:hover { - background-color: #444; + color: #aaa; + background-color: #666; } } } &:hover { opacity: 1; + background-color: #444; } } diff --git a/templates/video.html b/templates/video.html index 344a7193af..20c110aed7 100644 --- a/templates/video.html +++ b/templates/video.html @@ -115,9 +115,9 @@ at: 'bottom center', // at the bottom right $("ol#video_speeds").hide(); $("div.speeds").click(function() { + $(this).toggleClass("open"); $("ol#video_speeds").slideToggle(150); }); - - }); + });