Skip to content

E
edx-platform
Commit 1bb019d6 by Kyle Fiedler
Options

Added some fixeds to the dropdown and made it on hover

parent 9926c23f
Showing with 104 additions and 97 deletions
static/css/application.css
...@@ -3124,17 +3124,20 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -3124,17 +3124,20 @@ 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 { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls {
float: right; } float: right; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds {
float: left; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a {
background: url("/static/images/closed-arrow.png") 10px center no-repeat;
border-left: 1px solid #000; border-left: 1px solid #000;
border-right: 1px solid #000; border-right: 1px solid #000;
display: block;
-webkit-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555; -webkit-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
-moz-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; box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
zoom: 1;
cursor: pointer; cursor: pointer;
float: left;
line-height: 46px; line-height: 46px;
margin-right: 0; margin-right: 0;
padding-left: 15px; padding-left: 15px;
background: url("/static/images/closed-arrow.png") 10px center no-repeat;
position: relative; position: relative;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
...@@ -3157,35 +3160,29 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -3157,35 +3160,29 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
width: 110px; } width: 110px;
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds.open { color: #fff; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a:before, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a:after {
content: "";
display: table; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a:after {
clear: both; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a.open {
background: url("/static/images/open-arrow.png") 10px center no-repeat; } 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"] { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a h3, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a 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 a input[type="button"] {
color: #999; color: #999;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
display: -moz-inline-box; float: left;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
letter-spacing: 1px; letter-spacing: 1px;
padding: 0 5.663px 0 11.326px; padding: 0 5.663px 0 11.326px;
text-transform: uppercase; } text-transform: uppercase; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds p.active { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a p.active {
font-weight: bold; font-weight: bold;
display: -moz-inline-box; float: left;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-bottom: 0; margin-bottom: 0;
padding: 0 11.326px 0 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 { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a ol#video_speeds {
background-color: #444; background-color: #444;
border: 1px solid #000; border: 1px solid #000;
border-top: 0; border-top: 0;
...@@ -3201,10 +3198,10 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -3201,10 +3198,10 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
*vertical-align: auto; *vertical-align: auto;
left: -1px; left: -1px;
position: absolute; position: absolute;
top: 48px; top: 46px;
width: 100%; width: 100%;
z-index: 10; } z-index: 10; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a ol#video_speeds li {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
-webkit-box-shadow: 0 1px 0 #555555; -webkit-box-shadow: 0 1px 0 #555555;
-moz-box-shadow: 0 1px 0 #555555; -moz-box-shadow: 0 1px 0 #555555;
...@@ -3212,18 +3209,18 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -3212,18 +3209,18 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
padding: 0 11.326px; } 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 { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a ol#video_speeds li.active {
font-weight: bold; } 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 { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a ol#video_speeds li:last-child {
border-bottom: 0; border-bottom: 0;
margin-top: 0; margin-top: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
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 { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a ol#video_speeds li:hover {
color: #aaa; color: #aaa;
background-color: #666; } background-color: #666; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds:hover { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a:hover {
opacity: 1; opacity: 1;
background-color: #444; } background-color: #444; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.add-fullscreen { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.add-fullscreen {
......
templates/sass/courseware/_video.scss
...@@ -191,81 +191,87 @@ section.course-content { ...@@ -191,81 +191,87 @@ section.course-content {
@extend .dullify; @extend .dullify;
div.speeds { div.speeds {
border-left: 1px solid #000;
border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
cursor: pointer;
float: left; 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 { a {
color: #999; background: url('/static/images/closed-arrow.png') 10px center no-repeat;
font-size: 12px; border-left: 1px solid #000;
font-weight: normal; border-right: 1px solid #000;
@include inline-block(); display: block;
letter-spacing: 1px; @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
padding: 0 lh(.25) 0 lh(.5); @include clearfix();
text-transform: uppercase; cursor: pointer;
} line-height: 46px; //height of play pause buttons
margin-right: 0;
padding-left: 15px;
position: relative;
@include transition();
-webkit-font-smoothing: antialiased;
width: 110px;
color: #fff;
p.active { &.open {
font-weight: bold; background: url('/static/images/open-arrow.png') 10px center no-repeat;
@include inline-block(); }
margin-bottom: 0;
padding: 0 lh(.5) 0 0;
}
// fix for now h3 {
ol#video_speeds { color: #999;
background-color: #444; font-size: 12px;
border: 1px solid #000; font-weight: normal;
border-top: 0; float: left;
@include box-shadow(inset 1px 0 0 #555); letter-spacing: 1px;
@include inline-block(); padding: 0 lh(.25) 0 lh(.5);
left: -1px; text-transform: uppercase;
position: absolute; }
top: 48px;
width: 100%;
z-index: 10;
li {
border-bottom: 1px solid #000;
@include box-shadow( 0 1px 0 #555);
color: #fff;
cursor: pointer;
padding: 0 lh(.5);
&.active {
font-weight: bold;
}
&:last-child { p.active {
border-bottom: 0; font-weight: bold;
margin-top: 0; float: left;
@include box-shadow(none); margin-bottom: 0;
} padding: 0 lh(.5) 0 0;
}
&:hover { // fix for now
color: #aaa; ol#video_speeds {
background-color: #666; 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: 46px;
width: 100%;
z-index: 10;
li {
border-bottom: 1px solid #000;
@include box-shadow( 0 1px 0 #555);
color: #fff;
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;
}
} }
} }
}
&:hover { &:hover {
opacity: 1; opacity: 1;
background-color: #444; background-color: #444;
}
} }
} }
......
templates/video.html
...@@ -30,9 +30,11 @@ ...@@ -30,9 +30,11 @@
<div class="secondary-controls"> <div class="secondary-controls">
<div class="speeds"> <div class="speeds">
<h3>Speed</h3> <a href="#">
<p class="active"></p> <h3>Speed</h3>
<ol id="video_speeds"></ol> <p class="active"></p>
<ol id="video_speeds"></ol>
</a>
</div> </div>
<a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a> <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
...@@ -114,10 +116,12 @@ at: 'bottom center', // at the bottom right ...@@ -114,10 +116,12 @@ at: 'bottom center', // at the bottom right
$("ol#video_speeds").hide(); $("ol#video_speeds").hide();
$("div.speeds").click(function() { $("div.speeds a").hover(function() {
$(this).toggleClass("open"); $(this).toggleClass("open");
$("ol#video_speeds").slideToggle(150); $("ol#video_speeds").slideToggle(150);
return false;
}); });
}); });
</script> </script>
</%block> </%block>
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