Skip to content

E
edx-platform
Commit 5e9fd041 by Andy Armstrong Committed by Brian Jacobel
Options

Clean up UX for read and unread posts 

TNL-4557
parent 1f2c843f
Showing with 321 additions and 300 deletions
common/static/common/js/discussion/views/discussion_thread_list_view.js
...@@ -124,7 +124,6 @@ ...@@ -124,7 +124,6 @@
this.collection.on('thread:remove', this.threadRemoved); this.collection.on('thread:remove', this.threadRemoved);
this.sidebar_padding = 10; this.sidebar_padding = 10;
this.boardName = null; this.boardName = null;
this.template = _.template($('#thread-list-template').html());
this.current_search = ''; this.current_search = '';
this.mode = 'all'; this.mode = 'all';
this.searchAlertCollection = new Backbone.Collection([], { this.searchAlertCollection = new Backbone.Collection([], {
...@@ -146,9 +145,12 @@ ...@@ -146,9 +145,12 @@
this.searchAlertCollection.on('remove', function(searchAlert) { this.searchAlertCollection.on('remove', function(searchAlert) {
return self.$('#search-alert-' + searchAlert.cid).remove(); return self.$('#search-alert-' + searchAlert.cid).remove();
}); });
return this.searchAlertCollection.on('reset', function() { this.searchAlertCollection.on('reset', function() {
return self.$('.search-alerts').empty(); 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 @@ ...@@ -241,14 +243,16 @@
}; };
DiscussionThreadListView.prototype.render = function() { DiscussionThreadListView.prototype.render = function() {
var self = this, var self = this;
$elem = this.template({
isCohorted: this.courseSettings.get('is_cohorted'),
isPrivilegedUser: DiscussionUtil.isPrivilegedUser()
});
this.timer = 0; this.timer = 0;
this.$el.empty(); 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').removeProp('selected');
this.$('.forum-nav-sort-control option[value=' + this.collection.sort_preference + ']') this.$('.forum-nav-sort-control option[value=' + this.collection.sort_preference + ']')
.prop('selected', true); .prop('selected', true);
...@@ -280,17 +284,19 @@ ...@@ -280,17 +284,19 @@
}; };
DiscussionThreadListView.prototype.showMetadataAccordingToSort = function() { DiscussionThreadListView.prototype.showMetadataAccordingToSort = function() {
var commentCounts, voteCounts; var voteCounts = this.$('.forum-nav-thread-votes-count'),
voteCounts = this.$('.forum-nav-thread-votes-count'); unreadCommentCounts = this.$('.forum-nav-thread-unread-comments-count'),
commentCounts = this.$('.forum-nav-thread-comments-count'); commentCounts = this.$('.forum-nav-thread-comments-count');
voteCounts.hide(); voteCounts.hide();
commentCounts.hide(); commentCounts.hide();
unreadCommentCounts.hide();
switch (this.$('.forum-nav-sort-control').val()) { switch (this.$('.forum-nav-sort-control').val()) {
case 'activity':
case 'comments':
return commentCounts.show();
case 'votes': case 'votes':
return voteCounts.show(); voteCounts.show();
break;
default:
unreadCommentCounts.show();
commentCounts.show();
} }
}; };
...@@ -370,20 +376,16 @@ ...@@ -370,20 +376,16 @@
}; };
DiscussionThreadListView.prototype.renderThread = function(thread) { DiscussionThreadListView.prototype.renderThread = function(thread) {
var content, unreadCount; var threadCommentCount = thread.get('comments_count'),
content = $(_.template($('#thread-list-item-template').html())(thread.toJSON())); threadUnreadCommentCount = thread.get('unread_comments_count'),
unreadCount = thread.get('unread_comments_count') + (thread.get('read') ? 0 : 1); neverRead = !thread.get('read') && threadUnreadCommentCount === threadCommentCount,
if (unreadCount > 0) { context = _.extend(
content.find('.forum-nav-thread-comments-count').attr( {
'data-tooltip', neverRead: neverRead
edx.StringUtils.interpolate( },
ngettext('{unread_count} new comment', '{unread_count} new comments', unreadCount), thread.toJSON()
{unread_count: unreadCount},
true
)
); );
} return $(this.threadListItemTemplate(context).toString());
return content;
}; };
DiscussionThreadListView.prototype.threadSelected = function(e) { DiscussionThreadListView.prototype.threadSelected = function(e) {
...@@ -415,8 +417,7 @@ ...@@ -415,8 +417,7 @@
DiscussionThreadListView.prototype.goHome = function() { DiscussionThreadListView.prototype.goHome = function() {
var url, $templateContent; var url, $templateContent;
this.template = _.template($('#discussion-home-template').html()); $templateContent = $(this.homeTemplate().toString());
$templateContent = $(this.template());
$('.forum-content').empty().append($templateContent); $('.forum-content').empty().append($templateContent);
$('.forum-nav-thread-list a').removeClass('is-active').find('.sr') $('.forum-nav-thread-list a').removeClass('is-active').find('.sr')
.remove(); .remove();
...@@ -635,7 +636,7 @@ ...@@ -635,7 +636,7 @@
Content.loadContentInfos(response.annotated_content_info); Content.loadContentInfos(response.annotated_content_info);
self.displayedCollection.reset(self.collection.models); self.displayedCollection.reset(self.collection.models);
if (callback) { if (callback) {
return callback(); callback();
} }
} }
}); });
...@@ -683,7 +684,7 @@ ...@@ -683,7 +684,7 @@
calling discussion.loadMorePages calling discussion.loadMorePages
Mainly because this currently does not reset any pagination variables which could cause problems. Mainly because this currently does not reset any pagination variables which could cause problems.
This doesn't use pagination either. This doesn't use pagination either.
*/ */
return DiscussionUtil.safeAjax({ return DiscussionUtil.safeAjax({
$elem: $searchInput, $elem: $searchInput,
......
common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js
...@@ -37,7 +37,9 @@ ...@@ -37,7 +37,9 @@
votes: { votes: {
up_count: '12' up_count: '12'
}, },
read: true,
comments_count: 3, comments_count: 3,
unread_comments_count: 2,
created_at: '2013-04-03T20:06:39Z' created_at: '2013-04-03T20:06:39Z'
}), DiscussionViewSpecHelper.makeThreadWithProps({ }), DiscussionViewSpecHelper.makeThreadWithProps({
id: '4', id: '4',
...@@ -172,7 +174,8 @@ ...@@ -172,7 +174,8 @@
describe('thread rendering should be correct', function() { describe('thread rendering should be correct', function() {
var checkRender; var checkRender;
checkRender = function(threads, type, sortOrder) { checkRender = function(threads, type, sortOrder) {
var discussion, view; var discussion, view,
isOrderedByVotes = type === 'votes';
discussion = new Discussion(_.map(threads, function(thread) { discussion = new Discussion(_.map(threads, function(thread) {
return new Thread(thread); return new Thread(thread);
}), { }), {
...@@ -183,25 +186,30 @@ ...@@ -183,25 +186,30 @@
view.render(); view.render();
checkThreadsOrdering(view, sortOrder, type); checkThreadsOrdering(view, sortOrder, type);
expect(view.$el.find('.forum-nav-thread-comments-count:visible').length) 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) expect(view.$el.find('.forum-nav-thread-votes-count:visible').length)
.toEqual(type === 'votes' ? 4 : 0); .toEqual(isOrderedByVotes ? 4 : 0);
if (type === 'votes') { if (isOrderedByVotes) {
expect(_.map(view.$el.find('.forum-nav-thread-votes-count'), function(element) { expect(_.map(view.$el.find('.forum-nav-thread-votes-count'), function(element) {
return $(element).text().trim(); return $(element).text().trim();
})).toEqual(['+25 votes', '+20 votes', '+42 votes', '+12 votes']); })).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']); 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']); 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']); checkRender(this.threads, 'comments', ['Thread1', 'Thread4', 'Thread3', 'Thread2']);
}); });
}); });
......
common/static/common/templates/discussion/response-comment-show.underscore
...@@ -28,6 +28,8 @@ ...@@ -28,6 +28,8 @@
) %> ) %>
</p> </p>
<div class="post-labels"> <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> </div>
common/static/common/templates/discussion/thread-list-item.underscore
<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"> <a href="#" class="forum-nav-thread-link">
<div class="forum-nav-thread-wrapper-0"> <div class="forum-nav-thread-wrapper-0">
<% <%
...@@ -25,31 +25,31 @@ ...@@ -25,31 +25,31 @@
<% if(pinned || subscribed || staff_authored || community_ta_authored) { %> <% if(pinned || subscribed || staff_authored || community_ta_authored) { %>
<ul class="forum-nav-thread-labels"> <ul class="forum-nav-thread-labels">
<% if (pinned) { %> <% 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> <span class="icon fa fa-thumb-tack" aria-hidden="true"></span>
<% // Translators: This is a label for a forum thread that has been pinned %> <% // Translators: This is a label for a forum thread that has been pinned %>
<%- gettext("Pinned") %> <%- gettext("Pinned") %>
</li> </li>
<% } %> <% } %>
<% if (subscribed) { %> <% if (subscribed) { %>
<li class="post-label-following"> <li class="post-label post-label-following">
<span class="icon fa fa-star" aria-hidden="true"></span> <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 %> <% // Translators: This is a label for a forum thread that the user is subscribed to %>
<%- gettext("Following") %> <%- gettext("Following") %>
</li> </li>
<% } %> <% } %>
<% if (staff_authored) { %> <% 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> <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 %> <% // 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> </li>
<% } %> <% } %>
<% if (community_ta_authored) { %> <% 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> <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 %> <% // Translators: This is a label for a forum thread that was authored by a community TA %>
<%- gettext("By: Community TA") %> <%- gettext("Community TA") %>
</li> </li>
<% } %> <% } %>
</ul> </ul>
...@@ -72,7 +72,18 @@ ...@@ -72,7 +72,18 @@
%> %>
</span> </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; var fmt;
// Counts in data do not include the post itself, but the UI should // Counts in data do not include the post itself, but the UI should
......
common/static/common/templates/discussion/thread-response-show.underscore
...@@ -38,7 +38,9 @@ ...@@ -38,7 +38,9 @@
<% } %> <% } %>
</p> </p>
<div class="post-labels"> <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> </div>
<div class="response-header-actions"> <div class="response-header-actions">
......
common/static/common/templates/discussion/thread-show.underscore
...@@ -21,9 +21,15 @@ ...@@ -21,9 +21,15 @@
%> %>
</p> </p>
<div class="post-labels"> <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 post-label-pinned">
<span class="post-label-reported"><span class="icon fa fa-flag" aria-hidden="true"></span><%- gettext("Reported") %></span> <span class="icon fa fa-thumb-tack" aria-hidden="true"></span><%- gettext("Pinned") %>
<span class="post-label-closed"><span class="icon fa fa-lock" aria-hidden="true"></span><%- gettext("Closed") %></span> </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>
</div> </div>
<% if (!readOnly) { %> <% if (!readOnly) { %>
......
lms/static/sass/discussion/_discussion.scss
...@@ -202,7 +202,6 @@ body.discussion { ...@@ -202,7 +202,6 @@ body.discussion {
} }
} }
.discussion-post header,
.responses li header { .responses li header {
margin-bottom: $baseline; margin-bottom: $baseline;
} }
......
lms/static/sass/discussion/_mixins.scss
...@@ -112,32 +112,6 @@ ...@@ -112,32 +112,6 @@
text-overflow: ellipsis; 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) { @mixin forum-user-label($color) {
@include margin-left($baseline/4); @include margin-left($baseline/4);
@extend %t-weight5; @extend %t-weight5;
......
lms/static/sass/discussion/elements/_labels.scss
...@@ -2,28 +2,44 @@ ...@@ -2,28 +2,44 @@
// ==================== // ====================
body.discussion, .discussion-module { body.discussion, .discussion-module {
.post-label-pinned { .post-label {
@include forum-post-label($forum-color-pinned); @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 { .icon {
@include forum-post-label($forum-color-following); @include margin-right($baseline/5);
} }
.post-label-reported { &.is-hidden {
@include forum-post-label($forum-color-reported); display: none;
} }
.post-label-closed { &.post-label-pinned {
@include forum-post-label($forum-color-closed); color: $forum-color-pinned;
} }
.post-label-by-staff { &.post-label-following {
@include forum-post-label($forum-color-staff); color: $forum-color-following;
} }
.post-label-by-community-ta { &.post-label-reported {
@include forum-post-label($forum-color-community-ta); 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 { .user-label-staff {
...@@ -33,5 +49,15 @@ body.discussion, .discussion-module { ...@@ -33,5 +49,15 @@ body.discussion, .discussion-module {
.user-label-community-ta { .user-label-community-ta {
@include forum-user-label($forum-color-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);
}
}
}
} }
lms/static/sass/discussion/elements/_navigation.scss
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
// ==================== // ====================
.forum-nav { .forum-nav {
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
} }
// ------ // ------
...@@ -33,12 +33,12 @@ ...@@ -33,12 +33,12 @@
// Topic Listing Header // Topic Listing Header
// ------ // ------
.forum-nav-header { .forum-nav-header {
box-sizing: border-box; box-sizing: border-box;
// TODO: don't use table for layout purposes as it switches the screenreader mode // TODO: don't use table for layout purposes as it switches the screenreader mode
display: table; display: table;
border-bottom: 1px solid $forum-color-border; border-bottom: 1px solid $forum-color-border;
width: 100%; width: 100%;
background-color: $gray-l3; background-color: $gray-l3;
} }
.forum-nav-browse { .forum-nav-browse {
...@@ -61,44 +61,44 @@ ...@@ -61,44 +61,44 @@
background-color: $gray-l5 !important; background-color: $gray-l5 !important;
} }
.icon { .icon {
@include margin-right($baseline/4); @include margin-right($baseline/4);
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
} }
} }
.forum-nav-browse-current { .forum-nav-browse-current {
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
} }
.forum-nav-browse-drop-arrow { .forum-nav-browse-drop-arrow {
@include margin-left($baseline/4); @include margin-left($baseline/4);
} }
// ----------- // -----------
// Browse menu // Browse menu
// ----------- // -----------
.forum-nav-browse-menu-wrapper { .forum-nav-browse-menu-wrapper {
border-bottom: 1px solid $forum-color-border; border-bottom: 1px solid $forum-color-border;
background: $gray-l5; background: $gray-l5;
} }
.forum-nav-browse-filter { .forum-nav-browse-filter {
position: relative; position: relative;
border-bottom: 1px solid $forum-color-border; border-bottom: 1px solid $forum-color-border;
padding: ($baseline/4); padding: ($baseline/4);
} }
.forum-nav-browse-filter .icon { .forum-nav-browse-filter .icon {
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
position: absolute; position: absolute;
margin-top: -6px; margin-top: -6px;
top: 50%; top: 50%;
right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
} }
.forum-nav-browse-filter-input { .forum-nav-browse-filter-input {
width: 100%; width: 100%;
} }
.forum-nav-browse-title { .forum-nav-browse-title {
...@@ -125,13 +125,13 @@ ...@@ -125,13 +125,13 @@
} }
.forum-nav-browse-title .icon { .forum-nav-browse-title .icon {
@include margin-right($baseline/2); @include margin-right($baseline/2);
} }
.forum-nav-browse-menu { .forum-nav-browse-menu {
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
overflow-y: scroll; overflow-y: scroll;
list-style: none; list-style: none;
} }
.forum-nav-browse-submenu { .forum-nav-browse-submenu {
...@@ -150,238 +150,231 @@ ...@@ -150,238 +150,231 @@
// Sort and filter bar // Sort and filter bar
// ------------------- // -------------------
.forum-nav-refine-bar { .forum-nav-refine-bar {
@include clearfix(); @include clearfix();
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
border-bottom: 1px solid $forum-color-border; border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5; background-color: $gray-l5;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
color: $black; color: $black;
text-align: right; text-align: right;
} }
.forum-nav-filter-main { .forum-nav-filter-main {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
width: 50%; width: 50%;
@include text-align(left); @include text-align(left);
} }
.forum-nav-filter-cohort, .forum-nav-sort { .forum-nav-filter-cohort, .forum-nav-sort {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
width: 50%; width: 50%;
@include text-align(right); @include text-align(right);
} }
%forum-nav-select { %forum-nav-select {
border: none; border: none;
max-width: 100%; max-width: 100%;
background-color: transparent; background-color: transparent;
} }
.forum-nav-filter-main-control { .forum-nav-filter-main-control {
@extend %forum-nav-select; @extend %forum-nav-select;
} }
.forum-nav-filter-cohort-control { .forum-nav-filter-cohort-control {
@extend %forum-nav-select; @extend %forum-nav-select;
} }
.forum-nav-sort-control { .forum-nav-sort-control {
@extend %forum-nav-select; @extend %forum-nav-select;
} }
// ----------- // -----------
// Thread list // Thread list
// ----------- // -----------
.forum-nav-thread-list { .forum-nav-thread-list {
overflow-y: scroll; margin: 0;
list-style: none; padding-left: 0;
} overflow-y: scroll;
list-style: none;
.forum-nav-thread {
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-comments-count {
background-color: tint($blue-d1, 90%);;
color: $blue-d1;
&:after { .forum-nav-thread-labels {
border-right-color: tint($blue-d1, 90%);; margin: 5px 0 0;
}
} }
}
} }
.forum-nav-thread-link { .forum-nav-thread {
display: block; border-bottom: 1px solid $forum-color-border;
padding: ($baseline/4) ($baseline/2); background-color: $forum-color-background;
transition: none; margin-bottom: 0;
.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;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
&:hover { &:hover {
color: $forum-color-background; background-color: $forum-color-hover-thread;
background-color: $forum-color-hover-thread; }
}
&.is-active { &.is-active {
color: $forum-color-background; color: $forum-color-background;
background-color: $forum-color-reading-thread; background-color: $forum-color-reading-thread;
}
&.is-active, .forum-nav-thread-labels > li {
&:hover { border-color: $forum-color-background;
.forum-nav-thread-labels > li { color: $forum-color-background;
border-color: $forum-color-background; }
color: $forum-color-background;
}
.forum-nav-thread-comments-count { .forum-nav-thread-votes-count {
background-color: $forum-color-background; color: $forum-color-background;
color: $base-font-color; }
&:after { .forum-nav-thread-comments-count {
border-right-color: $gray-l4; color: $base-font-color;
}
}
span.icon { &:after {
color: $forum-color-background; border-right-color: $forum-color-border;
} }
} }
.forum-nav-thread-comments-count { span.icon {
color: $forum-color-background;
}
}
// topic read, but has unread comments .forum-nav-thread-unread-comments-count {
&.is-unread { display: inline-block;
background-color: $blue-d1; font-size: $forum-small-font-size;
color: $white; white-space: nowrap;
}
}
&:after { &.never-read {
border-right-color: $blue-d1; .forum-nav-thread-link {
} @include border-left(3px solid $forum-color-never-read-post);
color: $forum-color-never-read-post;
}
} }
}
} }
%forum-nav-thread-wrapper { %forum-nav-thread-wrapper {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.forum-nav-thread-wrapper-0 { .forum-nav-thread-wrapper-0 {
@extend %forum-nav-thread-wrapper; @extend %forum-nav-thread-wrapper;
width: 7%; @include margin-right($baseline/5);
.icon { .icon {
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
width: 18px;
text-align: center;
&:before { &:before {
@include rtl { @include rtl {
@include transform(scale(-1, 1)); // RTL for font awesome question mark @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 { .forum-nav-thread-wrapper-1 {
@extend %forum-nav-thread-wrapper; @extend %forum-nav-thread-wrapper;
width: 80%; margin: 0 ($baseline/2);
flex-grow: 1; // This column should consume all the available space
} }
.forum-nav-thread-wrapper-2 { .forum-nav-thread-wrapper-2 {
@extend %forum-nav-thread-wrapper; @extend %forum-nav-thread-wrapper;
width: 13%; @include text-align(right);
@include text-align(right); white-space: nowrap;
} }
.forum-nav-thread-title { .forum-nav-thread-title {
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
display: block; display: block;
margin-left: 0;
} }
%forum-nav-thread-wrapper-2-content { %forum-nav-thread-wrapper-2-content {
@include margin-right($baseline/4); @include margin-right($baseline/4);
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
color: $black; color: $black;
&:last-child { &:last-child {
@include margin-right(0); @include margin-right(0);
} }
} }
.forum-nav-thread-votes-count { .forum-nav-thread-votes-count {
@extend %forum-nav-thread-wrapper-2-content; @extend %forum-nav-thread-wrapper-2-content;
} }
.forum-nav-thread-comments-count { .forum-nav-thread-comments-count {
@extend %forum-nav-thread-wrapper-2-content; @extend %forum-nav-thread-wrapper-2-content;
@extend %t-weight4; @extend %t-weight4;
position: relative; position: relative;
@include margin-left($baseline/4); @include margin-left($baseline/4);
margin-bottom: ($baseline/4); // Because tail is position: absolute margin-bottom: ($baseline/4); // Because tail is position: absolute
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
padding: ($baseline/10) ($baseline/5); padding: ($baseline/10) ($baseline/5);
min-width: 2em; // Fit most comment counts but allow expansion if necessary min-width: 2em; // Fit most comment counts but allow expansion if necessary
background-color: $gray-l4; background-color: $gray-l4;
// Speech bubble tail // Speech bubble tail
&:after { &:after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
bottom: (-$baseline/4); bottom: (-$baseline/4);
@include right($baseline/4); @include right($baseline/4);
width: 0; width: 0;
height: 0; height: 0;
border-style: solid; border-style: solid;
@include border-width(0, ($baseline/4), ($baseline/4), 0); @include border-width(0, ($baseline/4), ($baseline/4), 0);
@include border-color(transparent, $gray-l4, transparent, transparent); @include border-color(transparent, $gray-l4, transparent, transparent);
} }
} }
.forum-nav-load-more { .forum-nav-load-more {
border-bottom: 1px solid $forum-color-border; border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5; background-color: $gray-l5;
} }
%forum-nav-load-more-content { %forum-nav-load-more-content {
display: block; display: block;
padding: $baseline 0; padding: $baseline 0;
text-align: center; text-align: center;
} }
.forum-nav-load-more-link { .forum-nav-load-more-link {
@extend %forum-nav-load-more-content; @extend %forum-nav-load-more-content;
color: $link-color; color: $link-color;
&:hover, &:hover,
&:focus { &:focus {
color: $forum-color-active-text; color: $forum-color-active-text;
background-color: $forum-color-active-thread; background-color: $forum-color-active-thread;
} }
} }
.forum-nav-loading { .forum-nav-loading {
@extend %forum-nav-load-more-content; @extend %forum-nav-load-more-content;
} }
lms/static/sass/discussion/utilities/_shame.scss
...@@ -70,12 +70,6 @@ ...@@ -70,12 +70,6 @@
// The following rules would be unnecessary but for broadly scoped rules defined // The following rules would be unnecessary but for broadly scoped rules defined
// elsewhere in our CSS. // 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-] { li[class*=forum-nav-thread-label-] {
// Override global span rules // Override global span rules
span { span {
......
lms/static/sass/discussion/utilities/_variables-v1.scss
...@@ -16,6 +16,8 @@ $forum-color-border: $gray-l3 !default; ...@@ -16,6 +16,8 @@ $forum-color-border: $gray-l3 !default;
$forum-color-error: $red !default; $forum-color-error: $red !default;
$forum-color-hover-thread: $gray-d3 !default; $forum-color-hover-thread: $gray-d3 !default;
$forum-color-reading-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 images
$post-image-dimension: ($baseline*3) !default; // image size + margin $post-image-dimension: ($baseline*3) !default; // image size + margin
......
lms/static/sass/discussion/utilities/_variables-v2.scss
...@@ -5,17 +5,19 @@ ...@@ -5,17 +5,19 @@
$forum-color-background: $lms-container-background-color !default; $forum-color-background: $lms-container-background-color !default;
$forum-color-active-thread: $lms-active-color !default; $forum-color-active-thread: $lms-active-color !default;
$forum-color-active-text: $lms-container-background-color !default; $forum-color-active-text: $lms-container-background-color !default;
$forum-color-pinned: $pink !default; $forum-color-pinned: palette(secondary, dark) !default;
$forum-color-reported: $pink !default; $forum-color-reported: palette(secondary, dark) !default;
$forum-color-closed: $black !default; $forum-color-closed: $black !default;
$forum-color-following: $blue !default; $forum-color-following: palette(primary, base) !default;
$forum-color-staff: $blue !default; $forum-color-staff: palette(primary, base) !default;
$forum-color-community-ta: $green-d1 !default; $forum-color-community-ta: palette(success, text) !default;
$forum-color-marked-answer: $green-d1 !default; $forum-color-marked-answer: palette(success, text) !default;
$forum-color-border: palette(grayscale, base) !default; $forum-color-border: palette(grayscale, back) !default;
$forum-color-error: palette(error, accent) !default; $forum-color-error: palette(error, accent) !default;
$forum-color-hover-thread: palette(grayscale, dark) !default; $forum-color-hover-thread: palette(grayscale, x-back) !default;
$forum-color-reading-thread: palette(grayscale, dark) !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 images
$post-image-dimension: ($baseline*3) !default; // image size + margin $post-image-dimension: ($baseline*3) !default; // image size + margin
......
lms/static/sass/discussion/views/_thread.scss
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
.wrapper-post-header { .wrapper-post-header {
padding-bottom: 0; padding-bottom: 0;
margin-bottom: ($baseline*0.75);
} }
.post-header-content { .post-header-content {
...@@ -34,7 +33,7 @@ ...@@ -34,7 +33,7 @@
.posted-details { .posted-details {
@extend %t-copy-sub2; @extend %t-copy-sub2;
margin-top: ($baseline/5); margin: ($baseline/5) 0;
color: $gray-d1; color: $gray-d1;
.username { .username {
...@@ -178,6 +177,11 @@ body.discussion { ...@@ -178,6 +177,11 @@ body.discussion {
// Layout control for discussion modules that does not apply to the discussion board // Layout control for discussion modules that does not apply to the discussion board
.discussion-module { .discussion-module {
.discussion {
clear: both;
padding-top: ($baseline/2);
}
.btn-brand { .btn-brand {
@include blue-button; @include blue-button;
display: inline-block; display: inline-block;
......
lms/static/sass/shared-v2/_layouts.scss
...@@ -49,13 +49,10 @@ ...@@ -49,13 +49,10 @@
.form-actions > * { .form-actions > * {
@include margin-left($baseline/2); @include margin-left($baseline/2);
vertical-align: middle; vertical-align: middle;
min-width: 200px;
height: 34px; height: 34px;
} }
.form-actions > button { .form-actions > button {
padding: $baseline/5;
min-width: 200px;
height: 34px; height: 34px;
} }
......
lms/static/sass/shared-v2/_variables.scss
// LMS variables // LMS variables
$lms-gray: palette(grayscale, base); $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-container-background-color: $white;
$lms-border-color: palette(grayscale, back); $lms-border-color: palette(grayscale, back);
$lms-label-color: palette(grayscale, black); $lms-label-color: palette(grayscale, black);
......
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