From 8b0b4f5ce20b7d7f992bc389cc75207ff0350fae Mon Sep 17 00:00:00 2001 From: Brian Jacobel Date: Tue, 27 Sep 2016 16:29:24 -0400 Subject: [PATCH] Redesign sequence nav, move breadcrumbs out of sequence container TNL-5555 --- .../xmodule/xmodule/css/sequence/display.scss | 250 ++++++++---------- .../xmodule/js/src/sequence/display.coffee | 3 +- .../src/sequence/display/jquery.sequence.js | 30 +-- .../sass/course/courseware/_courseware.scss | 2 +- lms/static/sass/views/_bookmarks.scss | 4 +- lms/templates/courseware/courseware.html | 1 + lms/templates/seq_module.html | 31 ++- 7 files changed, 139 insertions(+), 182 deletions(-) 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 _ %>
-
- % if banner_text: -
- -
-

- ${banner_text} -

-
+ % if banner_text: +
+ +
+

+ ${banner_text} +

- % endif +
+ % endif
@@ -58,10 +59,12 @@