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 178 additions and 157 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();
} }
} }
}); });
......
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;
.icon {
@include margin-right($baseline/5);
}
&.is-hidden {
display: none;
}
&.post-label-pinned {
color: $forum-color-pinned;
} }
.post-label-following { &.post-label-following {
@include forum-post-label($forum-color-following); color: $forum-color-following;
} }
.post-label-reported { &.post-label-reported {
@include forum-post-label($forum-color-reported); color: $forum-color-reported;
} }
.post-label-closed { &.post-label-closed {
@include forum-post-label($forum-color-closed); color: $forum-color-closed;
} }
.post-label-by-staff { &.post-label-by-staff {
@include forum-post-label($forum-color-staff); color: $forum-color-staff;
} }
.post-label-by-community-ta { &.post-label-by-community-ta {
@include forum-post-label($forum-color-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
...@@ -195,8 +195,14 @@ ...@@ -195,8 +195,14 @@
// Thread list // Thread list
// ----------- // -----------
.forum-nav-thread-list { .forum-nav-thread-list {
margin: 0;
padding-left: 0;
overflow-y: scroll; overflow-y: scroll;
list-style: none; list-style: none;
.forum-nav-thread-labels {
margin: 5px 0 0;
}
} }
.forum-nav-thread { .forum-nav-thread {
...@@ -204,49 +210,43 @@ ...@@ -204,49 +210,43 @@
background-color: $forum-color-background; background-color: $forum-color-background;
margin-bottom: 0; margin-bottom: 0;
&.is-unread { .forum-nav-thread-link {
background: $forum-color-background; @include border-left(3px solid transparent);
color: $blue-d1; display: flex;
.forum-nav-thread-comments-count {
background-color: tint($blue-d1, 90%);;
color: $blue-d1;
&:after {
border-right-color: tint($blue-d1, 90%);;
}
}
}
}
.forum-nav-thread-link {
display: block;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
transition: none; 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,
&:hover {
.forum-nav-thread-labels > li { .forum-nav-thread-labels > li {
border-color: $forum-color-background; border-color: $forum-color-background;
color: $forum-color-background; color: $forum-color-background;
} }
.forum-nav-thread-votes-count {
color: $forum-color-background;
}
.forum-nav-thread-comments-count { .forum-nav-thread-comments-count {
background-color: $forum-color-background;
color: $base-font-color; color: $base-font-color;
&:after { &:after {
border-right-color: $gray-l4; border-right-color: $forum-color-border;
} }
} }
...@@ -255,17 +255,18 @@ ...@@ -255,17 +255,18 @@
} }
} }
.forum-nav-thread-comments-count { .forum-nav-thread-unread-comments-count {
display: inline-block;
// topic read, but has unread comments font-size: $forum-small-font-size;
&.is-unread { white-space: nowrap;
background-color: $blue-d1;
color: $white;
&:after {
border-right-color: $blue-d1;
} }
} }
&.never-read {
.forum-nav-thread-link {
@include border-left(3px solid $forum-color-never-read-post);
color: $forum-color-never-read-post;
}
} }
} }
...@@ -276,10 +277,12 @@ ...@@ -276,10 +277,12 @@
.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 {
...@@ -288,34 +291,24 @@ ...@@ -288,34 +291,24 @@
} }
} }
} }
.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 {
......
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