Skip to content

E
edx-platform
Commit ff366ad6 by kylefiedler
Options

Merge pull request #44 from MITx/gf-sequence-nav 

makes the sequence nav more semantic and replaces js hover with css
parents 1b8ea444 d0a73267
Showing with 118 additions and 124 deletions
static/css/application.css
......@@ -3567,19 +3567,15 @@ div.course-wrapper.closed section.course-content div.video-subtitles ol.subtitle
max-height: 577px; }
nav.sequence-nav {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #e4d080;
margin-bottom: 22.652px;
position: relative;
top: -1px; }
position: relative; }
nav.sequence-nav ol {
border-bottom: 1px solid #e4d080;
border-top: 1px solid #e4d080;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table;
height: 100%;
padding-right: 8.696%;
width: 100%; }
nav.sequence-nav ol li {
......@@ -3617,6 +3613,7 @@ nav.sequence-nav ol li a {
display: block;
height: 17px;
padding: 15px 0 14px;
position: relative;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
......@@ -3665,25 +3662,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 {
background-image: url("/static/images/sequence-nav/list-icon-current.png");
background-position: center; }
nav.sequence-nav ol li p {
nav.sequence-nav ol li a p {
background: #333;
color: #fff;
display: none;
line-height: 22.652px;
margin: 0px 0 0 -5px;
left: 0px;
opacity: 0;
padding: 6px;
position: absolute;
top: 48px;
text-shadow: 0 -1px 0 black;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-ms-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-ms-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-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);
......@@ -3694,16 +3693,13 @@ nav.sequence-nav ol li p {
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
white-space: pre-wrap;
white-space: pre;
z-index: 99; }
nav.sequence-nav ol li p.shown {
margin-top: 4px;
opacity: 1; }
nav.sequence-nav ol li p:empty {
nav.sequence-nav ol li a p:empty {
background: none; }
nav.sequence-nav ol li p:empty::after {
nav.sequence-nav ol li a p:empty::after {
display: none; }
nav.sequence-nav ol li p::after {
nav.sequence-nav ol li a p::after {
background: #333;
content: " ";
display: block;
......@@ -3717,9 +3713,13 @@ nav.sequence-nav ol li p::after {
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px; }
nav.sequence-nav ol li a:hover p {
display: block;
margin-top: 4px;
opacity: 1; }
nav.sequence-nav ul {
margin-right: 1px;
list-style: none !important;
height: 100%;
position: absolute;
right: 0;
top: 0;
......
templates/courseware.html
......@@ -12,10 +12,6 @@
<script type="text/javascript">
$(function() {
${init}
$(".sequence-nav li a").hover(function(){
$(this).siblings().toggleClass("shown");
});
});
</script>
</%block>
......
templates/sass/courseware/_sequence-nav.scss
nav.sequence-nav {
@extend .topbar;
@include box-sizing(border-box);
border-bottom: 1px solid darken($cream, 20%);
margin-bottom: $body-line-height;
position: relative;
top: -1px;
ol {
border-bottom: 1px solid darken($cream, 20%);
border-top: 1px solid darken($cream, 20%);
@include box-sizing(border-box);
display: table;
height: 100%;
padding-right: flex-grid(1, 9);
width: 100%;
......@@ -63,117 +61,117 @@ nav.sequence-nav {
display: block;
height: 17px;
padding: 15px 0 14px;
position: relative;
@include transition(all, .4s, $ease-in-out-quad);
width: 100%;
// @media screen and (max-width: 800px) {
// padding: 12px 8px;
// }
//video
&.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;
}
//video
&.seq_video_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/video-icon-normal.png');
background-position: center;
}
&.seq_video_active {
@extend .active;
background-image: url('/static/images/sequence-nav/video-icon-current.png');
background-position: center;
}
&.seq_video_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/video-icon-visited.png');
background-position: center;
}
//other
&.seq_other_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/document-icon-normal.png');
background-position: center;
}
&.seq_video_active {
@extend .active;
background-image: url('/static/images/sequence-nav/video-icon-current.png');
background-position: center;
}
&.seq_other_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/document-icon-visited.png');
background-position: center;
}
//other
&.seq_other_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/document-icon-normal.png');
background-position: center;
}
&.seq_other_active {
@extend .active;
background-image: url('/static/images/sequence-nav/document-icon-current.png');
background-position: center;
}
&.seq_other_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/document-icon-visited.png');
background-position: center;
}
//vertical & problems
&.seq_vertical_inactive, &.seq_problem_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/list-icon-normal.png');
background-position: center;
}
&.seq_other_active {
@extend .active;
background-image: url('/static/images/sequence-nav/document-icon-current.png');
background-position: center;
}
&.seq_vertical_visited, &.seq_problem_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/list-icon-visited.png');
background-position: center;
}
//vertical & problems
&.seq_vertical_inactive, &.seq_problem_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/list-icon-normal.png');
background-position: center;
}
&.seq_vertical_active, &.seq_problem_active {
@extend .active;
background-image: url('/static/images/sequence-nav/list-icon-current.png');
background-position: center;
}
&.seq_vertical_visited, &.seq_problem_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/list-icon-visited.png');
background-position: center;
}
p {
// display: none;
// visibility: hidden;
background: #333;
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;
&.seq_vertical_active, &.seq_problem_active {
@extend .active;
background-image: url('/static/images/sequence-nav/list-icon-current.png');
background-position: center;
}
&:empty {
background: none;
p {
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 {
display: none;
background: #333;
content: " ";
display: block;
height: 10px;
left: 18px;
position: absolute;
top: -5px;
@include transform(rotate(45deg));
width: 10px;
}
}
&::after {
background: #333;
content: " ";
display: block;
height: 10px;
left: 18px;
position: absolute;
top: -5px;
@include transform(rotate(45deg));
width: 10px;
&:hover {
p {
display: block;
margin-top: 4px;
opacity: 1;
}
}
}
}
}
ul {
margin-right: 1px;
list-style: none !important;
height: 100%;
position: absolute;
right: 0;
top: 0;
......
templates/seq_module.js
......@@ -2,7 +2,7 @@
var ${ id }contents=["",
%for t in items:
${t['content']} ,
${t['content']} ,
%endfor
""
];
......@@ -16,7 +16,7 @@ var ${ id }types=["",
var ${ id }init_functions=["",
%for t in items:
function(){ ${t['init_js']} },
function(){ ${t['init_js']} },
%endfor
""];
......@@ -24,12 +24,12 @@ var ${ id }titles=${titles};
var ${ id }destroy_functions=["",
%for t in items:
function(){ ${t['destroy_js']} },
function(){ ${t['destroy_js']} },
%endfor
""];
var ${ id }loc = -1;
function disablePrev() {
function disablePrev() {
var i=${ id }loc-1;
log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
if (i < 1 ) {
......@@ -39,7 +39,7 @@ function disablePrev() {
};
}
function disableNext() {
function disableNext() {
var i=${ id }loc+1;
log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
......@@ -77,11 +77,11 @@ function ${ id }goto(i) {
function ${ id }setup_click(i) {
$('#tt_'+i).click(function(eo) { ${ id }goto(i);});
$('#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;
log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
if(i > ${ len(items) } ) {
......@@ -92,7 +92,7 @@ function ${ id }next() {
}
function ${ id }prev() {
function ${ id }prev() {
var i=${ id }loc-1;
log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
if (i < 1 ) {
......@@ -105,7 +105,7 @@ function ${ id }prev() {
$(function() {
var i;
var i;
for(i=1; i<${ len(items)+1 }; 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