diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss
index 31f519b874..c484b03963 100644
--- a/common/lib/xmodule/xmodule/css/sequence/display.scss
+++ b/common/lib/xmodule/xmodule/css/sequence/display.scss
@@ -1,8 +1,14 @@
-$sequence--border-color: #C8C8C8;
-$link-color: rgb(26, 161, 222) !default;
+$seq-nav-border-color: $border-color !default;
+$seq-nav-hover-color: rgb(245, 245, 245) !default;
+$seq-nav-link-color: $link-color !default;
+$seq-nav-icon-color: rgb(10, 10, 10) !default;
+$seq-nav-icon-color-muted: rgb(90, 90, 90) !default;
+$seq-nav-tooltip-color: rgb(51, 51, 51) !default;
+$seq-nav-height: 44px;
+
// repeated extends - needed since LMS styling was referenced
.block-link {
- border-left: 1px solid lighten($sequence--border-color, 10%);
+ @include border-left(1px solid $seq-nav-border-color);
display: block;
&:hover, &:focus {
@@ -12,7 +18,7 @@ $link-color: rgb(26, 161, 222) !default;
.topbar {
@include clearfix();
- border-bottom: 1px solid $sequence--border-color;
+ border-bottom: 1px solid $seq-nav-border-color;
@media print {
display: none;
@@ -20,7 +26,7 @@ $link-color: rgb(26, 161, 222) !default;
a {
&.block-link {
- border-left: 1px solid lighten($sequence--border-color, 10%);
+ @include border-left(1px solid $seq-nav-border-color);
display: block;
&:hover, &:focus {
@@ -31,7 +37,7 @@ $link-color: rgb(26, 161, 222) !default;
}
%ui-clear-button {
- background-color: rgba(0,0,0,0);
+ background-color: transparent;
background-image: none;
background-position: center 14px;
background-repeat: no-repeat;
@@ -50,134 +56,73 @@ $link-color: rgb(26, 161, 222) !default;
// ====================
.sequence-nav {
- // TODO (cpennington): This doesn't work anymore. XModules aren't able to
- // import from external sources.
@extend .topbar;
- margin: -4px 0 $baseline;
+ margin: 0 0 $baseline 0;
position: relative;
border-bottom: none;
z-index: 0;
+ height: $seq-nav-height;
+ display: flex;
+
+ .sequence-nav-button {
+ max-width: 200px;
+ }
@media print {
display: none;
}
- .left-shadow {
- @extend %ui-depth4;
- @include linear-gradient(left, $shadow, $transparent);
- position: absolute;
- top: 0;
- left: 0;
- width: 20px;
- height: 46px;
- background-color: transparent;
- pointer-events: none;
- }
-
- .right-shadow {
- @extend %ui-depth4;
- @include linear-gradient(right, $shadow, $transparent);
- position: absolute;
- top: 0;
- right: 0;
- width: 20px;
- height: 46px;
- background-color: transparent;
- pointer-events: none;
- }
-
.sequence-list-wrapper {
@extend %ui-depth2;
- @include linear-gradient(top, #ddd, #eee);
position: relative;
- border: 1px solid $gray-l3;
- height: 44px;
- margin: 0 ($baseline*2);
- box-shadow: 0 1px 3px $shadow-l1 inset;
+ height: 100%;
+ flex-grow: 1;
}
ol {
- position: absolute;
- top: 0;
- left: 0;
- @include box-sizing(border-box);
- display: table;
- height: 100%;
- margin: 0;
- padding: 0 ($baseline/2);
- width: 100%;
-
- button {
- @extend .block-link;
- }
+ display: flex;
li {
- display: table-cell;
+ box-sizing: border-box;
min-width: 20px;
+ flex-grow: 1;
+ border-color: $seq-nav-border-color;
+ border-width: 1px;
+ border-top-style: solid;
+
+ &:not(:last-child) {
+ @include border-right-style(solid);
+ }
button {
@extend %ui-fake-link;
@extend %ui-clear-button;
- @include transition(none);
- width: 100%;
- height: 42px;
- margin: 0;
- display: block;
- padding: 0;
+ width: 100%;
+ height: ($seq-nav-height - 1);
position: relative;
+ margin: 0;
+ padding: 0;
+ display: block;
text-align: center;
+ border-color: $seq-nav-border-color;
+ border-width: 1px;
+ border-bottom-style: solid;
+ box-sizing: border-box;
.icon {
- line-height: 42px; // This matches the height of the it's within (the parent) to get vertical centering.
- font-size: 90%; // The icons at 100% are just a tad too big.
- color: rgb(90, 90, 90);
- -webkit-font-smoothing: antialiased; // Clear up the lines on the icons
+ display: block;
+ line-height: 100%; // This matches the height of the its within (the parent) to get vertical centering.
+ font-size: 110%;
+ color: $seq-nav-icon-color-muted;
}
- i.fa-bookmark {
- color: $link-color;
- }
-
- &.inactive {
-
- .icon {
- color: rgb(90, 90, 90);
- }
- }
-
- &.active {
- @extend %ui-depth1;
- background-color: $white;
-
- .icon {
- color: rgb(10, 10, 10);
- }
-
- &:hover, &:focus {
- background-color: $white;
- background-repeat: no-repeat;
- background-position: center 14px;
-
- .icon {
- color: rgb(10, 10, 10);
- }
-
- i.fa-bookmark {
- color: $link-color;
- }
- }
- }
-
- &:hover, &:focus {
- background-color: $white;
- background-repeat: no-repeat;
- background-position: center 14px;
+ .fa-bookmark {
+ color: $seq-nav-link-color;
}
//video
&.seq_video {
-
.icon:before {
content: "\f008"; // .fa-film
}
@@ -185,45 +130,38 @@ $link-color: rgb(26, 161, 222) !default;
//other
&.seq_other {
-
.icon:before {
- content: "\f016"; // .fa-file-o
+ content: "\f02d"; // .fa-book
}
}
- //vertical & problems
- &.seq_vertical, &.seq_problem {
-
+ //vertical
+ &.seq_vertical {
.icon:before {
content: "\f00b"; // .fa-tasks
}
+ }
- &.progress-none {
-
- }
-
- &.progress-some, &.progress-in_progress {
-
- }
-
- &.progress-done {
-
+ //problems
+ &.seq_problem {
+ .icon:before {
+ content: "\f044"; // .fa-pencil-square-o
}
}
.sequence-tooltip {
+ @include text-align(left);
@extend %ui-depth2;
margin-top: ($baseline/5);
- background: #333;
+ background: $seq-nav-tooltip-color;
color: $white;
font-family: $sans-serif;
line-height: lh();
- right: 0;
+ right: 0; // Should not be RTLed, tooltips do not move in RTL
padding: 6px;
position: absolute;
top: 48px;
text-shadow: 0 -1px 0 $black;
- @include text-align(left);
white-space: pre;
pointer-events: none;
@@ -236,14 +174,15 @@ $link-color: rgb(26, 161, 222) !default;
}
&::after {
- background: #333;
+ @include transform(rotate(45deg));
+ @include right(18px);
+ background: $seq-nav-tooltip-color;
content: " ";
display: block;
height: 10px;
- right: 18px;
+ right: 18px; // Not RTLed, positions tooltips relative to seq nav item
position: absolute;
top: -5px;
- @include transform(rotate(45deg));
width: 10px;
}
}
@@ -258,27 +197,40 @@ $link-color: rgb(26, 161, 222) !default;
.sequence-nav-button {
@extend %ui-depth3;
- @include transition(all .2s $ease-in-out-quad 0s);
- position: absolute;
display: block;
top: 0;
- width: ($baseline*2);
- height: 46px;
- padding: 0;
+ height: 100%;
+ text-shadow: none; // overrides default button text-shadow
+ background: none; // overrides default button gradient
+ background-color: white;
+ border-color: $seq-nav-border-color;
+ box-shadow: none;
+ min-width: 120px;
+ font-size: inherit;
+ font-weight: normal;
+ padding: 0 $baseline;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+
+ span:not(:last-child) {
+ @include padding-right($baseline / 2);
+ }
&.button-previous {
- @include border-radius(35px, 0, 0, 35px);
@include left(0);
+ @include border-top-left-radius(3px);
+ @include border-top-right-radius(0);
+ @include border-bottom-right-radius(0);
+ @include border-bottom-left-radius(3px);
}
&.button-next {
- @include border-radius(0, 35px, 35px, 0);
@include right(0);
- }
-
- &:hover,
- &:active {
-
+ @include border-top-left-radius(0);
+ @include border-top-right-radius(3px);
+ @include border-bottom-right-radius(3px);
+ @include border-bottom-left-radius(0);
}
&.disabled {
@@ -292,10 +244,18 @@ $link-color: rgb(26, 161, 222) !default;
nav.sequence-bottom {
position: relative;
- width: 79px;
- height: 1px;
+ height: 45px;
margin: lh(2) auto;
- text-align: center;
+ display: flex;
+ justify-content: center;
+
+ .sequence-nav-button {
+ position: relative;
+
+ &:last-of-type {
+ @include border-left(none);
+ }
+ }
@media print {
display: none;
@@ -303,10 +263,24 @@ nav.sequence-bottom {
}
#seq_content {
-
&:focus,
&:active {
outline: none;
}
}
+// hover and active states
+.sequence-nav-button,
+.sequence-nav button {
+ &:hover,
+ &:active,
+ &.active {
+ border-bottom: 3px solid $seq-nav-link-color;
+ // keeps icon/text centered on hover, necessary due to border-box setting
+ padding-top: 2px;
+
+ .icon {
+ color: $seq-nav-icon-color;
+ }
+ }
+}
diff --git a/common/lib/xmodule/xmodule/js/src/sequence/display.coffee b/common/lib/xmodule/xmodule/js/src/sequence/display.coffee
index e950815d93..00fc539b8e 100644
--- a/common/lib/xmodule/xmodule/js/src/sequence/display.coffee
+++ b/common/lib/xmodule/xmodule/js/src/sequence/display.coffee
@@ -3,6 +3,7 @@ class @Sequence
@updatedProblems = {}
@requestToken = $(element).data('request-token')
@el = $(element).find('.sequence')
+ @path = $('.path')
@contents = @$('.seq_contents')
@content_container = @$('#seq_content')
@sr_container = @$('.sr-is-focusable')
@@ -190,7 +191,7 @@ class @Sequence
sequence_links = @content_container.find('a.seqnav')
sequence_links.click @goto
- @el.find('.path').text(@el.find('.nav-item.active').data('path'))
+ @path.text(@el.find('.nav-item.active').data('path'))
@sr_container.focus()
diff --git a/common/lib/xmodule/xmodule/js/src/sequence/display/jquery.sequence.js b/common/lib/xmodule/xmodule/js/src/sequence/display/jquery.sequence.js
index 643f5ff88c..91ca3fbe53 100644
--- a/common/lib/xmodule/xmodule/js/src/sequence/display/jquery.sequence.js
+++ b/common/lib/xmodule/xmodule/js/src/sequence/display/jquery.sequence.js
@@ -4,9 +4,7 @@ var SequenceNav = function($element) {
var $wrapper = $element.find('.sequence-list-wrapper');
var $list = $element.find('#sequence-list');
var $arrows = $element.find('.sequence-nav-button');
- var maxScroll = $list.width() - $wrapper.width() + 20;
- var $leftShadow = $('');
- var $rightShadow = $('');
+ var maxScroll = $list.width() - $wrapper.width();
var $body = $('body');
var listOrigin;
var mouseOrigin;
@@ -25,8 +23,6 @@ var SequenceNav = function($element) {
var targetLeft = clamp(listOrigin + offset, -maxScroll, 0);
updateHorizontalPosition(targetLeft);
-
- setShadows(targetLeft);
};
var stopDrag = function(e) {
@@ -35,17 +31,6 @@ var SequenceNav = function($element) {
$body.unbind('mouseup', stopDrag);
};
- var setShadows = function(left) {
- var left = left || $list.position().left;
- var padding = 30;
-
- var leftPercent = clamp(-left / padding, 0, 1);
- $leftShadow.css('opacity', leftPercent);
-
- var rightPercent = clamp((maxScroll + left) / padding, 0, 1);
- $rightShadow.css('opacity', rightPercent);
- };
-
var clamp = function(val, min, max) {
if(val > max) return max;
if(val < min) return min;
@@ -53,10 +38,9 @@ var SequenceNav = function($element) {
};
var updateWidths = function(e) {
- maxScroll = $list.width() - $wrapper.width() + 20;
+ maxScroll = $list.width() - $wrapper.width();
var targetLeft = clamp($list.position().left, -maxScroll, 0);
updateHorizontalPosition(targetLeft);
- setShadows(targetLeft);
};
var updateHorizontalPosition = function(left) {
@@ -73,20 +57,14 @@ var SequenceNav = function($element) {
if($active.position().left + $active.width() > $wrapper.width() - $list.position().left) {
$list.animate({
'left': (-$active.position().left + $wrapper.width() - $active.width() - 10) + 'px'
- }, {
- step: setShadows
- });
+ }, {});
} else if($active.position().left < -$list.position().left) {
$list.animate({
'left': (-$active.position().left + 10) + 'px'
- }, {
- step: setShadows
- });
+ }, {});
}
};
- $wrapper.append($leftShadow).append($rightShadow);
- setShadows(0);
$wrapper.bind('mousedown', startDrag);
$arrows.bind('click', checkPosition);
$(window).bind('resize', updateWidths);
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index 71251222b7..72b99da85a 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -411,7 +411,7 @@ html.video-fullscreen {
}
}
- .sequence .path {
+ .path {
@extend %t-copy-sub1;
margin-top: -($baseline);
margin-bottom: $baseline;
diff --git a/lms/static/sass/views/_bookmarks.scss b/lms/static/sass/views/_bookmarks.scss
index ebac7af244..c2bffc38fd 100644
--- a/lms/static/sass/views/_bookmarks.scss
+++ b/lms/static/sass/views/_bookmarks.scss
@@ -135,8 +135,8 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// Rules for bookmark icon shown on each sequence nav item
.course-content {
- .bookmark-icon.bookmarked {
- @include left($baseline / 4);
+ .bookmark-icon.bookmarked {
+ @include right($baseline / 4);
top: -3px;
position: absolute;
}
diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html
index 426eb45bfb..18171b6b5e 100644
--- a/lms/templates/courseware/courseware.html
+++ b/lms/templates/courseware/courseware.html
@@ -153,6 +153,7 @@ ${HTML(fragment.foot_html())}
% endif
+
% if getattr(course, 'entrance_exam_enabled') and \
getattr(course, 'entrance_exam_minimum_score_pct') and \
diff --git a/lms/templates/seq_module.html b/lms/templates/seq_module.html
index 7182ba1a68..edaea4fe80 100644
--- a/lms/templates/seq_module.html
+++ b/lms/templates/seq_module.html
@@ -2,20 +2,20 @@
<%! from django.utils.translation import ugettext as _ %>