Skip to content

E
edx-platform
Commit bc66285b by Brian Jacobel Committed by GitHub
Options

Merge pull request #13588 from edx/bjacobel/5555 

UX improvements to sequence nav
parents 23388588 8b0b4f5c
Showing with 138 additions and 181 deletions
common/lib/xmodule/xmodule/css/sequence/display.scss
$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;
@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;
.sequence-nav-button {
max-width: 200px;
}
.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;
@media print {
display: 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;
height: ($seq-nav-height - 1);
position: relative;
margin: 0;
display: block;
padding: 0;
position: relative;
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 <a> 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
}
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;
}
}
display: block;
line-height: 100%; // This matches the height of the <a> its within (the parent) to get vertical centering.
font-size: 110%;
color: $seq-nav-icon-color-muted;
}
&: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;
}
}
}
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()
......
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 = $('<div class="left-shadow"></div>');
var $rightShadow = $('<div class="right-shadow"></div>');
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);
......
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;
......
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;
}
......
lms/templates/courseware/courseware.html
......@@ -150,6 +150,7 @@ ${HTML(fragment.foot_html())}
</div>
% endif
<section class="course-content" id="course-content">
<div class="path"></div>
<main id="main" aria-label="Content" tabindex="-1">
% if getattr(course, 'entrance_exam_enabled') and \
getattr(course, 'entrance_exam_minimum_score_pct') and \
......
lms/templates/seq_module.html
......@@ -2,20 +2,20 @@
<%! from django.utils.translation import ugettext as _ %>
<div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" data-next-url="${next_url}" data-prev-url="${prev_url}">
<div class="path"></div>
% if banner_text:
<div class="pattern-library-shim alert alert-information subsection-header" tabindex="-1">
<span class="pattern-library-shim icon alert-icon fa fa-bullhorn" aria-hidden="true"></span>
<div class="pattern-library-shim alert-message">
<p class="pattern-library-shim alert-copy">
${banner_text}
</p>
</div>
% if banner_text:
<div class="pattern-library-shim alert alert-information subsection-header" tabindex="-1">
<span class="pattern-library-shim icon alert-icon fa fa-bullhorn" aria-hidden="true"></span>
<div class="pattern-library-shim alert-message">
<p class="pattern-library-shim alert-copy">
${banner_text}
</p>
</div>
% endif
</div>
% endif
<div class="sequence-nav">
<button class="sequence-nav-button button-previous">
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span><span class="sr">${_('Previous')}</span>
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
<span>${_('Previous')}</span>
</button>
<nav class="sequence-list-wrapper" aria-label="${_('Unit')}">
<ol id="sequence-list">
......@@ -40,7 +40,8 @@
</ol>
</nav>
<button class="sequence-nav-button button-next">
<span class="icon fa fa-chevron-next" aria-hidden="true"></span><span class="sr">${_('Next')}</span>
<span>${_('Next')}</span>
<span class="icon fa fa-chevron-next" aria-hidden="true"></span>
</button>
</div>
......@@ -58,10 +59,12 @@
<nav class="sequence-bottom" aria-label="${_('Section')}">
<button class="sequence-nav-button button-previous">
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span><span class="sr">${_('Previous')}</span>
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
<span>${_('Previous')}</span>
</button>
<button class="sequence-nav-button button-next">
<span class="icon fa fa-chevron-next" aria-hidden="true"></span><span class="sr">${_('Next')}</span>
<span>${_('Next')}</span>
<span class="icon fa fa-chevron-next" aria-hidden="true"></span>
</button>
</nav>
</div>
......
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