From 5e9fd0412604f238cbe02d8ca3578d49272e5bf7 Mon Sep 17 00:00:00 2001 From: Andy Armstrong Date: Mon, 1 Aug 2016 15:37:47 -0400 Subject: [PATCH] Clean up UX for read and unread posts TNL-4557 --- .../views/discussion_thread_list_view.js | 65 ++-- .../view/discussion_thread_list_view_spec.js | 22 +- .../response-comment-show.underscore | 4 +- .../discussion/thread-list-item.underscore | 27 +- .../thread-response-show.underscore | 4 +- .../discussion/thread-show.underscore | 12 +- lms/static/sass/discussion/_discussion.scss | 1 - lms/static/sass/discussion/_mixins.scss | 26 -- .../sass/discussion/elements/_labels.scss | 62 ++- .../sass/discussion/elements/_navigation.scss | 359 +++++++++--------- .../sass/discussion/utilities/_shame.scss | 6 - .../discussion/utilities/_variables-v1.scss | 2 + .../discussion/utilities/_variables-v2.scss | 20 +- lms/static/sass/discussion/views/_thread.scss | 8 +- lms/static/sass/shared-v2/_layouts.scss | 3 - lms/static/sass/shared-v2/_variables.scss | 2 +- 16 files changed, 322 insertions(+), 301 deletions(-) diff --git a/common/static/common/js/discussion/views/discussion_thread_list_view.js b/common/static/common/js/discussion/views/discussion_thread_list_view.js index 6375c7aeb0..f5db60c1c8 100644 --- a/common/static/common/js/discussion/views/discussion_thread_list_view.js +++ b/common/static/common/js/discussion/views/discussion_thread_list_view.js @@ -124,7 +124,6 @@ this.collection.on('thread:remove', this.threadRemoved); this.sidebar_padding = 10; this.boardName = null; - this.template = _.template($('#thread-list-template').html()); this.current_search = ''; this.mode = 'all'; this.searchAlertCollection = new Backbone.Collection([], { @@ -146,9 +145,12 @@ this.searchAlertCollection.on('remove', function(searchAlert) { return self.$('#search-alert-' + searchAlert.cid).remove(); }); - return this.searchAlertCollection.on('reset', function() { + this.searchAlertCollection.on('reset', function() { return self.$('.search-alerts').empty(); }); + this.template = edx.HtmlUtils.template($('#thread-list-template').html()); + this.homeTemplate = edx.HtmlUtils.template($('#discussion-home-template').html()); + this.threadListItemTemplate = edx.HtmlUtils.template($('#thread-list-item-template').html()); }; /** @@ -241,14 +243,16 @@ }; DiscussionThreadListView.prototype.render = function() { - var self = this, - $elem = this.template({ - isCohorted: this.courseSettings.get('is_cohorted'), - isPrivilegedUser: DiscussionUtil.isPrivilegedUser() - }); + var self = this; this.timer = 0; this.$el.empty(); - this.$el.append($elem); + edx.HtmlUtils.append( + this.$el, + this.template({ + isCohorted: this.courseSettings.get('is_cohorted'), + isPrivilegedUser: DiscussionUtil.isPrivilegedUser() + }) + ); this.$('.forum-nav-sort-control option').removeProp('selected'); this.$('.forum-nav-sort-control option[value=' + this.collection.sort_preference + ']') .prop('selected', true); @@ -280,17 +284,19 @@ }; DiscussionThreadListView.prototype.showMetadataAccordingToSort = function() { - var commentCounts, voteCounts; - voteCounts = this.$('.forum-nav-thread-votes-count'); - commentCounts = this.$('.forum-nav-thread-comments-count'); + var voteCounts = this.$('.forum-nav-thread-votes-count'), + unreadCommentCounts = this.$('.forum-nav-thread-unread-comments-count'), + commentCounts = this.$('.forum-nav-thread-comments-count'); voteCounts.hide(); commentCounts.hide(); + unreadCommentCounts.hide(); switch (this.$('.forum-nav-sort-control').val()) { - case 'activity': - case 'comments': - return commentCounts.show(); case 'votes': - return voteCounts.show(); + voteCounts.show(); + break; + default: + unreadCommentCounts.show(); + commentCounts.show(); } }; @@ -370,20 +376,16 @@ }; DiscussionThreadListView.prototype.renderThread = function(thread) { - var content, unreadCount; - content = $(_.template($('#thread-list-item-template').html())(thread.toJSON())); - unreadCount = thread.get('unread_comments_count') + (thread.get('read') ? 0 : 1); - if (unreadCount > 0) { - content.find('.forum-nav-thread-comments-count').attr( - 'data-tooltip', - edx.StringUtils.interpolate( - ngettext('{unread_count} new comment', '{unread_count} new comments', unreadCount), - {unread_count: unreadCount}, - true - ) + var threadCommentCount = thread.get('comments_count'), + threadUnreadCommentCount = thread.get('unread_comments_count'), + neverRead = !thread.get('read') && threadUnreadCommentCount === threadCommentCount, + context = _.extend( + { + neverRead: neverRead + }, + thread.toJSON() ); - } - return content; + return $(this.threadListItemTemplate(context).toString()); }; DiscussionThreadListView.prototype.threadSelected = function(e) { @@ -415,8 +417,7 @@ DiscussionThreadListView.prototype.goHome = function() { var url, $templateContent; - this.template = _.template($('#discussion-home-template').html()); - $templateContent = $(this.template()); + $templateContent = $(this.homeTemplate().toString()); $('.forum-content').empty().append($templateContent); $('.forum-nav-thread-list a').removeClass('is-active').find('.sr') .remove(); @@ -635,7 +636,7 @@ Content.loadContentInfos(response.annotated_content_info); self.displayedCollection.reset(self.collection.models); if (callback) { - return callback(); + callback(); } } }); @@ -683,7 +684,7 @@ calling discussion.loadMorePages Mainly because this currently does not reset any pagination variables which could cause problems. This doesn't use pagination either. - */ + */ return DiscussionUtil.safeAjax({ $elem: $searchInput, diff --git a/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js b/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js index 6deea3d84f..14bd89d1da 100644 --- a/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js +++ b/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js @@ -37,7 +37,9 @@ votes: { up_count: '12' }, + read: true, comments_count: 3, + unread_comments_count: 2, created_at: '2013-04-03T20:06:39Z' }), DiscussionViewSpecHelper.makeThreadWithProps({ id: '4', @@ -172,7 +174,8 @@ describe('thread rendering should be correct', function() { var checkRender; checkRender = function(threads, type, sortOrder) { - var discussion, view; + var discussion, view, + isOrderedByVotes = type === 'votes'; discussion = new Discussion(_.map(threads, function(thread) { return new Thread(thread); }), { @@ -183,25 +186,30 @@ view.render(); checkThreadsOrdering(view, sortOrder, type); expect(view.$el.find('.forum-nav-thread-comments-count:visible').length) - .toEqual(type === 'votes' ? 0 : 4); + .toEqual(isOrderedByVotes ? 0 : 4); + expect(view.$el.find('.forum-nav-thread-unread-comments-count:visible').length) + .toEqual(isOrderedByVotes ? 0 : 1); expect(view.$el.find('.forum-nav-thread-votes-count:visible').length) - .toEqual(type === 'votes' ? 4 : 0); - if (type === 'votes') { + .toEqual(isOrderedByVotes ? 4 : 0); + if (isOrderedByVotes) { expect(_.map(view.$el.find('.forum-nav-thread-votes-count'), function(element) { return $(element).text().trim(); })).toEqual(['+25 votes', '+20 votes', '+42 votes', '+12 votes']); + } else { + expect(view.$el.find('.forum-nav-thread-votes-count:visible').length) + .toEqual(0); } }; - it('with sort preference activity', function() { + it('with sort preference "activity"', function() { checkRender(this.threads, 'activity', ['Thread1', 'Thread2', 'Thread3', 'Thread4']); }); - it('with sort preference votes', function() { + it('with sort preference "votes"', function() { checkRender(this.threads, 'votes', ['Thread4', 'Thread1', 'Thread2', 'Thread3']); }); - it('with sort preference comments', function() { + it('with sort preference "comments"', function() { checkRender(this.threads, 'comments', ['Thread1', 'Thread4', 'Thread3', 'Thread2']); }); }); diff --git a/common/static/common/templates/discussion/response-comment-show.underscore b/common/static/common/templates/discussion/response-comment-show.underscore index 076ca7f315..628e733d68 100644 --- a/common/static/common/templates/discussion/response-comment-show.underscore +++ b/common/static/common/templates/discussion/response-comment-show.underscore @@ -28,6 +28,8 @@ ) %>

- <%- gettext("Reported") %> + + <%- gettext("Reported") %> +
diff --git a/common/static/common/templates/discussion/thread-list-item.underscore b/common/static/common/templates/discussion/thread-list-item.underscore index 7fa664fdd3..190c413272 100644 --- a/common/static/common/templates/discussion/thread-list-item.underscore +++ b/common/static/common/templates/discussion/thread-list-item.underscore @@ -1,4 +1,4 @@ -
  • is-unread<% } %>"> +
  • <% @@ -25,31 +25,31 @@ <% if(pinned || subscribed || staff_authored || community_ta_authored) { %>
      <% if (pinned) { %> -
    • +
    • <% // Translators: This is a label for a forum thread that has been pinned %> <%- gettext("Pinned") %>
      • <% } %> <% if (subscribed) { %> -
    • +
    • <% // Translators: This is a label for a forum thread that the user is subscribed to %> <%- gettext("Following") %>
      • <% } %> <% if (staff_authored) { %> -
    • +
    • <% // Translators: This is a label for a forum thread that was authored by a member of the course staff %> - <%- gettext("By: Staff") %> + <%- gettext("Staff") %>
      • <% } %> <% if (community_ta_authored) { %> -
    • +
    • <% // Translators: This is a label for a forum thread that was authored by a community TA %> - <%- gettext("By: Community TA") %> + <%- gettext("Community TA") %>
      • <% } %>
    @@ -72,7 +72,18 @@ %> - + <% if (!neverRead && unread_comments_count > 0) { %> + + <%- + StringUtils.interpolate( + gettext('{unread_comments_count} new'), + {unread_comments_count: unread_comments_count} + ) + %> + + <% } %> + + <% var fmt; // Counts in data do not include the post itself, but the UI should diff --git a/common/static/common/templates/discussion/thread-response-show.underscore b/common/static/common/templates/discussion/thread-response-show.underscore index 75dc029b94..fc227aca2f 100644 --- a/common/static/common/templates/discussion/thread-response-show.underscore +++ b/common/static/common/templates/discussion/thread-response-show.underscore @@ -38,7 +38,9 @@ <% } %>

    - <%- gettext("Reported") %> + + <%- gettext("Reported") %> +
    diff --git a/common/static/common/templates/discussion/thread-show.underscore b/common/static/common/templates/discussion/thread-show.underscore index 4a2d7230af..8cb3469866 100644 --- a/common/static/common/templates/discussion/thread-show.underscore +++ b/common/static/common/templates/discussion/thread-show.underscore @@ -21,9 +21,15 @@ %>

    - <%- gettext("Pinned") %> - <%- gettext("Reported") %> - <%- gettext("Closed") %> + + <%- gettext("Pinned") %> + + + <%- gettext("Reported") %> + + + <%- gettext("Closed") %> +
    <% if (!readOnly) { %> diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 384bd153bf..5caaff66fe 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -202,7 +202,6 @@ body.discussion { } } - .discussion-post header, .responses li header { margin-bottom: $baseline; } diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index 9a3de6eac3..2d6a8b9207 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -112,32 +112,6 @@ text-overflow: ellipsis; } -@mixin forum-post-label($color) { - @extend %t-weight4; - font-size: $forum-small-font-size; - display: inline; - margin-top: ($baseline/4); - border: 1px solid; - border-radius: $forum-border-radius; - padding: 1px 6px; - white-space: nowrap; - - border-color: $color; - color: $color; - - .icon { - @include margin-right($baseline/5); - } - - &:last-child { - @include margin-right(0); - } - - &.is-hidden { - display: none; - } -} - @mixin forum-user-label($color) { @include margin-left($baseline/4); @extend %t-weight5; diff --git a/lms/static/sass/discussion/elements/_labels.scss b/lms/static/sass/discussion/elements/_labels.scss index 04e39e2107..8ea2f38922 100644 --- a/lms/static/sass/discussion/elements/_labels.scss +++ b/lms/static/sass/discussion/elements/_labels.scss @@ -2,28 +2,44 @@ // ==================== body.discussion, .discussion-module { - .post-label-pinned { - @include forum-post-label($forum-color-pinned); - } + .post-label { + @include margin($baseline/4, $baseline/2, 0, 0); + @extend %t-weight4; + font-size: $forum-small-font-size; + display: inline; + white-space: nowrap; - .post-label-following { - @include forum-post-label($forum-color-following); - } + .icon { + @include margin-right($baseline/5); + } - .post-label-reported { - @include forum-post-label($forum-color-reported); - } + &.is-hidden { + display: none; + } - .post-label-closed { - @include forum-post-label($forum-color-closed); - } + &.post-label-pinned { + color: $forum-color-pinned; + } - .post-label-by-staff { - @include forum-post-label($forum-color-staff); - } + &.post-label-following { + color: $forum-color-following; + } - .post-label-by-community-ta { - @include forum-post-label($forum-color-community-ta); + &.post-label-reported { + color: $forum-color-reported; + } + + &.post-label-closed { + color: $forum-color-closed; + } + + &.post-label-by-staff { + color: $forum-color-staff; + } + + &.post-label-by-community-ta { + color: $forum-color-community-ta; + } } .user-label-staff { @@ -33,5 +49,15 @@ body.discussion, .discussion-module { .user-label-community-ta { @include forum-user-label($forum-color-community-ta); } - +} + +// Make post labels tighter when shown inside the left nav +.forum-nav-thread-link { + .forum-nav-thread-labels { + .post-label { + .icon { + @include margin-right(0); + } + } + } } diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index 6c77bfd390..191bca49ba 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -2,8 +2,8 @@ // ==================== .forum-nav { - border: 1px solid #aaa; - border-radius: $forum-border-radius; + border: 1px solid #aaa; + border-radius: $forum-border-radius; } // ------ @@ -33,12 +33,12 @@ // Topic Listing Header // ------ .forum-nav-header { - box-sizing: border-box; - // TODO: don't use table for layout purposes as it switches the screenreader mode - display: table; - border-bottom: 1px solid $forum-color-border; - width: 100%; - background-color: $gray-l3; + box-sizing: border-box; + // TODO: don't use table for layout purposes as it switches the screenreader mode + display: table; + border-bottom: 1px solid $forum-color-border; + width: 100%; + background-color: $gray-l3; } .forum-nav-browse { @@ -61,44 +61,44 @@ background-color: $gray-l5 !important; } - .icon { - @include margin-right($baseline/4); - font-size: $forum-base-font-size; - } + .icon { + @include margin-right($baseline/4); + font-size: $forum-base-font-size; + } } .forum-nav-browse-current { - font-size: $forum-small-font-size; + font-size: $forum-small-font-size; } .forum-nav-browse-drop-arrow { - @include margin-left($baseline/4); + @include margin-left($baseline/4); } // ----------- // Browse menu // ----------- .forum-nav-browse-menu-wrapper { - border-bottom: 1px solid $forum-color-border; - background: $gray-l5; + border-bottom: 1px solid $forum-color-border; + background: $gray-l5; } .forum-nav-browse-filter { - position: relative; - border-bottom: 1px solid $forum-color-border; - padding: ($baseline/4); + position: relative; + border-bottom: 1px solid $forum-color-border; + padding: ($baseline/4); } .forum-nav-browse-filter .icon { - font-size: $forum-small-font-size; - position: absolute; - margin-top: -6px; - top: 50%; - right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding + font-size: $forum-small-font-size; + position: absolute; + margin-top: -6px; + top: 50%; + right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding } .forum-nav-browse-filter-input { - width: 100%; + width: 100%; } .forum-nav-browse-title { @@ -125,13 +125,13 @@ } .forum-nav-browse-title .icon { - @include margin-right($baseline/2); + @include margin-right($baseline/2); } .forum-nav-browse-menu { - font-size: $forum-base-font-size; - overflow-y: scroll; - list-style: none; + font-size: $forum-base-font-size; + overflow-y: scroll; + list-style: none; } .forum-nav-browse-submenu { @@ -150,238 +150,231 @@ // Sort and filter bar // ------------------- .forum-nav-refine-bar { - @include clearfix(); - font-size: $forum-small-font-size; - border-bottom: 1px solid $forum-color-border; - background-color: $gray-l5; - padding: ($baseline/4) ($baseline/2); - color: $black; - text-align: right; + @include clearfix(); + font-size: $forum-small-font-size; + border-bottom: 1px solid $forum-color-border; + background-color: $gray-l5; + padding: ($baseline/4) ($baseline/2); + color: $black; + text-align: right; } .forum-nav-filter-main { - box-sizing: border-box; - display: inline-block; - width: 50%; - @include text-align(left); + box-sizing: border-box; + display: inline-block; + width: 50%; + @include text-align(left); } .forum-nav-filter-cohort, .forum-nav-sort { - box-sizing: border-box; - display: inline-block; - width: 50%; - @include text-align(right); + box-sizing: border-box; + display: inline-block; + width: 50%; + @include text-align(right); } %forum-nav-select { - border: none; - max-width: 100%; - background-color: transparent; + border: none; + max-width: 100%; + background-color: transparent; } .forum-nav-filter-main-control { - @extend %forum-nav-select; + @extend %forum-nav-select; } .forum-nav-filter-cohort-control { - @extend %forum-nav-select; + @extend %forum-nav-select; } .forum-nav-sort-control { - @extend %forum-nav-select; + @extend %forum-nav-select; } // ----------- // Thread list // ----------- .forum-nav-thread-list { - overflow-y: scroll; - list-style: none; + margin: 0; + padding-left: 0; + overflow-y: scroll; + list-style: none; + + .forum-nav-thread-labels { + margin: 5px 0 0; + } } .forum-nav-thread { - border-bottom: 1px solid $forum-color-border; - background-color: $forum-color-background; - margin-bottom: 0; + border-bottom: 1px solid $forum-color-border; + background-color: $forum-color-background; + margin-bottom: 0; - &.is-unread { - background: $forum-color-background; - color: $blue-d1; + .forum-nav-thread-link { + @include border-left(3px solid transparent); + display: flex; + padding: ($baseline/4) ($baseline/2); + transition: none; + align-items: center; + justify-content: space-between; + color: $forum-color-read-post; - .forum-nav-thread-comments-count { - background-color: tint($blue-d1, 90%);; - color: $blue-d1; + &:hover, + &:active, + &:focus { + text-decoration: none; + } - &:after { - border-right-color: tint($blue-d1, 90%);; - } - } - } -} + &:hover { + background-color: $forum-color-hover-thread; + } -.forum-nav-thread-link { - display: block; - padding: ($baseline/4) ($baseline/2); - transition: none; + &.is-active { + color: $forum-color-background; + background-color: $forum-color-reading-thread; - &:hover { - color: $forum-color-background; - background-color: $forum-color-hover-thread; - } + .forum-nav-thread-labels > li { + border-color: $forum-color-background; + color: $forum-color-background; + } - &.is-active { - color: $forum-color-background; - background-color: $forum-color-reading-thread; - } + .forum-nav-thread-votes-count { + color: $forum-color-background; + } - &.is-active, - &:hover { - .forum-nav-thread-labels > li { - border-color: $forum-color-background; - color: $forum-color-background; + .forum-nav-thread-comments-count { + color: $base-font-color; + + &:after { + border-right-color: $forum-color-border; + } + } + + span.icon { + color: $forum-color-background; + } + } + + .forum-nav-thread-unread-comments-count { + display: inline-block; + font-size: $forum-small-font-size; + white-space: nowrap; + } } - .forum-nav-thread-comments-count { - background-color: $forum-color-background; - color: $base-font-color; - - &:after { - border-right-color: $gray-l4; - } + &.never-read { + .forum-nav-thread-link { + @include border-left(3px solid $forum-color-never-read-post); + color: $forum-color-never-read-post; + } } - - span.icon { - color: $forum-color-background; - } - } - - .forum-nav-thread-comments-count { - - // topic read, but has unread comments - &.is-unread { - background-color: $blue-d1; - color: $white; - - &:after { - border-right-color: $blue-d1; - } - } - } } %forum-nav-thread-wrapper { - display: inline-block; - vertical-align: middle; + display: inline-block; + vertical-align: middle; } .forum-nav-thread-wrapper-0 { - @extend %forum-nav-thread-wrapper; - width: 7%; + @extend %forum-nav-thread-wrapper; + @include margin-right($baseline/5); - .icon { - font-size: $forum-base-font-size; + .icon { + font-size: $forum-base-font-size; + width: 18px; + text-align: center; - &:before { + &:before { - @include rtl { - @include transform(scale(-1, 1)); // RTL for font awesome question mark - } + @include rtl { + @include transform(scale(-1, 1)); // RTL for font awesome question mark + } + } } - } - - .fa-comments { - color: $gray-l2; - } - - .fa-check-square-o { - color: $forum-color-marked-answer; - } - - .fa-question { - color: $pink; - } } .forum-nav-thread-wrapper-1 { - @extend %forum-nav-thread-wrapper; - width: 80%; + @extend %forum-nav-thread-wrapper; + margin: 0 ($baseline/2); + flex-grow: 1; // This column should consume all the available space } .forum-nav-thread-wrapper-2 { - @extend %forum-nav-thread-wrapper; - width: 13%; - @include text-align(right); + @extend %forum-nav-thread-wrapper; + @include text-align(right); + white-space: nowrap; } .forum-nav-thread-title { - font-size: $forum-base-font-size; - display: block; + font-size: $forum-base-font-size; + display: block; + margin-left: 0; } %forum-nav-thread-wrapper-2-content { - @include margin-right($baseline/4); - font-size: $forum-small-font-size; - display: inline-block; - text-align: center; - color: $black; + @include margin-right($baseline/4); + font-size: $forum-small-font-size; + display: inline-block; + text-align: center; + color: $black; - &:last-child { - @include margin-right(0); - } + &:last-child { + @include margin-right(0); + } } .forum-nav-thread-votes-count { - @extend %forum-nav-thread-wrapper-2-content; + @extend %forum-nav-thread-wrapper-2-content; } .forum-nav-thread-comments-count { - @extend %forum-nav-thread-wrapper-2-content; - @extend %t-weight4; - position: relative; - @include margin-left($baseline/4); - margin-bottom: ($baseline/4); // Because tail is position: absolute - border-radius: $forum-border-radius; - padding: ($baseline/10) ($baseline/5); - min-width: 2em; // Fit most comment counts but allow expansion if necessary - background-color: $gray-l4; + @extend %forum-nav-thread-wrapper-2-content; + @extend %t-weight4; + position: relative; + @include margin-left($baseline/4); + margin-bottom: ($baseline/4); // Because tail is position: absolute + border-radius: $forum-border-radius; + padding: ($baseline/10) ($baseline/5); + min-width: 2em; // Fit most comment counts but allow expansion if necessary + background-color: $gray-l4; - // Speech bubble tail - &:after { - content: ''; - display: block; - position: absolute; - bottom: (-$baseline/4); - @include right($baseline/4); - width: 0; - height: 0; - border-style: solid; - @include border-width(0, ($baseline/4), ($baseline/4), 0); - @include border-color(transparent, $gray-l4, transparent, transparent); - } + // Speech bubble tail + &:after { + content: ''; + display: block; + position: absolute; + bottom: (-$baseline/4); + @include right($baseline/4); + width: 0; + height: 0; + border-style: solid; + @include border-width(0, ($baseline/4), ($baseline/4), 0); + @include border-color(transparent, $gray-l4, transparent, transparent); + } } .forum-nav-load-more { - border-bottom: 1px solid $forum-color-border; - background-color: $gray-l5; + border-bottom: 1px solid $forum-color-border; + background-color: $gray-l5; } %forum-nav-load-more-content { - display: block; - padding: $baseline 0; - text-align: center; + display: block; + padding: $baseline 0; + text-align: center; } .forum-nav-load-more-link { - @extend %forum-nav-load-more-content; - color: $link-color; + @extend %forum-nav-load-more-content; + color: $link-color; - &:hover, - &:focus { - color: $forum-color-active-text; - background-color: $forum-color-active-thread; - } + &:hover, + &:focus { + color: $forum-color-active-text; + background-color: $forum-color-active-thread; + } } .forum-nav-loading { - @extend %forum-nav-load-more-content; + @extend %forum-nav-load-more-content; } diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index 66ac9571a8..9dff5abf08 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/lms/static/sass/discussion/utilities/_shame.scss @@ -70,12 +70,6 @@ // The following rules would be unnecessary but for broadly scoped rules defined // elsewhere in our CSS. -// Override global ul rules -.forum-nav-thread-list, .forum-nav-thread-labels { - margin: 0; - padding-left: 0; -} - li[class*=forum-nav-thread-label-] { // Override global span rules span { diff --git a/lms/static/sass/discussion/utilities/_variables-v1.scss b/lms/static/sass/discussion/utilities/_variables-v1.scss index 4c6eb96775..9911b9fc89 100644 --- a/lms/static/sass/discussion/utilities/_variables-v1.scss +++ b/lms/static/sass/discussion/utilities/_variables-v1.scss @@ -16,6 +16,8 @@ $forum-color-border: $gray-l3 !default; $forum-color-error: $red !default; $forum-color-hover-thread: $gray-d3 !default; $forum-color-reading-thread: $gray-d3 !default; +$forum-color-read-post: $blue !default; +$forum-color-never-read-post: $gray-d3 !default; // post images $post-image-dimension: ($baseline*3) !default; // image size + margin diff --git a/lms/static/sass/discussion/utilities/_variables-v2.scss b/lms/static/sass/discussion/utilities/_variables-v2.scss index d39dd0af77..65774da144 100644 --- a/lms/static/sass/discussion/utilities/_variables-v2.scss +++ b/lms/static/sass/discussion/utilities/_variables-v2.scss @@ -5,17 +5,19 @@ $forum-color-background: $lms-container-background-color !default; $forum-color-active-thread: $lms-active-color !default; $forum-color-active-text: $lms-container-background-color !default; -$forum-color-pinned: $pink !default; -$forum-color-reported: $pink !default; +$forum-color-pinned: palette(secondary, dark) !default; +$forum-color-reported: palette(secondary, dark) !default; $forum-color-closed: $black !default; -$forum-color-following: $blue !default; -$forum-color-staff: $blue !default; -$forum-color-community-ta: $green-d1 !default; -$forum-color-marked-answer: $green-d1 !default; -$forum-color-border: palette(grayscale, base) !default; +$forum-color-following: palette(primary, base) !default; +$forum-color-staff: palette(primary, base) !default; +$forum-color-community-ta: palette(success, text) !default; +$forum-color-marked-answer: palette(success, text) !default; +$forum-color-border: palette(grayscale, back) !default; $forum-color-error: palette(error, accent) !default; -$forum-color-hover-thread: palette(grayscale, dark) !default; -$forum-color-reading-thread: palette(grayscale, dark) !default; +$forum-color-hover-thread: palette(grayscale, x-back) !default; +$forum-color-reading-thread: palette(primary, base) !default; +$forum-color-read-post: palette(grayscale, base) !default; +$forum-color-never-read-post: palette(primary, base) !default; // post images $post-image-dimension: ($baseline*3) !default; // image size + margin diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index 3211511a3b..d71323fa35 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -15,7 +15,6 @@ .wrapper-post-header { padding-bottom: 0; - margin-bottom: ($baseline*0.75); } .post-header-content { @@ -34,7 +33,7 @@ .posted-details { @extend %t-copy-sub2; - margin-top: ($baseline/5); + margin: ($baseline/5) 0; color: $gray-d1; .username { @@ -178,6 +177,11 @@ body.discussion { // Layout control for discussion modules that does not apply to the discussion board .discussion-module { + .discussion { + clear: both; + padding-top: ($baseline/2); + } + .btn-brand { @include blue-button; display: inline-block; diff --git a/lms/static/sass/shared-v2/_layouts.scss b/lms/static/sass/shared-v2/_layouts.scss index aac7e92089..22f36dffac 100644 --- a/lms/static/sass/shared-v2/_layouts.scss +++ b/lms/static/sass/shared-v2/_layouts.scss @@ -49,13 +49,10 @@ .form-actions > * { @include margin-left($baseline/2); vertical-align: middle; - min-width: 200px; height: 34px; } .form-actions > button { - padding: $baseline/5; - min-width: 200px; height: 34px; } diff --git a/lms/static/sass/shared-v2/_variables.scss b/lms/static/sass/shared-v2/_variables.scss index 49b91a87f9..8457e6344d 100644 --- a/lms/static/sass/shared-v2/_variables.scss +++ b/lms/static/sass/shared-v2/_variables.scss @@ -1,7 +1,7 @@ // LMS variables $lms-gray: palette(grayscale, base); -$lms-background-color: rgb(252, 252, 252); // Correct shade of grey not available in the Pattern Library +$lms-background-color: palette(grayscale, x-back); $lms-container-background-color: $white; $lms-border-color: palette(grayscale, back); $lms-label-color: palette(grayscale, black);