diff --git a/common/static/common/templates/discussion/discussion-home.underscore b/common/static/common/templates/discussion/discussion-home.underscore index d06a4205fc..b736c977d4 100644 --- a/common/static/common/templates/discussion/discussion-home.underscore +++ b/common/static/common/templates/discussion/discussion-home.underscore @@ -1,4 +1,4 @@ -
+
<%- gettext("DISCUSSION HOME:") %> <% if (window.courseName) { %> diff --git a/common/static/common/templates/discussion/forum-action-answer.underscore b/common/static/common/templates/discussion/forum-action-answer.underscore index 6f10e860ed..fedccc76f4 100644 --- a/common/static/common/templates/discussion/forum-action-answer.underscore +++ b/common/static/common/templates/discussion/forum-action-answer.underscore @@ -5,6 +5,6 @@ <%- gettext("Mark as Answer") %> <%- gettext("Unmark as Answer") %> - + diff --git a/common/static/common/templates/discussion/forum-action-endorse.underscore b/common/static/common/templates/discussion/forum-action-endorse.underscore index 98d3fd174b..dfa400bffc 100644 --- a/common/static/common/templates/discussion/forum-action-endorse.underscore +++ b/common/static/common/templates/discussion/forum-action-endorse.underscore @@ -5,6 +5,6 @@ <%- gettext("Endorse") %> <%- gettext("Unendorse") %> - + diff --git a/common/static/common/templates/discussion/response-comment-show.underscore b/common/static/common/templates/discussion/response-comment-show.underscore index 5dbf579afb..9733a0d0c4 100644 --- a/common/static/common/templates/discussion/response-comment-show.underscore +++ b/common/static/common/templates/discussion/response-comment-show.underscore @@ -1,4 +1,4 @@ -
+
<%- body %>
<%= _.template( diff --git a/common/static/common/templates/discussion/thread-response-show.underscore b/common/static/common/templates/discussion/thread-response-show.underscore index 60b6b82a4d..ffb19a4fa7 100644 --- a/common/static/common/templates/discussion/thread-response-show.underscore +++ b/common/static/common/templates/discussion/thread-response-show.underscore @@ -1,4 +1,4 @@ -
+
<%= author_display %>

diff --git a/common/static/common/templates/discussion/thread-show.underscore b/common/static/common/templates/discussion/thread-show.underscore index c28e0859c4..35b3996938 100644 --- a/common/static/common/templates/discussion/thread-show.underscore +++ b/common/static/common/templates/discussion/thread-show.underscore @@ -1,21 +1,7 @@

-
-
- <% if (obj.group_name) { %> - <%- - interpolate( - gettext('This post is visible only to %(group_name)s.'), - {group_name: obj.group_name}, - true - ) - %> - <% } else { %> - <%- gettext('This post is visible to everyone.') %> - <% } %> -
- +
-

<%- title %>

+

<%- title %>

<% var timeAgoHtml = interpolate( @@ -59,16 +45,15 @@

<%- body %>
- - <% if (mode == "tab" && obj.courseware_url) { %> - <% - var courseware_title_linked = interpolate( - '%(courseware_title)s', - {courseware_url: courseware_url, courseware_title: _.escape(courseware_title)}, - true - ); - %> -
+
+ <% if (mode == "tab" && obj.courseware_url) { %> + <% + var courseware_title_linked = interpolate( + '%(courseware_title)s', + {courseware_url: courseware_url, courseware_title: _.escape(courseware_title)}, + true + ); + %> <%= interpolate( _.escape(gettext('Related to: %(courseware_title_linked)s')), @@ -76,6 +61,19 @@ true ) %> + <% } %> +
+ <% if (obj.group_name) { %> + <%- + interpolate( + gettext('This post is visible only to %(group_name)s.'), + {group_name: obj.group_name}, + true + ) + %> + <% } else { %> + <%- gettext('This post is visible to everyone.') %> + <% } %>
- <% } %> +
diff --git a/lms/static/sass/_build-lms.scss b/lms/static/sass/_build-lms.scss index 5d132a2ec9..8787a7b4d5 100644 --- a/lms/static/sass/_build-lms.scss +++ b/lms/static/sass/_build-lms.scss @@ -55,14 +55,15 @@ @import 'views/support'; @import 'course/auto-cert'; -// applications +// app - discussion @import "discussion/utilities/variables"; @import "discussion/mixins"; -@import 'discussion/discussion'; // Process old file after definitions but before everything else +@import 'discussion/discussion'; // Process old file after definitions but before everything else, partial is deprecated. @import "discussion/elements/actions"; @import "discussion/elements/editor"; @import "discussion/elements/labels"; @import "discussion/elements/navigation"; +@import "discussion/views/home"; @import "discussion/views/thread"; @import "discussion/views/create-edit-post"; @import "discussion/views/response"; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 06ac2a00b2..eb341a7c94 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -1,3 +1,7 @@ +// lms - base courseware styling +// ==================== +// NOTE: this file is deprecated, and we should not continue to add to this file. Use other partials as appropriate. + html { height: 100%; max-height: 100%; diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 09181d0012..ef4e1c6764 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -1,5 +1,6 @@ // forums - main app styling // ==================== +// NOTE: this file is deprecated, and we should not continue to add to this file. Use other partials as appropriate. body.discussion { @@ -21,9 +22,8 @@ body.discussion { .edit-post-form { @include clearfix(); - margin-bottom: ($baseline*2); - width: 100%; @include box-sizing(border-box); + width: 100%; h1 { font-size: 20px; @@ -110,7 +110,6 @@ body.discussion { } .wmd-panel { - min-width: 500px; width: 100%; } @@ -120,14 +119,14 @@ body.discussion { } .wmd-input { + @include border-radius(3px, 3px, 0, 0); border: 1px solid $gray-l3; - border-radius: 3px 3px 0 0; width: 100%; height: 150px; background-color: $gray-l4; font-style: normal; font-size: 0.8em; - font-family: Monaco, 'Lucida Console', monospace; + font-family: $f-sans-serif; line-height: 1.6em; &::-webkit-input-placeholder { @@ -137,18 +136,17 @@ body.discussion { .wmd-button-row { @include transition(all .2s ease-out 0s); + @include margin(($baseline/2), ($baseline/4), ($baseline/4), ($baseline/4)); position: relative; overflow: hidden; - margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4); padding: 0; height: 20px; } .wmd-spacer { - + @include margin-left(14px); position: absolute; display: inline-block; - margin-left: 14px; width: 1px; height: 20px; background-color: Silver; @@ -156,10 +154,10 @@ body.discussion { } .wmd-button { + @include padding-right(3px); + @include padding-left(3px); position: absolute; display: inline-block; - padding-right: 3px; - padding-left: 2px; width: 20px; height: 20px; background: none; @@ -177,14 +175,14 @@ body.discussion { } .wmd-spacer1 { - left: 50px; + @include left(50px); } .wmd-spacer2 { - left: 175px; + @include left(175px); } .wmd-spacer3 { - left: 300px; + @include left(300px); } .wmd-prompt-background { @@ -201,7 +199,7 @@ body.discussion { > div { font-size: 0.8em; - font-family: arial, helvetica, sans-serif; + font-family: $sans-serif; } b { @@ -253,167 +251,6 @@ body.discussion { box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } - .blank-slate { - - padding: 40px 40px 10px; - - section { - border-bottom: 1px solid $gray-l3; - } - - .label { - display: block; - font-size: 12px; - } - - .label-settings { - padding-top: $baseline; - padding-bottom: $baseline/2; - text-transform: uppercase; - } - - .home-header { - margin: 0; - } - - .home-title { - font-size: 18px; - color: $black; - margin-bottom: ($baseline/4); - } - .home-description { - font-size: 12px; - line-height: 1; - margin-bottom: $baseline/2; - } - .home-stats { - padding: $baseline 0; - - .label-area { - display: inline-block; - min-width: $baseline*5; - width: 25%; - vertical-align: middle; - - .profile-link { - font-weight: 700; - } - } - - .stats-grouping { - display: inline-block; - width: 70%; - padding-left: $baseline; - - .profile-stat { - display: inline-block; - width: 32.5%; - vertical-align: middle; - font-size: 12px; - - .count { - display: inline-block; - font-size: 28px; - padding: 0 $baseline/2; - vertical-align: middle; - } - - .profile-stat-label{ - vertical-align: middle; - } - } - } - } - - .home-helpgrid { - border-bottom: none; - border-radius: 3px; - border: 1px solid $gray-l2; - box-shadow: 0 1px 3px rgba(0, 0, 0, .15); - } - } - - .helpgrid-row { - border-bottom: 1px solid $gray-l2; - - .row-title { - padding: 30px $baseline; - background-color: #dedede; - font-size: 12px; - } - - .row-item-full, .row-item { - font-size: 12px; - padding: 0px $baseline/2; - width: 26%; - vertical-align: middle; - - .icon { - padding: 0 $baseline/2; - font-size: 24px; - vertical-align: middle; - display: table-cell; - } - - .fa-stack .icon { - padding: 0 $baseline/2; - } - - .row-description { - vertical-align: middle; - display: table-cell; - } - } - - .row-item-full { - - .notification-checkbox { - display: inline-block; - padding: $baseline/4 0 $baseline/2 0; - @include margin-right($baseline/2); - border-radius: 5px; - border: 1px solid gray; - - .email-setting { - display: inline-block; - text-align: center; - vertical-align: middle; - @include margin-left($baseline/2); - } - - .icon { - display: inline-block; - } - - .email-setting:checked ~ .icon { - color: $green; - } - } - - .row-description { - display: inline-block; - width:80%; - } - } - } - - .helpgrid-row-navigation { - .fa-bars {color: $light-gray;} - .fa-search {color: $light-gray;} - .fa-sort {color: $light-gray;} - } - - .helpgrid-row-participation { - .fa-plus {color: $green;} - .fa-flag {color: $pink;} - .fa-star {color: $blue;} - } - - .helpgrid-row-notification { - .fa-square {color: $green;} - .fa-envelope {color: $light-gray;} - } - .discussion-article { position: relative; min-height: 500px; @@ -423,36 +260,6 @@ body.discussion { word-wrap: break-word; } - h1 { - margin-bottom: ($baseline/4); - font-size: 28px; - font-weight: 700; - letter-spacing: 0; - line-height: 1.2; - } - - .posted-details { - font-size: 12px; - color: $gray-l1; - - .username { - font-weight: 700; - } - - .timeago, .top-post-status { - color: inherit; - } - } - - .post-context{ - margin-top: $baseline; - font-size: 12px; - color: $gray-d1; - padding: ($baseline*0.75); - background-color: $gray-l6; - border-radius: 3px; - } - p + p { margin-top: $baseline; } @@ -463,123 +270,6 @@ body.discussion { margin-bottom: $baseline; } - .responses { - &:empty { - display: none; - } - - list-style: none; - margin-top: $baseline; - padding: 0px ($baseline*2); - - > li { - @include animation(fadeIn .3s); - position: relative; - margin: 0 -($baseline/2) ($baseline*1.5); - border: 1px solid $gray-l2; - border-radius: 3px; - box-shadow: 0 0 1px $shadow; - - &.staff { - padding-top: 38px; - border-color: #009fe2; - } - - &.community-ta{ - padding-top: 38px; - border-color: $forum-color-community-ta; - } - - .staff-banner { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 14px; - padding: 1px ($baseline/4); - @include box-sizing(border-box); - border-radius: 2px 2px 0 0; - background: #009fe2; - font-size: 9px; - font-weight: 700; - color: $white; - text-transform: uppercase; - } - - .community-ta-banner{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 14px; - padding: 1px ($baseline/4); - @include box-sizing(border-box); - border-radius: 2px 2px 0 0; - background: $forum-color-community-ta; - font-size: 9px; - font-weight: 700; - color: $white; - text-transform: uppercase; - } - - &.loading { - height: 0; - margin: 0; - padding: 0; - border: none; - box-shadow: none; - } - } - - .discussion-response { - @include box-sizing(border-box); - border-radius: 3px 3px 0 0; - padding: $baseline; - background-color: $white; - - .response-body { - ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places - @include padding-left(40px); - @include padding-right(0); - } - } - } - .posted-by { - font-weight: 700; - } - } - - .add-response { - margin-top: $baseline; - padding: 0 ($baseline*1.5); - - .add-response-btn { - @include white-button; - @include linear-gradient(top, $white 35%, $gray-l4); - position: relative; - border: 1px solid $gray-l2; - padding: 0 18px; - width: 100%; - box-shadow: 0 1px 1px $shadow-l1; - @include text-align(left); - font-size: 13px; - - .fa-reply:before { // flip the icon for RTL - @include ltr { - content: "\f112"; // FA icon arrow to the left - } - - @include rtl { - content: "\f064"; // FA icon arrow to the right - } - } - - span.add-response-btn-text { - @include padding-left($baseline/5); - } - } - } - blockquote { background: $gray-l5; border-radius: 3px; @@ -784,13 +474,7 @@ body.discussion { overflow-y: auto; max-height: 600px; - .group-visibility-label { - font-weight: 400; - margin-bottom: ($baseline*0.5); - } - .discussion-post { - @include clearfix(); .inline-comment-count { @extend %ui-depth2; @@ -807,36 +491,6 @@ body.discussion { line-height: 25px; color: #888; } - - header { - padding-bottom: 0; - margin-bottom: ($baseline*0.75); - - .posted-details { - margin-top: ($baseline/5); - - .username { - display: inline; - font-size: 14px; - font-weight: 700; - } - } - - h1 { - font-size: 19px; - font-weight: 700; - margin-bottom: 0px !important; // Override courseware CSS - } - - h4 { - font-size: 16px; - } - } - - .post-body { - font-size: 14px; - clear: both; - } } .responses { @@ -1066,12 +720,3 @@ body.discussion { } } -// ==================== - -// post metadata - cohorts -.group-visibility-label { - font-size: 12px; - color:$black; - font-style: italic; - background-color: $white; - } diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index af9974f31f..86b97b72ec 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -63,46 +63,46 @@ border-radius: 3px 3px 0 0; padding: ($baseline/2); width: 100%; - height: 240px; + height: 125px; background: $white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; font-size: 13px; - font-family: 'Monaco', monospace; + font-family: $sans-serif; line-height: 1.6; } @mixin discussion-wmd-preview-container { @include box-sizing(border-box); - border: 1px solid #aaa; + @include border-radius(0, 0, 3px, 3px); + border: 1px solid $gray-l1; border-top: none; - border-radius: 0 0 3px 3px; width: 100%; - background: #eee; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; + background: $gray-l4; + box-shadow: 0 1px 3px $shadow-l1 inset; } @mixin discussion-new-post-wmd-preview-container { @include discussion-wmd-preview-container; - border-color: #333; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; + border-color: $gray-d3; + box-shadow: 0 1px 3px $shadow-d1 inset; } @mixin discussion-wmd-preview-label { + @include padding-left($baseline/4); padding-top: 3px; - @include padding-left(5px); width: 100%; - color: #bbb; + color: $gray-l2; text-transform: uppercase; font-size: 11px; } @mixin discussion-wmd-preview { padding: ($baseline/2) $baseline; - width: 100%; - color: #333; + width: auto; + color: $gray-d3; ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places - @include padding-left(40px); + @include padding-left($baseline*2); @include padding-right(0); } } diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index fed7f3d40b..a3312e1877 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -121,7 +121,7 @@ @extend %t-copy-sub2; display: inline-block; vertical-align: middle; - padding: 0 8px; + padding: 2px 8px; color: $gray-l1; opacity: 0; } diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index 5f3a6a2772..f590494dc6 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/lms/static/sass/discussion/utilities/_shame.scss @@ -155,3 +155,18 @@ li[class*=forum-nav-thread-label-] { color: inherit; } } + +// ------- +// Inline Discussion Module Overrides +// ------- +.discussion-module { + + .wrapper-post-header .post-title { + margin-bottom: 0 !important; // overrides "#seq_content h1" styling + } + + .posted-details { + font-size: 12px !important; + color: #919191 !important; + } +} diff --git a/lms/static/sass/discussion/utilities/_variables.scss b/lms/static/sass/discussion/utilities/_variables.scss index d9d296734c..bb9654af65 100644 --- a/lms/static/sass/discussion/utilities/_variables.scss +++ b/lms/static/sass/discussion/utilities/_variables.scss @@ -1,3 +1,7 @@ +// discussion - utilities - variables +// ==================== + +// color variables $forum-color-active-thread: tint($blue, 85%); $forum-color-pinned: $pink; $forum-color-reported: $pink; @@ -6,3 +10,8 @@ $forum-color-following: $blue; $forum-color-staff: $blue; $forum-color-community-ta: $green-d1; $forum-color-marked-answer: $green-d1; + +// post images +$post-image-dimension: ($baseline*3); // image size + margin +$response-image-dimension: ($baseline*2.5); // image size + margin +$comment-image-dimension: ($baseline*2); // image size + margin diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss index 70c710b4a6..1c1ad5f6eb 100644 --- a/lms/static/sass/discussion/views/_create-edit-post.scss +++ b/lms/static/sass/discussion/views/_create-edit-post.scss @@ -8,10 +8,8 @@ box-sizing: border-box; margin: 0; border-radius: 3px; - padding: ($baseline*2); - min-width: 760px; + padding: ($baseline); max-width: 1180px; - background: $gray-l5; .post-field { margin-bottom: $baseline; diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss new file mode 100644 index 0000000000..eaaa9c60ff --- /dev/null +++ b/lms/static/sass/discussion/views/_home.scss @@ -0,0 +1,162 @@ +// discussion - views - home layout +// ==================== + +// home - layout +.container .view-discussion-home { + padding: ($baseline*2) ($baseline*2) ($baseline/2); + + section { + border-bottom: 1px solid $gray-l3; + } + + .label { + @extend %t-copy-sub2; + display: block; + } + + .label-settings { + padding-top: $baseline; + padding-bottom: ($baseline/2); + text-transform: uppercase; + } + + .home-header { + margin: 0; + } + + .home-title { + @extend %t-title5; + color: $black; + margin-bottom: ($baseline/4); + } + .home-description { + @extend %t-copy-sub2; + margin-bottom: ($baseline/2); + } + .home-stats { + padding: $baseline 0; + + .label-area { + display: inline-block; + min-width: ($baseline*5); + width: 25%; + vertical-align: middle; + + .profile-link { + font-weight: 700; + } + } + + .stats-grouping { + @include padding-left($baseline); + display: inline-block; + width: 70%; + + .profile-stat { + @extend %t-copy-sub2; + display: inline-block; + width: 32.5%; + vertical-align: middle; + + .count { + @extend %t-title4; + display: inline-block; + padding: 0 ($baseline/2); + vertical-align: middle; + } + + .profile-stat-label{ + vertical-align: middle; + } + } + } + } + + .home-helpgrid { + border-bottom: none; + border-radius: 3px; + border: 1px solid $gray-l2; + box-shadow: 0 1px 3px rgba(0, 0, 0, .15); + } + + .helpgrid-row { + border-bottom: 1px solid $gray-l2; + + .row-title { + padding: ($baseline*1.5) $baseline; + background-color: #dedede; + font-size: 12px; + } + + .row-item-full, .row-item { + font-size: 12px; + padding: 0px $baseline/2; + width: 26%; + vertical-align: middle; + + .icon { + padding: 0 ($baseline/2); + font-size: 24px; + vertical-align: middle; + display: table-cell; + } + + .fa-stack .icon { + padding: 0 ($baseline/2); + } + + .row-description { + vertical-align: middle; + display: table-cell; + } + } + + .row-item-full { + + .notification-checkbox { + display: inline-block; + @include padding($baseline/4, 0, $baseline/2, 0); + @include margin-right($baseline/2); + border-radius: 5px; + border: 1px solid gray; + + .email-setting { + display: inline-block; + text-align: center; + vertical-align: middle; + @include margin-left($baseline/2); + } + + .icon { + display: inline-block; + } + + .email-setting:checked ~ .icon { + color: $green; + } + } + + .row-description { + display: inline-block; + width:80%; + } + } + } + + .helpgrid-row-navigation { + .fa-bars {color: $light-gray;} + .fa-search {color: $light-gray;} + .fa-sort {color: $light-gray;} + } + + .helpgrid-row-participation { + .fa-plus {color: $green;} + .fa-flag {color: $pink;} + .fa-star {color: $blue;} + } + + .helpgrid-row-notification { + .fa-square {color: $green;} + .fa-envelope {color: $light-gray;} + } +} \ No newline at end of file diff --git a/lms/static/sass/discussion/views/_response.scss b/lms/static/sass/discussion/views/_response.scss index 72ea60c55f..73a5c22b28 100644 --- a/lms/static/sass/discussion/views/_response.scss +++ b/lms/static/sass/discussion/views/_response.scss @@ -1,3 +1,100 @@ +// discussion - responses +// ==================== + +// Table of Contents +// * +wrapper - response list +// * +base - single response element +// * +element - add response area +// * +response - labels and banners +// * +CASE: answered question - collapsed comments in answers +// * +response - labels and banners +// * +comments styling + +// +wrapper - response list +.container .discussion-body .responses { + list-style: none; + margin-top: $baseline; + padding: 0 ($baseline*1.5); + + &:empty { + display: none; + } + + // wrapper - response plus comment area + .forum-response { + @include animation(fadeIn .3s); + position: relative; + margin: $baseline 0; + border: 1px solid $gray-l2; + border-radius: 3px; + box-shadow: 0 0 1px $shadow; + } + + // wrapper - main response area + .discussion-response { + @include box-sizing(border-box); + @include border-radius(3px, 3px, 0, 0); + padding: $baseline; + background-color: $white; + } + + .posted-by { + @extend %t-ultrastrong; + } +} + +// +base - single response element +.container .discussion-response { + + .response-header-content { + + // CASE: larger username for responses + .username { + @include font-size(14); + @extend %t-weight5; + } + } + + // rtl resets for response list elements + .response-body ol, .response-body ul { // Fix up the RTL-only _reset.scss, but only in specific places + @include padding-left($baseline*2); + @include padding-right(0); + } +} + +// +element - add response area +.container .discussion-body .add-response { + margin-top: $baseline; + padding: 0 ($baseline*1.5); + + .add-response-btn { + @include white-button; + @include linear-gradient(top, $white 35%, $gray-l4); + position: relative; + border: 1px solid $gray-l2; + padding: 0 18px; + width: 100%; + box-shadow: 0 1px 1px $shadow-l1; + @include text-align(left); + font-size: 13px; + + .fa-reply:before { // flip the icon for RTL + @include ltr { + content: "\f112"; // FA icon arrow to the left + } + + @include rtl { + content: "\f064"; // FA icon arrow to the right + } + } + + span.add-response-btn-text { + @include padding-left($baseline/5); + } + } +} + +// +CASE: answered question - collapsed comments in answers .forum-response .action-show-comments { @include box-sizing(border-box); @include font-size(13); @@ -7,3 +104,108 @@ background: $gray-l6; box-shadow: 0 1px 3px -1px $shadow inset; } + +// +response - labels and banners +// NOTE - these styles seem to no longer be in use. They have been isolated here, but should be ideally removed or fixed. +.container .discussion-body .responses .forum-response { + + // CASE: label - staff response + &.staff { + padding-top: 38px; + border-color: #009fe2; + } + + // CASE: label - community TA response + &.community-ta{ + padding-top: 38px; + border-color: $forum-color-community-ta; + } + + // CASE: banner - staff response + .staff-banner { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 14px; + padding: 1px ($baseline/4); + @include box-sizing(border-box); + border-radius: 2px 2px 0 0; + background: #009fe2; + font-size: 9px; + font-weight: 700; + color: $white; + text-transform: uppercase; + } + + // CASE: banner - community TA response + .community-ta-banner{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 14px; + padding: 1px ($baseline/4); + @include box-sizing(border-box); + border-radius: 2px 2px 0 0; + background: $forum-color-community-ta; + font-size: 9px; + font-weight: 700; + color: $white; + text-transform: uppercase; + } + + // STATE: loading - response list + &.loading { + height: 0; + margin: 0; + padding: 0; + border: none; + box-shadow: none; + } +} + +// +comments styling +.container .discussion-body .comments { + @extend %ui-no-list; + border-radius: 0 0 3px 3px; + background: $gray-l6; + box-shadow: 0 1px 3px -1px $shadow inset; + + > li { + border-top: 1px solid $gray-l4; + padding: ($baseline/2) $baseline; + } + + + blockquote { + background: $gray-l4; + border-radius: 3px; + padding: ($baseline/4) ($baseline/2); + font-size: 14px; + } + + .comment-form { + @include clearfix(); + + .comment-form-input { + padding: ($baseline/4) ($baseline/2); + background-color: $white; + font-size: 14px; + } + + .discussion-submit-comment { + @include blue-button; + float: left; + margin-top: 8px; + } + + .wmd-input { + height: 40px; + } + + .discussion-errors { + margin: 0; + } + } +} diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index 791bc717f1..de7dcd15a7 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -1,40 +1,42 @@ // discussion - thread layout // ==================== +// NOTE: thread = (post + (responses and comments)) -// general thread layout +// Table of Contents +// * +general thread layout +// * +thread - wrapper styling +// * +thread - elements - shared styles +// * +post - individual element styling +// * +post - answered question - collapsed comment area + +// +general thread layout body.discussion, .discussion-module { // post layout .discussion-post { - padding: ($baseline*2) ($baseline*2) $baseline ($baseline*2); - border-radius: 3px 3px 0 0; + @include padding(($baseline*1.5), ($baseline*1.5), $baseline, ($baseline*1.5)); + @include border-radius(3px, 3px, 0, 0); background-color: $white; + .wrapper-post-header { + padding-bottom: 0; + margin-bottom: ($baseline*0.75); + } + .post-header-content { display: inline-block; - width: flex-grid(9,12); + width: flex-grid(9,12); } .post-header-actions { - display: inline-block; @include float(right); - vertical-align: middle; width: flex-grid(3,12); } } // response layout .discussion-response { - min-height: ($baseline*7.5); - - .username { - @include font-size(14); - @extend %t-weight5; - } - - .posted-details .username { - font-size: inherit; - } + min-height: ($baseline*5); .response-header-content { display: inline-block; @@ -43,62 +45,21 @@ body.discussion, .discussion-module { } .response-header-actions { - position: absolute; - @include right($baseline); - top: ($baseline); @include float(right); + @include right($baseline); + position: absolute; + top: ($baseline); } } // comments layout - .comments { - @extend %ui-no-list; - border-radius: 0 0 3px 3px; - background: $gray-l6; - box-shadow: 0 1px 3px -1px $shadow inset; - - > li { - border-top: 1px solid $gray-l4; - padding: ($baseline/2) $baseline; - } - - - blockquote { - background: $gray-l4; - border-radius: 3px; - padding: ($baseline/4) ($baseline/2); - font-size: 14px; - } - - .comment-form { - @include clearfix(); - - .comment-form-input { - padding: ($baseline/4) ($baseline/2); - background-color: $white; - font-size: 14px; - } - - .discussion-submit-comment { - @include blue-button; - float: left; - margin-top: 8px; - } - - .wmd-input { - height: 40px; - } - - .discussion-errors { - margin: 0; - } - } + .discussion-comment { .response-body { + @extend %t-copy-sub2; display: inline-block; margin-bottom: ($baseline/2); width: flex-grid(10,12); - font-size: 13px; p + p { margin-top: 12px; @@ -106,24 +67,128 @@ body.discussion, .discussion-module { } .comment-actions-list { - display: inline-block; - width: flex-grid(2,12); - vertical-align: top; + @include float(right); } - //TO-DO : clean up posted-details styling, currently reused by responses and comments .posted-details { margin-top: 0; } } } +// +thread - wrapper styling .forum-thread-main-wrapper { + @include border-radius(3px, 3px, 0, 0); border-bottom: 1px solid $white; // Prevent collapsing margins - border-radius: 3px 3px 0 0; background-color: $white; } +// +thread - elements - shared styles +body.discussion { + + .discussion-post, .discussion-response, .discussion-comment { + @include clearfix(); + + // 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: 3px; + } + } + + // thread - header content details + .posted-details { + @extend %t-copy-sub2; + margin-top: ($baseline/5); + color: $gray-l1; + + .username { + @extend %t-strong; + display: inline; + } + + .timeago, .top-post-status { + color: inherit; + } + } + } + + .discussion-post .post-body, .discussion-response .response-body { + @include padding-right($baseline); //ensures content doesn't overlap on post or response actions. + } +} + +// +post - individual element styling +body.discussion .discussion-post, body.discussion .discussion-article { + // NOTE: discussion-article is used for inline discussion modules. + @include clearfix(); + + .post-header-content { + + // post title + .post-title { + @extend %t-title4; + @extend %t-ultrastrong; + margin-bottom: ($baseline/4); + letter-spacing: 0; + } + } + + // post body + .post-body { + @extend %t-copy-sub1; + // clear: both; //TO-DO: confirm that removing this is ok for all cases of discussion posts. + } + + // post context + .post-context { + @extend %t-copy-sub2; + margin-top: $baseline; + color: $gray-d1; + padding: ($baseline*0.75); + background-color: $gray-l6; + border-radius: 3px; + + // CASE: no courseware context or cohort visiblity rules + &:empty { + display: none; + } + + // post visibility - cohorts + .group-visibility-label { + margin-top: ($baseline/4); + } + } +} + +// +post - answered question - collapsed comment area body.discussion, .discussion-thread.expanded { .forum-thread-main-wrapper { box-shadow: 0 1px 3px $shadow;