Skip to content

E
edx-platform
Commit 709faa47 by Galen Frechette
Options

makes the sequence nav more semantic and replaces js hover with css

parent 1b8ea444
Showing with 111 additions and 111 deletions
static/css/application.css
...@@ -3617,6 +3617,7 @@ nav.sequence-nav ol li a { ...@@ -3617,6 +3617,7 @@ nav.sequence-nav ol li a {
display: block; display: block;
height: 17px; height: 17px;
padding: 15px 0 14px; padding: 15px 0 14px;
position: relative;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
-ms-transition-property: all; -ms-transition-property: all;
...@@ -3665,25 +3666,27 @@ nav.sequence-nav ol li a.seq_vertical_visited, nav.sequence-nav ol li a.seq_prob ...@@ -3665,25 +3666,27 @@ nav.sequence-nav ol li a.seq_vertical_visited, nav.sequence-nav ol li a.seq_prob
nav.sequence-nav ol li a.seq_vertical_active, nav.sequence-nav ol li a.seq_problem_active { nav.sequence-nav ol li a.seq_vertical_active, nav.sequence-nav ol li a.seq_problem_active {
background-image: url("/static/images/sequence-nav/list-icon-current.png"); background-image: url("/static/images/sequence-nav/list-icon-current.png");
background-position: center; } background-position: center; }
nav.sequence-nav ol li p { nav.sequence-nav ol li a p {
background: #333; background: #333;
color: #fff; color: #fff;
display: none;
line-height: 22.652px; line-height: 22.652px;
margin: 0px 0 0 -5px; left: 0px;
opacity: 0; opacity: 0;
padding: 6px; padding: 6px;
position: absolute; position: absolute;
top: 48px;
text-shadow: 0 -1px 0 black; text-shadow: 0 -1px 0 black;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
-ms-transition-property: all; -ms-transition-property: all;
-o-transition-property: all; -o-transition-property: all;
transition-property: all; transition-property: all;
-webkit-transition-duration: 0.6s; -webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.6s; -moz-transition-duration: 0.1s;
-ms-transition-duration: 0.6s; -ms-transition-duration: 0.1s;
-o-transition-duration: 0.6s; -o-transition-duration: 0.1s;
transition-duration: 0.6s; transition-duration: 0.1s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
...@@ -3694,16 +3697,13 @@ nav.sequence-nav ol li p { ...@@ -3694,16 +3697,13 @@ nav.sequence-nav ol li p {
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
white-space: pre-wrap; white-space: pre;
z-index: 99; } z-index: 99; }
nav.sequence-nav ol li p.shown { nav.sequence-nav ol li a p:empty {
margin-top: 4px;
opacity: 1; }
nav.sequence-nav ol li p:empty {
background: none; } background: none; }
nav.sequence-nav ol li p:empty::after { nav.sequence-nav ol li a p:empty::after {
display: none; } display: none; }
nav.sequence-nav ol li p::after { nav.sequence-nav ol li a p::after {
background: #333; background: #333;
content: " "; content: " ";
display: block; display: block;
...@@ -3717,6 +3717,10 @@ nav.sequence-nav ol li p::after { ...@@ -3717,6 +3717,10 @@ nav.sequence-nav ol li p::after {
-o-transform: rotate(45deg); -o-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
width: 10px; } width: 10px; }
nav.sequence-nav ol li a:hover p {
display: block;
margin-top: 4px;
opacity: 1; }
nav.sequence-nav ul { nav.sequence-nav ul {
margin-right: 1px; margin-right: 1px;
list-style: none !important; list-style: none !important;
......
templates/courseware.html
...@@ -12,10 +12,6 @@ ...@@ -12,10 +12,6 @@
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
${init} ${init}
$(".sequence-nav li a").hover(function(){
$(this).siblings().toggleClass("shown");
});
}); });
</script> </script>
</%block> </%block>
......
templates/sass/courseware/_sequence-nav.scss
...@@ -63,109 +63,109 @@ nav.sequence-nav { ...@@ -63,109 +63,109 @@ nav.sequence-nav {
display: block; display: block;
height: 17px; height: 17px;
padding: 15px 0 14px; padding: 15px 0 14px;
position: relative;
@include transition(all, .4s, $ease-in-out-quad); @include transition(all, .4s, $ease-in-out-quad);
width: 100%; width: 100%;
// @media screen and (max-width: 800px) { //video
// padding: 12px 8px; &.seq_video_inactive {
// } @extend .inactive;
background-image: url('/static/images/sequence-nav/video-icon-normal.png');
//video background-position: center;
&.seq_video_inactive { }
@extend .inactive;
background-image: url('/static/images/sequence-nav/video-icon-normal.png');
background-position: center;
}
&.seq_video_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/video-icon-visited.png');
background-position: center;
}
&.seq_video_active { &.seq_video_visited {
@extend .active; @extend .visited;
background-image: url('/static/images/sequence-nav/video-icon-current.png'); background-image: url('/static/images/sequence-nav/video-icon-visited.png');
background-position: center; background-position: center;
} }
//other &.seq_video_active {
&.seq_other_inactive { @extend .active;
@extend .inactive; background-image: url('/static/images/sequence-nav/video-icon-current.png');
background-image: url('/static/images/sequence-nav/document-icon-normal.png'); background-position: center;
background-position: center; }
}
&.seq_other_visited { //other
@extend .visited; &.seq_other_inactive {
background-image: url('/static/images/sequence-nav/document-icon-visited.png'); @extend .inactive;
background-position: center; background-image: url('/static/images/sequence-nav/document-icon-normal.png');
} background-position: center;
}
&.seq_other_active { &.seq_other_visited {
@extend .active; @extend .visited;
background-image: url('/static/images/sequence-nav/document-icon-current.png'); background-image: url('/static/images/sequence-nav/document-icon-visited.png');
background-position: center; background-position: center;
} }
//vertical & problems &.seq_other_active {
&.seq_vertical_inactive, &.seq_problem_inactive { @extend .active;
@extend .inactive; background-image: url('/static/images/sequence-nav/document-icon-current.png');
background-image: url('/static/images/sequence-nav/list-icon-normal.png'); background-position: center;
background-position: center; }
}
&.seq_vertical_visited, &.seq_problem_visited { //vertical & problems
@extend .visited; &.seq_vertical_inactive, &.seq_problem_inactive {
background-image: url('/static/images/sequence-nav/list-icon-visited.png'); @extend .inactive;
background-position: center; background-image: url('/static/images/sequence-nav/list-icon-normal.png');
} background-position: center;
}
&.seq_vertical_active, &.seq_problem_active { &.seq_vertical_visited, &.seq_problem_visited {
@extend .active; @extend .visited;
background-image: url('/static/images/sequence-nav/list-icon-current.png'); background-image: url('/static/images/sequence-nav/list-icon-visited.png');
background-position: center; background-position: center;
}
} }
p { &.seq_vertical_active, &.seq_problem_active {
// display: none; @extend .active;
// visibility: hidden; background-image: url('/static/images/sequence-nav/list-icon-current.png');
background: #333; background-position: center;
color: #fff;
line-height: lh();
margin: 0px 0 0 -5px;
opacity: 0;
padding: 6px;
position: absolute;
text-shadow: 0 -1px 0 #000;
@include transition(all, .6s, $ease-in-out-quart);
white-space: pre-wrap;
z-index: 99;
&.shown {
margin-top: 4px;
opacity: 1;
} }
&:empty { p {
background: none; background: #333;
color: #fff;
display: none;
line-height: lh();
left: 0px;
opacity: 0;
padding: 6px;
position: absolute;
top: 48px;
text-shadow: 0 -1px 0 #000;
@include transition(all, .1s, $ease-in-out-quart);
white-space: pre;
z-index: 99;
&:empty {
background: none;
&::after {
display: none;
}
}
&::after { &::after {
display: none; background: #333;
content: " ";
display: block;
height: 10px;
left: 18px;
position: absolute;
top: -5px;
@include transform(rotate(45deg));
width: 10px;
} }
} }
&::after { &:hover {
background: #333; p {
content: " "; display: block;
display: block; margin-top: 4px;
height: 10px; opacity: 1;
left: 18px; }
position: absolute;
top: -5px;
@include transform(rotate(45deg));
width: 10px;
} }
} }
} }
......
templates/seq_module.js
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
var ${ id }contents=["", var ${ id }contents=["",
%for t in items: %for t in items:
${t['content']} , ${t['content']} ,
%endfor %endfor
"" ""
]; ];
...@@ -16,7 +16,7 @@ var ${ id }types=["", ...@@ -16,7 +16,7 @@ var ${ id }types=["",
var ${ id }init_functions=["", var ${ id }init_functions=["",
%for t in items: %for t in items:
function(){ ${t['init_js']} }, function(){ ${t['init_js']} },
%endfor %endfor
""]; ""];
...@@ -24,12 +24,12 @@ var ${ id }titles=${titles}; ...@@ -24,12 +24,12 @@ var ${ id }titles=${titles};
var ${ id }destroy_functions=["", var ${ id }destroy_functions=["",
%for t in items: %for t in items:
function(){ ${t['destroy_js']} }, function(){ ${t['destroy_js']} },
%endfor %endfor
""]; ""];
var ${ id }loc = -1; var ${ id }loc = -1;
function disablePrev() { function disablePrev() {
var i=${ id }loc-1; var i=${ id }loc-1;
log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'}); log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
if (i < 1 ) { if (i < 1 ) {
...@@ -39,7 +39,7 @@ function disablePrev() { ...@@ -39,7 +39,7 @@ function disablePrev() {
}; };
} }
function disableNext() { function disableNext() {
var i=${ id }loc+1; var i=${ id }loc+1;
log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'}); log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
...@@ -77,11 +77,11 @@ function ${ id }goto(i) { ...@@ -77,11 +77,11 @@ function ${ id }goto(i) {
function ${ id }setup_click(i) { function ${ id }setup_click(i) {
$('#tt_'+i).click(function(eo) { ${ id }goto(i);}); $('#tt_'+i).click(function(eo) { ${ id }goto(i);});
$('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive"); $('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive");
$('#tt_'+i).parent().append("<p>" + ${ id }titles[i-1] + "</p>"); $('#tt_'+i).append("<p>" + ${ id }titles[i-1] + "</p>");
} }
function ${ id }next() { function ${ id }next() {
var i=${ id }loc+1; var i=${ id }loc+1;
log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'}); log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
if(i > ${ len(items) } ) { if(i > ${ len(items) } ) {
...@@ -92,7 +92,7 @@ function ${ id }next() { ...@@ -92,7 +92,7 @@ function ${ id }next() {
} }
function ${ id }prev() { function ${ id }prev() {
var i=${ id }loc-1; var i=${ id }loc-1;
log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'}); log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
if (i < 1 ) { if (i < 1 ) {
...@@ -105,7 +105,7 @@ function ${ id }prev() { ...@@ -105,7 +105,7 @@ function ${ id }prev() {
$(function() { $(function() {
var i; var i;
for(i=1; i<${ len(items)+1 }; i++) { for(i=1; i<${ len(items)+1 }; i++) {
${ id }setup_click(i); ${ id }setup_click(i);
} }
......
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