diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index d45e891433..87a4b01341 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -70,7 +70,7 @@ $sequence--border-color: #C8C8C8; position: relative; border: 1px solid $gray-l3; height: 44px; - margin: 0 ($baseline*1.5); + margin: 0 ($baseline*2); box-shadow: 0 1px 3px $shadow-l1 inset; } @@ -105,6 +105,40 @@ $sequence--border-color: #C8C8C8; display: block; padding: 0; position: relative; + text-align: center; + + .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 + } + + &.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); + } + } + } &:hover, &:focus { background-color: $white; @@ -112,72 +146,39 @@ $sequence--border-color: #C8C8C8; background-position: center 14px; } - &.active { - @extend %ui-depth1; - background-color: $white; - - &:hover, &:focus { - background-color: $white; - background-repeat: no-repeat; - background-position: center 14px; - } - } - //video &.seq_video { - &.inactive { - background-image: url('../images/sequence-nav/video-icon-normal.png'); - } - &.visited { - background-image: url('../images/sequence-nav/video-icon-visited.png'); - } - - &.active { - @extend .active; - background-image: url('../images/sequence-nav/video-icon-current.png'); + .icon:before { + content: "\f008"; // .fa-film } } //other &.seq_other { - &.inactive { - background-image: url('../images/sequence-nav/document-icon-normal.png'); - } - &.visited { - background-image: url('../images/sequence-nav/document-icon-visited.png'); - } - - &.active { - background-image: url('../images/sequence-nav/document-icon-current.png'); + .icon:before { + content: "\f016"; // .fa-file-o } } //vertical & problems &.seq_vertical, &.seq_problem { - &.inactive { - background-image: url('../images/sequence-nav/list-icon-normal.png'); - } - &.visited { - background-image: url('../images/sequence-nav/list-icon-visited.png'); - } - - &.active { - background-image: url('../images/sequence-nav/list-icon-current.png'); + .icon:before { + content: "\f00b"; // .fa-tasks } &.progress-none { - background-image: url('../images/sequence-nav/list-unstarted.png'); + } &.progress-some, &.progress-in_progress { - background-image: url('../images/sequence-nav/list-unfinished.png'); + } &.progress-done { - background-image: url('../images/sequence-nav/list-finished.png'); + } } diff --git a/common/lib/xmodule/xmodule/js/spec/sequence/display_spec.coffee b/common/lib/xmodule/xmodule/js/spec/sequence/display_spec.coffee index 8e19048c1b..0ca1736861 100644 --- a/common/lib/xmodule/xmodule/js/spec/sequence/display_spec.coffee +++ b/common/lib/xmodule/xmodule/js/spec/sequence/display_spec.coffee @@ -20,7 +20,8 @@ xdescribe 'Sequence', -> elements = $('#sequence-list li>a').map(-> $(this).attr('data-element')).get() titles = $('#sequence-list li>a>p').map(-> $(this).html()).get() - expect(classes).toEqual ['seq_video_active', 'seq_video_inactive', 'seq_problem_inactive'] + # expect(classes).toEqual ['seq_video_active', 'seq_video_inactive', 'seq_problem_inactive'] + expect(classes).toEqual ['active', 'inactive', 'visited'] expect(elements).toEqual ['1', '2', '3'] expect(titles).toEqual ['Video 1', 'Video 2', 'Sample Problem'] @@ -92,13 +93,15 @@ xdescribe 'Sequence', -> @sequence.render 1 it 'mark the previous tab as visited', -> - expect($('[data-element="2"]')).toHaveClass 'seq_video_visited' + # expect($('[data-element="2"]')).toHaveClass 'seq_video_visited' + expect($('[data-element="2"]')).toHaveClass 'visited' it 'save the new position', -> expect($.postWithPrefix).toHaveBeenCalledWith '/modx/1/goto_position', position: 1 it 'mark new tab as active', -> - expect($('[data-element="1"]')).toHaveClass 'seq_video_active' + # expect($('[data-element="1"]')).toHaveClass 'seq_video_active' + expect($('[data-element="1"]')).toHaveClass 'active' it 'render the new content', -> expect($('#seq_content').html()).toEqual 'Video 1' diff --git a/common/lib/xmodule/xmodule/js/src/sequence/display.coffee b/common/lib/xmodule/xmodule/js/src/sequence/display.coffee index c86ecdeed8..ae509d63c5 100644 --- a/common/lib/xmodule/xmodule/js/src/sequence/display.coffee +++ b/common/lib/xmodule/xmodule/js/src/sequence/display.coffee @@ -74,17 +74,17 @@ class @Sequence toggleArrows: => @$('.sequence-nav-button').unbind('click') - if @contents.length == 0 + if @contents.length == 0 ## There are no modules to display, and therefore no nav to build. @$('.sequence-nav-button.button-previous').addClass('disabled').attr('disabled', true) @$('.sequence-nav-button.button-next').addClass('disabled').attr('disabled', true) return - if @position == 1 + if @position == 1 ## 1 != 0 here. 1 is the first item in the sequence nav. @$('.sequence-nav-button.button-previous').addClass('disabled').attr('disabled', true) else @$('.sequence-nav-button.button-previous').removeClass('disabled').removeAttr('disabled').click(@previous) - if @position == @contents.length + if @position == @contents.length ## If the final position on the nav matches the total contents. @$('.sequence-nav-button.button-next').addClass('disabled').attr('disabled', true) else @$('.sequence-nav-button.button-next').removeClass('disabled').removeAttr('disabled').click(@next) @@ -117,27 +117,27 @@ class @Sequence sequence_links.click @goto @sr_container.focus(); - @$("a.active").blur() + # @$("a.active").blur() goto: (event) => event.preventDefault() - if $(event.target).hasClass 'seqnav' # Links from courseware ... - new_position = $(event.target).attr('href') + if $(event.currentTarget).hasClass 'seqnav' # Links from courseware ..., was .target + new_position = $(event.currentTarget).attr('href') else # Tab links generated by backend template - new_position = $(event.target).data('element') + new_position = $(event.currentTarget).data('element') if (1 <= new_position) and (new_position <= @num_contents) Logger.log "seq_goto", old: @position, new: new_position, id: @id # On Sequence change, destroy any existing polling thread - # for queued submissions, see ../capa/display.coffee + # for queued submissions, see ../capa/display.coffee if window.queuePollerID window.clearTimeout(window.queuePollerID) delete window.queuePollerID @render new_position else - alert_template = gettext("Sequence error! Cannot navigate to tab %(tab_name)s in the current SequenceModule. Please contact the course staff.") + alert_template = gettext("Sequence error! Cannot navigate to %(tab_name)s in the current SequenceModule. Please contact the course staff.") alert_text = interpolate(alert_template, {tab_name: new_position}, true) alert alert_text @@ -175,13 +175,8 @@ class @Sequence .addClass("visited") mark_active: (position) -> - # Mark the correct tab as selected, for a11y helpfulness. - @$('#sequence-list [role="tab"]').attr({ - 'aria-selected' : null - }); # Don't overwrite class attribute to avoid changing Progress class element = @link_for(position) element.removeClass("inactive") .removeClass("visited") .addClass("active") - .attr({"aria-selected": "true", 'tabindex': '0'}) diff --git a/lms/templates/seq_module.html b/lms/templates/seq_module.html index 74e46e8b9e..1251f92574 100644 --- a/lms/templates/seq_module.html +++ b/lms/templates/seq_module.html @@ -19,9 +19,9 @@ data-page-title="${item['page_title']|h}" aria-controls="seq_contents_${idx}" id="tab_${idx}" - tabindex="0" - role="tab"> -

${item['title']}

+ tabindex="0"> + +

${item['type']} ${item['title']}

% endfor @@ -30,12 +30,14 @@ +
+ % for idx, item in enumerate(items): % endfor