Skip to content

E
edx-platform
Commit 4922d775 by Andy Armstrong
Options

Clean up discussion styles to be consistent across views

parent 81c4e170
Showing with 154 additions and 212 deletions
common/static/common/templates/discussion/thread-show.underscore
<div class="discussion-post"> <div class="discussion-post">
<header class="wrapper-post-header"> <header class="wrapper-post-header">
<% if (!readOnly) { %>
<div class="post-header-actions post-extended-content">
<%=
_.template(
$('#forum-actions').html())(
{
contentId: cid,
contentType: 'post',
primaryActions: ['vote', 'follow'],
secondaryActions: ['pin', 'edit', 'delete', 'report', 'close'],
readOnly: readOnly
}
)
%>
</div>
<% } %>
<div class="post-header-content"> <div class="post-header-content">
<h4 class="post-title"><%- title %></h4> <h4 class="post-title"><%- title %></h4>
<p class="posted-details"> <p class="posted-details">
...@@ -32,22 +48,6 @@ ...@@ -32,22 +48,6 @@
</span> </span>
</div> </div>
</div> </div>
<% if (!readOnly) { %>
<div class="post-header-actions post-extended-content">
<%=
_.template(
$('#forum-actions').html())(
{
contentId: cid,
contentType: 'post',
primaryActions: ['vote', 'follow'],
secondaryActions: ['pin', 'edit', 'delete', 'report', 'close'],
readOnly: readOnly
}
)
%>
</div>
<% } %>
</header> </header>
<div class="post-body"><%- body %></div> <div class="post-body"><%- body %></div>
......
common/static/common/templates/discussion/thread.underscore
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="post-extended-content thread-responses-wrapper"> <div class="post-extended-content thread-responses-wrapper">
<% if (!readOnly) { %> <% if (!readOnly) { %>
<div class="add-response"> <div class="add-response">
<button class="btn-brand btn-small add-response-btn"> <button class="btn btn-small add-response-btn">
<%- gettext("Add a Response") %> <%- gettext("Add a Response") %>
</button> </button>
</div> </div>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<ul class="discussion-errors"></ul> <ul class="discussion-errors"></ul>
<div class="reply-body" data-id="<%- id %>"></div> <div class="reply-body" data-id="<%- id %>"></div>
<div class="reply-post-control"> <div class="reply-post-control">
<button class="btn-brand discussion-submit-post control-button"><%- gettext("Submit") %></button> <button class="btn discussion-submit-post control-button"><%- gettext("Submit") %></button>
</div> </div>
</form> </form>
<% } %> <% } %>
......
lms/djangoapps/discussion/static/discussion/templates/search.underscore
...@@ -6,4 +6,4 @@ ...@@ -6,4 +6,4 @@
id="search" id="search"
placeholder="<%- gettext("Search all posts") %>" placeholder="<%- gettext("Search all posts") %>"
/> />
<button class="btn-brand btn-small search-btn" type="button"><%- gettext("Search") %></button> <button class="btn btn-small search-btn" type="button"><%- gettext("Search") %></button>
lms/djangoapps/discussion/templates/discussion/discussion_board.html
...@@ -67,7 +67,7 @@ DiscussionBoardFactory({ ...@@ -67,7 +67,7 @@ DiscussionBoardFactory({
## Add Post button ## Add Post button
% if has_permission(user, 'create_thread', course.id): % if has_permission(user, 'create_thread', course.id):
<div class="form-actions"> <div class="form-actions">
<button class="btn-brand btn-small new-post-btn">${_("Add a Post")}</button> <button class="btn btn-small new-post-btn">${_("Add a Post")}</button>
</div> </div>
% endif % endif
## Search box ## Search box
......
lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html
...@@ -20,7 +20,6 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str ...@@ -20,7 +20,6 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str
<%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default)}</%block> <%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default)}</%block>
<%block name="headextra"> <%block name="headextra">
<%static:css group='style-inline-discussion'/>
<%include file="_js_head_dependencies.html" /> <%include file="_js_head_dependencies.html" />
</%block> </%block>
......
lms/static/sass/discussion/_build.scss
...@@ -37,5 +37,6 @@ $static-path: '../..' !default; ...@@ -37,5 +37,6 @@ $static-path: '../..' !default;
@import 'views/create-edit-post'; @import 'views/create-edit-post';
@import 'views/response'; @import 'views/response';
@import 'views/search'; @import 'views/search';
@import 'views/inline';
@import 'utilities/developer'; @import 'utilities/developer';
@import 'utilities/shame'; @import 'utilities/shame';
lms/static/sass/discussion/_discussion.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// ==================== // ====================
// NOTE: this file is deprecated, and we should not continue to add to this file. Use other partials as appropriate. // NOTE: this file is deprecated, and we should not continue to add to this file. Use other partials as appropriate.
body.discussion { .discussion-body {
.edit-post-form { .edit-post-form {
@include clearfix(); @include clearfix();
...@@ -175,18 +175,17 @@ body.discussion { ...@@ -175,18 +175,17 @@ body.discussion {
} }
} }
.container .discussion-body { .discussion-body {
@include clearfix(); @include clearfix();
border: none; border: none;
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
line-height: 1.4;
.bottom-post-status { .bottom-post-status {
padding: 30px; padding: 30px;
font-size: $forum-x-large-font-size; font-size: $forum-x-large-font-size;
font-weight: 700; font-weight: 700;
color: $gray-l3; color: $forum-color-copy-light;
text-align: center; text-align: center;
} }
...@@ -196,14 +195,10 @@ body.discussion { ...@@ -196,14 +195,10 @@ body.discussion {
a { a {
word-wrap: break-word; word-wrap: break-word;
} }
p + p {
margin-top: $baseline;
}
} }
blockquote { blockquote {
background: $gray-l5; background: $forum-color-background-light;
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
...@@ -248,7 +243,6 @@ body.discussion { ...@@ -248,7 +243,6 @@ body.discussion {
.discussion-reply-new { .discussion-reply-new {
@include clearfix(); @include clearfix();
@include transition(opacity .2s linear 0s); @include transition(opacity .2s linear 0s);
padding: 0 ($baseline/2);
h4 { h4 {
font-size: $forum-large-font-size; font-size: $forum-large-font-size;
...@@ -432,6 +426,8 @@ section.discussion-pagination { ...@@ -432,6 +426,8 @@ section.discussion-pagination {
.response-count { .response-count {
@include float(right); @include float(right);
color: $forum-color-response-count;
font-size: $forum-base-font-size;
} }
.response-pagination { .response-pagination {
......
lms/static/sass/discussion/_layouts.scss
// Layouts for discussion pages // Layouts for discussion pages
@import '../course/base/extends'; @import '../course/base/extends';
.discussion-user-profile-board {
.discussion-profile-title {
margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size;
}
.discussion-profile-count {
margin-top: $baseline / 4;
}
.discussion-profile-info {
@include margin-right($baseline);
}
.user-name {
@include margin-right($baseline);
font-size: $forum-x-large-font-size;
}
.user-roles {
font-size: $forum-small-font-size;
font-style: italic;
}
.discussion-post .post-body {
width: 90%; // this page is full screen
}
.all-posts-btn {
padding: 0;
font-size: $forum-base-font-size;
}
.response-count {
@include margin-right($baseline / 4);
}
}
.discussion-column { .discussion-column {
min-height: 500px; min-height: 500px;
......
lms/static/sass/discussion/elements/_labels.scss
// discussion - elements - labels // discussion - elements - labels
// ==================== // ====================
.forum-nav-thread { .discussion {
.post-label { .post-label {
@include margin($baseline/4, $baseline/2, 0, 0); @include margin($baseline/4, $baseline/2, 0, 0);
@extend %t-weight4;
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
font-weight: 100;
display: inline; display: inline;
white-space: nowrap; white-space: nowrap;
......
lms/static/sass/discussion/utilities/_developer.scss
...@@ -17,66 +17,64 @@ ...@@ -17,66 +17,64 @@
// provisional styling for "search alerts" (messages boxes that appear in the sidebar below the search // provisional styling for "search alerts" (messages boxes that appear in the sidebar below the search
// input field with notices pertaining to the search result). // input field with notices pertaining to the search result).
// -------------------- // --------------------
body.discussion {
.forum-nav { .forum-nav {
// wrapper for multiple alerts // wrapper for multiple alerts
.search-alerts { .search-alerts {
} }
// a single alert, which can be independently displayed / dismissed
.search-alert {
@include transition(none);
padding: ($baseline/2) 11px ($baseline/2) 18px;
background-color: $black;
}
.search-alert-content, .search-alert-controls { // a single alert, which can be independently displayed / dismissed
display: inline-block; .search-alert {
vertical-align: middle; @include transition(none);
} padding: ($baseline/2) 11px ($baseline/2) 18px;
background-color: $black;
}
// alert content .search-alert-content, .search-alert-controls {
.search-alert-content { display: inline-block;
width: 70%; vertical-align: middle;
}
// alert copy // alert content
.message { .search-alert-content {
font-size: $forum-small-font-size; width: 70%;
color: $white;
em { // alert copy
@extend %t-weight5; .message {
font-style: italic; font-size: $forum-small-font-size;
} color: $white;
}
// links to jump to users/content in alerts em {
.link-jump {
@include transition(none);
@extend %t-weight5; @extend %t-weight5;
font-style: italic;
} }
} }
// alert controls // links to jump to users/content in alerts
.search-alert-controls { .link-jump {
@include text-align(right); @include transition(none);
width: 28%; @extend %t-weight5;
}
}
.control { // alert controls
@include transition(none); .search-alert-controls {
@extend %t-weight5; @include text-align(right);
padding: ($baseline/4) ($baseline/2); width: 28%;
color: $white;
font-size: $forum-base-font-size; .control {
@include transition(none);
@extend %t-weight5;
padding: ($baseline/4) ($baseline/2);
color: $white;
font-size: $forum-base-font-size;
// reseting poorly globally scoped hover/focus state for this control // reseting poorly globally scoped hover/focus state for this control
&:hover, &:focus { &:hover, &:focus {
color: $white; color: $white;
text-decoration: none; text-decoration: none;
}
} }
} }
} }
......
lms/static/sass/discussion/utilities/_shame.scss
...@@ -118,7 +118,20 @@ li[class*=forum-nav-thread-label-] { ...@@ -118,7 +118,20 @@ li[class*=forum-nav-thread-label-] {
// ------- // -------
.discussion-module { .discussion-module {
.wrapper-post-header .post-title { .wrapper-post-header {
margin-bottom: 0 !important; // overrides "#seq_content h1" styling margin-bottom: 0 !important; // overrides default header styling
padding-bottom: 0 !important; // overrides default header styling
.posted-details {
margin: ($baseline/5) 0 !important; // overrides courseware p styling
}
.post-labels {
font-size: $forum-base-font-size; // overrides default heading styling
}
.post-title {
margin-bottom: 0 !important; // overrides "#seq_content h1" styling
}
} }
} }
lms/static/sass/discussion/utilities/_variables-v1.scss
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
// base color variables // base color variables
$forum-color-primary: $blue !default; $forum-color-primary: $blue !default;
$forum-color-copy-light: rgb(65, 65, 65) !default;
$forum-color-background-light: rgb(245, 245, 245) !default;
// contextual color variables // contextual color variables
$forum-color-background: $white; $forum-color-background: $white;
...@@ -18,13 +20,13 @@ $forum-color-community-ta: $green-d1 !default; ...@@ -18,13 +20,13 @@ $forum-color-community-ta: $green-d1 !default;
$forum-color-marked-answer: $green-d1 !default; $forum-color-marked-answer: $green-d1 !default;
$forum-color-border: $gray-l3 !default; $forum-color-border: $gray-l3 !default;
$forum-color-error: $red !default; $forum-color-error: $red !default;
$forum-color-hover-thread: #f6f6f6 !default; $forum-color-hover-thread: $forum-color-background-light !default;
$forum-color-reading-thread: $gray-d3 !default; $forum-color-reading-thread: $forum-color-background-light !default;
$forum-color-read-post: $gray-d3 !default; $forum-color-read-post: $gray-d3 !default;
$forum-color-never-read-post: $forum-color-primary !default; $forum-color-never-read-post: $forum-color-primary !default;
$forum-color-editor-preview-label: $gray-d2 !default; $forum-color-editor-preview-label: $gray-d2 !default;
$forum-color-response-count: $gray-d2 !default; $forum-color-response-count: $gray-d2 !default;
$forum-color-navigation-bar: #f6f6f6 !default; $forum-color-navigation-bar: $forum-color-background-light !default;
$forum-color-count: $gray-d3 !default; $forum-color-count: $gray-d3 !default;
$forum-color-background-label: $gray-d2 !default; $forum-color-background-label: $gray-d2 !default;
......
lms/static/sass/discussion/utilities/_variables-v2.scss
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
// base color variables // base color variables
$forum-color-primary: palette(primary, base) !default; $forum-color-primary: palette(primary, base) !default;
$forum-color-copy-light: palette(grayscale, base) !default;
$forum-color-background-light: palette(grayscale, x-back) !default;
// contextual color variables // contextual color variables
$forum-color-background: $lms-container-background-color !default; $forum-color-background: $lms-container-background-color !default;
...@@ -18,13 +20,13 @@ $forum-color-community-ta: palette(success, text) !default; ...@@ -18,13 +20,13 @@ $forum-color-community-ta: palette(success, text) !default;
$forum-color-marked-answer: palette(success, text) !default; $forum-color-marked-answer: palette(success, text) !default;
$forum-color-border: palette(grayscale, back) !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, x-back) !default; $forum-color-hover-thread: $forum-color-background-light !default;
$forum-color-reading-thread: palette(grayscale, x-back) !default; $forum-color-reading-thread: $forum-color-background-light !default;
$forum-color-read-post: palette(grayscale, base) !default; $forum-color-read-post: palette(grayscale, base) !default;
$forum-color-never-read-post: $forum-color-primary !default; $forum-color-never-read-post: $forum-color-primary !default;
$forum-color-editor-preview-label: palette(grayscale, base) !default; $forum-color-editor-preview-label: palette(grayscale, base) !default;
$forum-color-response-count: palette(grayscale, base) !default; $forum-color-response-count: palette(grayscale, base) !default;
$forum-color-navigation-bar: palette(grayscale, x-back) !default; $forum-color-navigation-bar: $forum-color-background-light !default;
$forum-color-count: palette(grayscale, base) !default; $forum-color-count: palette(grayscale, base) !default;
$forum-color-background-label: palette(grayscale, base) !default; $forum-color-background-label: palette(grayscale, base) !default;
......
lms/static/sass/discussion/views/_thread.scss
...@@ -13,42 +13,28 @@ ...@@ -13,42 +13,28 @@
.discussion-post { .discussion-post {
padding: 0 ($baseline/2); padding: 0 ($baseline/2);
.wrapper-post-header {
padding-bottom: $baseline;
}
.post-header-content {
display: inline-block;
width: flex-grid(9,12);
}
.post-header-actions { .post-header-actions {
@include float(right); @include float(right);
} }
.post-body { .posted-details {
@include float(left); @extend %t-copy-sub2;
width: flex-grid(10,12); margin: ($baseline/5) 0;
} color: $forum-color-copy-light;
.post-context {
@include float(left);
}
}
.posted-details { .username {
@extend %t-copy-sub2; @extend %t-strong;
margin: ($baseline/5) 0; display: inline;
color: $gray-d1; }
.username { .timeago, .top-post-status {
@extend %t-strong; color: inherit;
display: inline; }
} }
}
.timeago, .top-post-status { .thread-responses-wrapper {
color: inherit; padding: 0 ($baseline/2);
}
} }
// response layout // response layout
...@@ -67,6 +53,11 @@ ...@@ -67,6 +53,11 @@
position: absolute; position: absolute;
top: $baseline; top: $baseline;
} }
// response body
.response-body {
@extend %t-copy-sub1;
}
} }
// comments layout // comments layout
...@@ -79,7 +70,7 @@ ...@@ -79,7 +70,7 @@
width: flex-grid(10,12); width: flex-grid(10,12);
p + p { p + p {
margin-top: 12px; margin-top: ($baseline/2);
} }
} }
...@@ -99,55 +90,50 @@ ...@@ -99,55 +90,50 @@
} }
// +thread - elements - shared styles // +thread - elements - shared styles
body.discussion { .discussion-post, .discussion-response, .discussion-comment {
@include clearfix();
.discussion-post, .discussion-response, .discussion-comment {
@include clearfix();
// thread - images // thread - images
.author-image { .author-image {
@include margin-right($baseline/2); @include margin-right($baseline/2);
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
// STATE: No profile image // STATE: No profile image
&:empty { &:empty {
display: none; display: none;
} }
// CASE: post image // CASE: post image
&.level-post { &.level-post {
height: $post-image-dimension; height: $post-image-dimension;
width: $post-image-dimension; width: $post-image-dimension;
} }
// CASE: response image // CASE: response image
&.level-response { &.level-response {
height: $response-image-dimension; height: $response-image-dimension;
width: $response-image-dimension; width: $response-image-dimension;
} }
// CASE: comment image // CASE: comment image
&.level-comment { &.level-comment {
height: $comment-image-dimension; height: $comment-image-dimension;
width: $comment-image-dimension; width: $comment-image-dimension;
} }
img { img {
border-radius: $forum-border-radius; border-radius: $forum-border-radius;
}
} }
} }
}
.discussion-response .response-body { .discussion-response .response-body {
@include padding-right($baseline); //ensures content doesn't overlap on post or response actions. @include padding-right($baseline); //ensures content doesn't overlap on post or response actions.
}
} }
// +post - individual element styling // +post - individual element styling
// NOTE: discussion-article is used for inline discussion modules. .discussion-post {
.discussion-post,
.discussion-article {
@include clearfix(); @include clearfix();
.post-header-content { .post-header-content {
...@@ -162,24 +148,19 @@ body.discussion { ...@@ -162,24 +148,19 @@ body.discussion {
// post body // post body
.post-body { .post-body {
@extend %t-copy-sub1; @extend %t-copy-sub1;
// clear: both; //TO-DO: confirm that removing this is ok for all cases of discussion posts. padding: ($baseline/2) 0;
} }
// post context // post context
.post-context { .post-context {
@extend %t-copy-sub2; @extend %t-copy-sub2;
margin-top: $baseline; color: $forum-color-copy-light;
color: $gray-d1; font-weight: 100;
// CASE: no courseware context or cohort visibility rules // CASE: no courseware context or cohort visibility rules
&:empty { &:empty {
display: none; display: none;
} }
// post visibility - cohorts
.group-visibility-label {
margin-top: ($baseline/4);
}
} }
} }
...@@ -193,10 +174,6 @@ body.discussion { ...@@ -193,10 +174,6 @@ body.discussion {
margin-bottom: 0; margin-bottom: 0;
} }
.thread-main-wrapper, .thread-responses-wrapper {
padding: $baseline;
}
.discussion-article { .discussion-article {
@include transition(all .2s linear 0s); @include transition(all .2s linear 0s);
border: 1px solid $forum-color-border; border: 1px solid $forum-color-border;
...@@ -290,13 +267,6 @@ body.discussion { ...@@ -290,13 +267,6 @@ body.discussion {
} }
} }
// Custom styling for the list of user threads
.discussion-user-threads {
.discussion-post {
padding: $baseline/2;
}
}
.thread-wrapper, .thread-wrapper,
.forum-new-post-form { .forum-new-post-form {
img { img {
......
lms/templates/ux/reference/course-skeleton.html
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
id="search" id="search"
placeholder="Search all the things" placeholder="Search all the things"
/> />
<button class="btn-brand btn-small search-btn" type="button">Search</button> <button class="btn btn-small search-btn" type="button">Search</button>
</form> </form>
</div> </div>
</div> </div>
......
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