diff --git a/common/static/common/templates/discussion/thread-show.underscore b/common/static/common/templates/discussion/thread-show.underscore index 40a6a69161..bf8aab3bdc 100644 --- a/common/static/common/templates/discussion/thread-show.underscore +++ b/common/static/common/templates/discussion/thread-show.underscore @@ -1,5 +1,21 @@
+ <% if (!readOnly) { %> +
+ <%= + _.template( + $('#forum-actions').html())( + { + contentId: cid, + contentType: 'post', + primaryActions: ['vote', 'follow'], + secondaryActions: ['pin', 'edit', 'delete', 'report', 'close'], + readOnly: readOnly + } + ) + %> +
+ <% } %>

<%- title %>

@@ -32,22 +48,6 @@

- <% if (!readOnly) { %> -
- <%= - _.template( - $('#forum-actions').html())( - { - contentId: cid, - contentType: 'post', - primaryActions: ['vote', 'follow'], - secondaryActions: ['pin', 'edit', 'delete', 'report', 'close'], - readOnly: readOnly - } - ) - %> -
- <% } %>
<%- body %>
diff --git a/common/static/common/templates/discussion/thread.underscore b/common/static/common/templates/discussion/thread.underscore index 305575a160..23520e68d9 100644 --- a/common/static/common/templates/discussion/thread.underscore +++ b/common/static/common/templates/discussion/thread.underscore @@ -9,7 +9,7 @@
<% if (!readOnly) { %>
-
@@ -26,7 +26,7 @@
- +
<% } %> diff --git a/lms/djangoapps/discussion/static/discussion/templates/search.underscore b/lms/djangoapps/discussion/static/discussion/templates/search.underscore index 3f289ce2a5..d1372529f3 100644 --- a/lms/djangoapps/discussion/static/discussion/templates/search.underscore +++ b/lms/djangoapps/discussion/static/discussion/templates/search.underscore @@ -6,4 +6,4 @@ id="search" placeholder="<%- gettext("Search all posts") %>" /> - + diff --git a/lms/djangoapps/discussion/templates/discussion/discussion_board.html b/lms/djangoapps/discussion/templates/discussion/discussion_board.html index a6cc5cfe1e..03f07ca09d 100644 --- a/lms/djangoapps/discussion/templates/discussion/discussion_board.html +++ b/lms/djangoapps/discussion/templates/discussion/discussion_board.html @@ -67,7 +67,7 @@ DiscussionBoardFactory({ ## Add Post button % if has_permission(user, 'create_thread', course.id):
- +
% endif ## Search box diff --git a/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html b/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html index 04ec54f625..a727028d38 100644 --- a/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html +++ b/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 <%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default)} <%block name="headextra"> -<%static:css group='style-inline-discussion'/> <%include file="_js_head_dependencies.html" /> diff --git a/lms/static/sass/discussion/_build.scss b/lms/static/sass/discussion/_build.scss index a5ed2f4d2c..299d6f3c84 100644 --- a/lms/static/sass/discussion/_build.scss +++ b/lms/static/sass/discussion/_build.scss @@ -37,5 +37,6 @@ $static-path: '../..' !default; @import 'views/create-edit-post'; @import 'views/response'; @import 'views/search'; +@import 'views/inline'; @import 'utilities/developer'; @import 'utilities/shame'; diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 275bd1ecf0..2835cd7514 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -2,7 +2,7 @@ // ==================== // 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 { @include clearfix(); @@ -175,18 +175,17 @@ body.discussion { } } -.container .discussion-body { +.discussion-body { @include clearfix(); border: none; background: transparent; box-shadow: none; - line-height: 1.4; .bottom-post-status { padding: 30px; font-size: $forum-x-large-font-size; font-weight: 700; - color: $gray-l3; + color: $forum-color-copy-light; text-align: center; } @@ -196,14 +195,10 @@ body.discussion { a { word-wrap: break-word; } - - p + p { - margin-top: $baseline; - } } blockquote { - background: $gray-l5; + background: $forum-color-background-light; border-radius: $forum-border-radius; padding: ($baseline/4) ($baseline/2); font-size: $forum-base-font-size; @@ -248,7 +243,6 @@ body.discussion { .discussion-reply-new { @include clearfix(); @include transition(opacity .2s linear 0s); - padding: 0 ($baseline/2); h4 { font-size: $forum-large-font-size; @@ -432,6 +426,8 @@ section.discussion-pagination { .response-count { @include float(right); + color: $forum-color-response-count; + font-size: $forum-base-font-size; } .response-pagination { diff --git a/lms/static/sass/discussion/_layouts.scss b/lms/static/sass/discussion/_layouts.scss index 90d78a7bd2..b9d51ed81d 100644 --- a/lms/static/sass/discussion/_layouts.scss +++ b/lms/static/sass/discussion/_layouts.scss @@ -1,45 +1,6 @@ // Layouts for discussion pages @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 { min-height: 500px; diff --git a/lms/static/sass/discussion/elements/_labels.scss b/lms/static/sass/discussion/elements/_labels.scss index 66d0e56047..2ee199bed6 100644 --- a/lms/static/sass/discussion/elements/_labels.scss +++ b/lms/static/sass/discussion/elements/_labels.scss @@ -1,11 +1,11 @@ // discussion - elements - labels // ==================== -.forum-nav-thread { +.discussion { .post-label { @include margin($baseline/4, $baseline/2, 0, 0); - @extend %t-weight4; font-size: $forum-small-font-size; + font-weight: 100; display: inline; white-space: nowrap; diff --git a/lms/static/sass/discussion/utilities/_developer.scss b/lms/static/sass/discussion/utilities/_developer.scss index a45a4b0aa0..831c21a556 100644 --- a/lms/static/sass/discussion/utilities/_developer.scss +++ b/lms/static/sass/discussion/utilities/_developer.scss @@ -17,66 +17,64 @@ // provisional styling for "search alerts" (messages boxes that appear in the sidebar below the search // input field with notices pertaining to the search result). // -------------------- -body.discussion { - .forum-nav { +.forum-nav { - // wrapper for multiple alerts - .search-alerts { + // wrapper for multiple 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 { + display: inline-block; + vertical-align: middle; + } + + // alert content + .search-alert-content { + width: 70%; + + // alert copy + .message { + font-size: $forum-small-font-size; + color: $white; + + em { + @extend %t-weight5; + font-style: italic; + } } - // a single alert, which can be independently displayed / dismissed - .search-alert { + // links to jump to users/content in alerts + .link-jump { @include transition(none); - padding: ($baseline/2) 11px ($baseline/2) 18px; - background-color: $black; + @extend %t-weight5; } + } - .search-alert-content, .search-alert-controls { - display: inline-block; - vertical-align: middle; - } + // alert controls + .search-alert-controls { + @include text-align(right); + width: 28%; - // alert content - .search-alert-content { - width: 70%; + .control { + @include transition(none); + @extend %t-weight5; + padding: ($baseline/4) ($baseline/2); + color: $white; + font-size: $forum-base-font-size; - // alert copy - .message { - font-size: $forum-small-font-size; + // reseting poorly globally scoped hover/focus state for this control + &:hover, &:focus { color: $white; - - em { - @extend %t-weight5; - font-style: italic; - } - } - - // links to jump to users/content in alerts - .link-jump { - @include transition(none); - @extend %t-weight5; - } - } - - // alert controls - .search-alert-controls { - @include text-align(right); - width: 28%; - - .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 - &:hover, &:focus { - color: $white; - text-decoration: none; - } + text-decoration: none; } } } diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index d04a574fe7..31f1713ede 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/lms/static/sass/discussion/utilities/_shame.scss @@ -118,7 +118,20 @@ li[class*=forum-nav-thread-label-] { // ------- .discussion-module { - .wrapper-post-header .post-title { - margin-bottom: 0 !important; // overrides "#seq_content h1" styling + .wrapper-post-header { + 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 + } } } diff --git a/lms/static/sass/discussion/utilities/_variables-v1.scss b/lms/static/sass/discussion/utilities/_variables-v1.scss index a51f9b7c44..79879c6058 100644 --- a/lms/static/sass/discussion/utilities/_variables-v1.scss +++ b/lms/static/sass/discussion/utilities/_variables-v1.scss @@ -3,6 +3,8 @@ // base color variables $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 $forum-color-background: $white; @@ -18,13 +20,13 @@ $forum-color-community-ta: $green-d1 !default; $forum-color-marked-answer: $green-d1 !default; $forum-color-border: $gray-l3 !default; $forum-color-error: $red !default; -$forum-color-hover-thread: #f6f6f6 !default; -$forum-color-reading-thread: $gray-d3 !default; +$forum-color-hover-thread: $forum-color-background-light !default; +$forum-color-reading-thread: $forum-color-background-light !default; $forum-color-read-post: $gray-d3 !default; $forum-color-never-read-post: $forum-color-primary !default; $forum-color-editor-preview-label: $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-background-label: $gray-d2 !default; diff --git a/lms/static/sass/discussion/utilities/_variables-v2.scss b/lms/static/sass/discussion/utilities/_variables-v2.scss index ab5c416728..b33d1f211a 100644 --- a/lms/static/sass/discussion/utilities/_variables-v2.scss +++ b/lms/static/sass/discussion/utilities/_variables-v2.scss @@ -3,6 +3,8 @@ // base color variables $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 $forum-color-background: $lms-container-background-color !default; @@ -18,13 +20,13 @@ $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, x-back) !default; -$forum-color-reading-thread: palette(grayscale, x-back) !default; +$forum-color-hover-thread: $forum-color-background-light !default; +$forum-color-reading-thread: $forum-color-background-light !default; $forum-color-read-post: palette(grayscale, base) !default; $forum-color-never-read-post: $forum-color-primary !default; $forum-color-editor-preview-label: 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-background-label: palette(grayscale, base) !default; diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index 5201e6514a..20ab26f958 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -13,42 +13,28 @@ .discussion-post { padding: 0 ($baseline/2); - .wrapper-post-header { - padding-bottom: $baseline; - } - - .post-header-content { - display: inline-block; - width: flex-grid(9,12); - } - .post-header-actions { @include float(right); } - .post-body { - @include float(left); - width: flex-grid(10,12); - } + .posted-details { + @extend %t-copy-sub2; + margin: ($baseline/5) 0; + color: $forum-color-copy-light; - .post-context { - @include float(left); + .username { + @extend %t-strong; + display: inline; + } + + .timeago, .top-post-status { + color: inherit; + } } } -.posted-details { - @extend %t-copy-sub2; - margin: ($baseline/5) 0; - color: $gray-d1; - - .username { - @extend %t-strong; - display: inline; - } - - .timeago, .top-post-status { - color: inherit; - } +.thread-responses-wrapper { + padding: 0 ($baseline/2); } // response layout @@ -67,6 +53,11 @@ position: absolute; top: $baseline; } + + // response body + .response-body { + @extend %t-copy-sub1; + } } // comments layout @@ -79,7 +70,7 @@ width: flex-grid(10,12); p + p { - margin-top: 12px; + margin-top: ($baseline/2); } } @@ -99,55 +90,50 @@ } // +thread - elements - shared styles -body.discussion { +.discussion-post, .discussion-response, .discussion-comment { + @include clearfix(); - .discussion-post, .discussion-response, .discussion-comment { - @include clearfix(); + // thread - images + .author-image { + @include margin-right($baseline/2); + display: inline-block; + vertical-align: top; - // thread - images - .author-image { - @include margin-right($baseline/2); - display: inline-block; - vertical-align: top; - - // STATE: No profile image - &:empty { - display: none; - } - - // CASE: post image - &.level-post { - height: $post-image-dimension; - width: $post-image-dimension; - } - - // CASE: response image - &.level-response { - height: $response-image-dimension; - width: $response-image-dimension; - } - - // CASE: comment image - &.level-comment { - height: $comment-image-dimension; - width: $comment-image-dimension; - } - - img { - border-radius: $forum-border-radius; - } + // STATE: No profile image + &:empty { + display: none; } - } - .discussion-response .response-body { - @include padding-right($baseline); //ensures content doesn't overlap on post or response actions. + // CASE: post image + &.level-post { + height: $post-image-dimension; + width: $post-image-dimension; + } + + // CASE: response image + &.level-response { + height: $response-image-dimension; + width: $response-image-dimension; + } + + // CASE: comment image + &.level-comment { + height: $comment-image-dimension; + width: $comment-image-dimension; + } + + img { + border-radius: $forum-border-radius; + } } } +.discussion-response .response-body { + @include padding-right($baseline); //ensures content doesn't overlap on post or response actions. +} + // +post - individual element styling -// NOTE: discussion-article is used for inline discussion modules. -.discussion-post, -.discussion-article { +.discussion-post { @include clearfix(); .post-header-content { @@ -162,24 +148,19 @@ body.discussion { // post body .post-body { @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 { @extend %t-copy-sub2; - margin-top: $baseline; - color: $gray-d1; + color: $forum-color-copy-light; + font-weight: 100; // CASE: no courseware context or cohort visibility rules &:empty { display: none; } - - // post visibility - cohorts - .group-visibility-label { - margin-top: ($baseline/4); - } } } @@ -193,10 +174,6 @@ body.discussion { margin-bottom: 0; } - .thread-main-wrapper, .thread-responses-wrapper { - padding: $baseline; - } - .discussion-article { @include transition(all .2s linear 0s); border: 1px solid $forum-color-border; @@ -290,13 +267,6 @@ body.discussion { } } -// Custom styling for the list of user threads -.discussion-user-threads { - .discussion-post { - padding: $baseline/2; - } -} - .thread-wrapper, .forum-new-post-form { img { diff --git a/lms/templates/ux/reference/course-skeleton.html b/lms/templates/ux/reference/course-skeleton.html index daf1cf7983..8e6a9a937f 100644 --- a/lms/templates/ux/reference/course-skeleton.html +++ b/lms/templates/ux/reference/course-skeleton.html @@ -56,7 +56,7 @@ id="search" placeholder="Search all the things" /> - +