Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up UX for read and unread posts

Browse Source 
TNL-4557
This commit is contained in:
Andy Armstrong
2016-08-01 15:37:47 -04:00
committed by Brian Jacobel
parent 1f2c843f23
commit 5e9fd04126
16 changed files with 322 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
common/static/common/js/discussion/views/discussion_thread_list_view.js
View File

@@ -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,

22
common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js
View File

@@ -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']);
});
});

4
common/static/common/templates/discussion/response-comment-show.underscore
View File

@@ -28,6 +28,8 @@
) %>
</p>
<div class="post-labels">
<span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span>
<span class="post-label post-label-reported">
<span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %>
</span>
</div>
</div>

27
common/static/common/templates/discussion/thread-list-item.underscore
View File

@@ -1,4 +1,4 @@
<li data-id="<%- id %>" class="forum-nav-thread<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>">
<li data-id="<%- id %>" class="forum-nav-thread<% if (neverRead) { %> never-read<% } %>">
<a href="#" class="forum-nav-thread-link">
<div class="forum-nav-thread-wrapper-0">
<%
@@ -25,31 +25,31 @@
<% if(pinned || subscribed || staff_authored || community_ta_authored) { %>
<ul class="forum-nav-thread-labels">
<% if (pinned) { %>
<li class="post-label-pinned">
<li class="post-label post-label-pinned">
<span class="icon fa fa-thumb-tack" aria-hidden="true"></span>
<% // Translators: This is a label for a forum thread that has been pinned %>
<%- gettext("Pinned") %>
</li>
<% } %>
<% if (subscribed) { %>
<li class="post-label-following">
<li class="post-label post-label-following">
<span class="icon fa fa-star" aria-hidden="true"></span>
<% // Translators: This is a label for a forum thread that the user is subscribed to %>
<%- gettext("Following") %>
</li>
<% } %>
<% if (staff_authored) { %>
<li class="post-label-by-staff">
<li class="post-label post-label-by-staff">
<span class="icon fa fa-user" aria-hidden="true"></span>
<% // Translators: This is a label for a forum thread that was authored by a member of the course staff %>
<%- gettext("By: Staff") %>
<%- gettext("Staff") %>
</li>
<% } %>
<% if (community_ta_authored) { %>
<li class="post-label-by-community-ta">
<li class="post-label post-label-by-community-ta">
<span class="icon fa fa-user" aria-hidden="true"></span>
<% // Translators: This is a label for a forum thread that was authored by a community TA %>
<%- gettext("By: Community TA") %>
<%- gettext("Community TA") %>
</li>
<% } %>
</ul>
@@ -72,7 +72,18 @@
%>
</span>
<span class="forum-nav-thread-comments-count <% if (unread_comments_count > 0) { %>is-unread<% } %>">
<% if (!neverRead && unread_comments_count > 0) { %>
<span class="forum-nav-thread-unread-comments-count">
<%-
StringUtils.interpolate(
gettext('{unread_comments_count} new'),
{unread_comments_count: unread_comments_count}
)
%>
</span>
<% } %>
<span class="forum-nav-thread-comments-count">
<%
var fmt;
// Counts in data do not include the post itself, but the UI should

4
common/static/common/templates/discussion/thread-response-show.underscore
View File

@@ -38,7 +38,9 @@
<% } %>
</p>
<div class="post-labels">
<span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span>
<span class="post-label post-label-reported">
<span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %>
</span>
</div>
</div>
<div class="response-header-actions">

12
common/static/common/templates/discussion/thread-show.underscore
View File

@@ -21,9 +21,15 @@
%>
</p>
<div class="post-labels">
<span class="post-label-pinned"><span class="icon fa fa-thumb-tack" aria-hidden="true"></span><%- gettext("Pinned") %></span>
<span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span>
<span class="post-label-closed"><span class="icon fa fa-lock" aria-hidden="true"></span><%- gettext("Closed") %></span>
<span class="post-label post-label-pinned">
<span class="icon fa fa-thumb-tack" aria-hidden="true"></span><%- gettext("Pinned") %>
</span>
<span class="post-label post-label-reported">
<span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %>
</span>
<span class="post-label post-label-closed">
<span class="icon fa fa-lock" aria-hidden="true"></span><%- gettext("Closed") %>
</span>
</div>
</div>
<% if (!readOnly) { %>

1
lms/static/sass/discussion/_discussion.scss
View File

@@ -202,7 +202,6 @@ body.discussion {
}
}
.discussion-post header,
.responses li header {
margin-bottom: $baseline;
}

26
lms/static/sass/discussion/_mixins.scss
View File

@@ -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;

62
lms/static/sass/discussion/elements/_labels.scss
View File

@@ -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);
}
}
}
}

359
lms/static/sass/discussion/elements/_navigation.scss
View File

@@ -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;
}

6
lms/static/sass/discussion/utilities/_shame.scss
View File

@@ -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 {

2
lms/static/sass/discussion/utilities/_variables-v1.scss
View File

@@ -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

20
lms/static/sass/discussion/utilities/_variables-v2.scss
View File

@@ -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

8
lms/static/sass/discussion/views/_thread.scss
View File

@@ -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;

3
lms/static/sass/shared-v2/_layouts.scss
View File

@@ -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;
}

2
lms/static/sass/shared-v2/_variables.scss
View File

@@ -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);