Skip to content

E
edx-platform
Commit ad465d6b by Marco Morales Committed by marcotuts
Options

Discussion forum styling cleanup to correct current visual styling issues in… 

Discussion forum styling cleanup to correct current visual styling issues in addition to cleaning up styles in preparation  for adding post images
parent 58488eaa
Showing with 584 additions and 484 deletions
common/static/common/templates/discussion/discussion-home.underscore
<div class="discussion-article blank-slate"> <div class="discussion-article view-discussion-home">
<section class="home-header"> <section class="home-header">
<span class="label"><%- gettext("DISCUSSION HOME:") %></span> <span class="label"><%- gettext("DISCUSSION HOME:") %></span>
<% if (window.courseName) { %> <% if (window.courseName) { %>
......
common/static/common/templates/discussion/forum-action-answer.underscore
...@@ -5,6 +5,6 @@ ...@@ -5,6 +5,6 @@
<span class="label-unchecked"><%- gettext("Mark as Answer") %></span> <span class="label-unchecked"><%- gettext("Mark as Answer") %></span>
<span class="label-checked"><%- gettext("Unmark as Answer") %></span> <span class="label-checked"><%- gettext("Unmark as Answer") %></span>
</span> </span>
<span class="action-icon"><i class="icon fa fa-ok"></i></span> <span class="action-icon"><i class="icon fa fa-check"></i></span>
</a> </a>
</li> </li>
common/static/common/templates/discussion/forum-action-endorse.underscore
...@@ -5,6 +5,6 @@ ...@@ -5,6 +5,6 @@
<span class="label-unchecked"><%- gettext("Endorse") %></span> <span class="label-unchecked"><%- gettext("Endorse") %></span>
<span class="label-checked"><%- gettext("Unendorse") %></span> <span class="label-checked"><%- gettext("Unendorse") %></span>
</span> </span>
<span class="action-icon"><i class="icon fa fa-ok"></i></span> <span class="action-icon"><i class="icon fa fa-check"></i></span>
</a> </a>
</li> </li>
common/static/common/templates/discussion/response-comment-show.underscore
<div id="comment_<%- id %>"> <div class="discussion-comment" id="comment_<%- id %>">
<div class="response-body"><%- body %></div> <div class="response-body"><%- body %></div>
<%= <%=
_.template( _.template(
......
common/static/common/templates/discussion/thread-response-show.underscore
<header> <header class="wrapper-response-header">
<div class="response-header-content"> <div class="response-header-content">
<%= author_display %> <%= author_display %>
<p class="posted-details"> <p class="posted-details">
......
common/static/common/templates/discussion/thread-show.underscore
<div class="discussion-post"> <div class="discussion-post">
<header> <header class="wrapper-post-header">
<div class="group-visibility-label">
<% 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.') %>
<% } %>
</div>
<div class="post-header-content"> <div class="post-header-content">
<h1><%- title %></h1> <h1 class="post-title"><%- title %></h1>
<p class="posted-details"> <p class="posted-details">
<% <%
var timeAgoHtml = interpolate( var timeAgoHtml = interpolate(
...@@ -59,16 +45,15 @@ ...@@ -59,16 +45,15 @@
</header> </header>
<div class="post-body"><%- body %></div> <div class="post-body"><%- body %></div>
<div class="post-context">
<% if (mode == "tab" && obj.courseware_url) { %> <% if (mode == "tab" && obj.courseware_url) { %>
<% <%
var courseware_title_linked = interpolate( var courseware_title_linked = interpolate(
'<a href="%(courseware_url)s">%(courseware_title)s</a>', '<a href="%(courseware_url)s">%(courseware_title)s</a>',
{courseware_url: courseware_url, courseware_title: _.escape(courseware_title)}, {courseware_url: courseware_url, courseware_title: _.escape(courseware_title)},
true true
); );
%> %>
<div class="post-context">
<%= <%=
interpolate( interpolate(
_.escape(gettext('Related to: %(courseware_title_linked)s')), _.escape(gettext('Related to: %(courseware_title_linked)s')),
...@@ -76,6 +61,19 @@ ...@@ -76,6 +61,19 @@
true true
) )
%> %>
<% } %>
<div class="group-visibility-label">
<% 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.') %>
<% } %>
</div> </div>
<% } %> </div>
</div> </div>
lms/static/sass/_build-lms.scss
...@@ -55,14 +55,15 @@ ...@@ -55,14 +55,15 @@
@import 'views/support'; @import 'views/support';
@import 'course/auto-cert'; @import 'course/auto-cert';
// applications // app - discussion
@import "discussion/utilities/variables"; @import "discussion/utilities/variables";
@import "discussion/mixins"; @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/actions";
@import "discussion/elements/editor"; @import "discussion/elements/editor";
@import "discussion/elements/labels"; @import "discussion/elements/labels";
@import "discussion/elements/navigation"; @import "discussion/elements/navigation";
@import "discussion/views/home";
@import "discussion/views/thread"; @import "discussion/views/thread";
@import "discussion/views/create-edit-post"; @import "discussion/views/create-edit-post";
@import "discussion/views/response"; @import "discussion/views/response";
......
lms/static/sass/course/courseware/_courseware.scss
// 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 { html {
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
......
lms/static/sass/discussion/_discussion.scss
// forums - main app styling // 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 { body.discussion {
...@@ -21,9 +22,8 @@ body.discussion { ...@@ -21,9 +22,8 @@ body.discussion {
.edit-post-form { .edit-post-form {
@include clearfix(); @include clearfix();
margin-bottom: ($baseline*2);
width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
width: 100%;
h1 { h1 {
font-size: 20px; font-size: 20px;
...@@ -110,7 +110,6 @@ body.discussion { ...@@ -110,7 +110,6 @@ body.discussion {
} }
.wmd-panel { .wmd-panel {
min-width: 500px;
width: 100%; width: 100%;
} }
...@@ -120,14 +119,14 @@ body.discussion { ...@@ -120,14 +119,14 @@ body.discussion {
} }
.wmd-input { .wmd-input {
@include border-radius(3px, 3px, 0, 0);
border: 1px solid $gray-l3; border: 1px solid $gray-l3;
border-radius: 3px 3px 0 0;
width: 100%; width: 100%;
height: 150px; height: 150px;
background-color: $gray-l4; background-color: $gray-l4;
font-style: normal; font-style: normal;
font-size: 0.8em; font-size: 0.8em;
font-family: Monaco, 'Lucida Console', monospace; font-family: $f-sans-serif;
line-height: 1.6em; line-height: 1.6em;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
...@@ -137,18 +136,17 @@ body.discussion { ...@@ -137,18 +136,17 @@ body.discussion {
.wmd-button-row { .wmd-button-row {
@include transition(all .2s ease-out 0s); @include transition(all .2s ease-out 0s);
@include margin(($baseline/2), ($baseline/4), ($baseline/4), ($baseline/4));
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
padding: 0; padding: 0;
height: 20px; height: 20px;
} }
.wmd-spacer { .wmd-spacer {
@include margin-left(14px);
position: absolute; position: absolute;
display: inline-block; display: inline-block;
margin-left: 14px;
width: 1px; width: 1px;
height: 20px; height: 20px;
background-color: Silver; background-color: Silver;
...@@ -156,10 +154,10 @@ body.discussion { ...@@ -156,10 +154,10 @@ body.discussion {
} }
.wmd-button { .wmd-button {
@include padding-right(3px);
@include padding-left(3px);
position: absolute; position: absolute;
display: inline-block; display: inline-block;
padding-right: 3px;
padding-left: 2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
background: none; background: none;
...@@ -177,14 +175,14 @@ body.discussion { ...@@ -177,14 +175,14 @@ body.discussion {
} }
.wmd-spacer1 { .wmd-spacer1 {
left: 50px; @include left(50px);
} }
.wmd-spacer2 { .wmd-spacer2 {
left: 175px; @include left(175px);
} }
.wmd-spacer3 { .wmd-spacer3 {
left: 300px; @include left(300px);
} }
.wmd-prompt-background { .wmd-prompt-background {
...@@ -201,7 +199,7 @@ body.discussion { ...@@ -201,7 +199,7 @@ body.discussion {
> div { > div {
font-size: 0.8em; font-size: 0.8em;
font-family: arial, helvetica, sans-serif; font-family: $sans-serif;
} }
b { b {
...@@ -253,167 +251,6 @@ body.discussion { ...@@ -253,167 +251,6 @@ body.discussion {
box-shadow: 0 1px 2px rgba(0, 0, 0, .05); 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 { .discussion-article {
position: relative; position: relative;
min-height: 500px; min-height: 500px;
...@@ -423,36 +260,6 @@ body.discussion { ...@@ -423,36 +260,6 @@ body.discussion {
word-wrap: break-word; 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 { p + p {
margin-top: $baseline; margin-top: $baseline;
} }
...@@ -463,123 +270,6 @@ body.discussion { ...@@ -463,123 +270,6 @@ body.discussion {
margin-bottom: $baseline; 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 { blockquote {
background: $gray-l5; background: $gray-l5;
border-radius: 3px; border-radius: 3px;
...@@ -784,13 +474,7 @@ body.discussion { ...@@ -784,13 +474,7 @@ body.discussion {
overflow-y: auto; overflow-y: auto;
max-height: 600px; max-height: 600px;
.group-visibility-label {
font-weight: 400;
margin-bottom: ($baseline*0.5);
}
.discussion-post { .discussion-post {
@include clearfix();
.inline-comment-count { .inline-comment-count {
@extend %ui-depth2; @extend %ui-depth2;
...@@ -807,36 +491,6 @@ body.discussion { ...@@ -807,36 +491,6 @@ body.discussion {
line-height: 25px; line-height: 25px;
color: #888; 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 { .responses {
...@@ -1066,12 +720,3 @@ body.discussion { ...@@ -1066,12 +720,3 @@ body.discussion {
} }
} }
// ====================
// post metadata - cohorts
.group-visibility-label {
font-size: 12px;
color:$black;
font-style: italic;
background-color: $white;
}
lms/static/sass/discussion/_mixins.scss
...@@ -63,46 +63,46 @@ ...@@ -63,46 +63,46 @@
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
padding: ($baseline/2); padding: ($baseline/2);
width: 100%; width: 100%;
height: 240px; height: 125px;
background: $white; background: $white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
font-size: 13px; font-size: 13px;
font-family: 'Monaco', monospace; font-family: $sans-serif;
line-height: 1.6; line-height: 1.6;
} }
@mixin discussion-wmd-preview-container { @mixin discussion-wmd-preview-container {
@include box-sizing(border-box); @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-top: none;
border-radius: 0 0 3px 3px;
width: 100%; width: 100%;
background: #eee; background: $gray-l4;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px $shadow-l1 inset;
} }
@mixin discussion-new-post-wmd-preview-container { @mixin discussion-new-post-wmd-preview-container {
@include discussion-wmd-preview-container; @include discussion-wmd-preview-container;
border-color: #333; border-color: $gray-d3;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 1px 3px $shadow-d1 inset;
} }
@mixin discussion-wmd-preview-label { @mixin discussion-wmd-preview-label {
@include padding-left($baseline/4);
padding-top: 3px; padding-top: 3px;
@include padding-left(5px);
width: 100%; width: 100%;
color: #bbb; color: $gray-l2;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
} }
@mixin discussion-wmd-preview { @mixin discussion-wmd-preview {
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
width: 100%; width: auto;
color: #333; color: $gray-d3;
ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places 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); @include padding-right(0);
} }
} }
......
lms/static/sass/discussion/elements/_actions.scss
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
@extend %t-copy-sub2; @extend %t-copy-sub2;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 0 8px; padding: 2px 8px;
color: $gray-l1; color: $gray-l1;
opacity: 0; opacity: 0;
} }
......
lms/static/sass/discussion/utilities/_shame.scss
...@@ -155,3 +155,18 @@ li[class*=forum-nav-thread-label-] { ...@@ -155,3 +155,18 @@ li[class*=forum-nav-thread-label-] {
color: inherit; 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;
}
}
lms/static/sass/discussion/utilities/_variables.scss
// discussion - utilities - variables
// ====================
// color variables
$forum-color-active-thread: tint($blue, 85%); $forum-color-active-thread: tint($blue, 85%);
$forum-color-pinned: $pink; $forum-color-pinned: $pink;
$forum-color-reported: $pink; $forum-color-reported: $pink;
...@@ -6,3 +10,8 @@ $forum-color-following: $blue; ...@@ -6,3 +10,8 @@ $forum-color-following: $blue;
$forum-color-staff: $blue; $forum-color-staff: $blue;
$forum-color-community-ta: $green-d1; $forum-color-community-ta: $green-d1;
$forum-color-marked-answer: $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
lms/static/sass/discussion/views/_create-edit-post.scss
...@@ -8,10 +8,8 @@ ...@@ -8,10 +8,8 @@
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
border-radius: 3px; border-radius: 3px;
padding: ($baseline*2); padding: ($baseline);
min-width: 760px;
max-width: 1180px; max-width: 1180px;
background: $gray-l5;
.post-field { .post-field {
margin-bottom: $baseline; margin-bottom: $baseline;
......
lms/static/sass/discussion/views/_home.scss 0 → 100644
// 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
lms/static/sass/discussion/views/_response.scss
// 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 { .forum-response .action-show-comments {
@include box-sizing(border-box); @include box-sizing(border-box);
@include font-size(13); @include font-size(13);
...@@ -7,3 +104,108 @@ ...@@ -7,3 +104,108 @@
background: $gray-l6; background: $gray-l6;
box-shadow: 0 1px 3px -1px $shadow inset; 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;
}
}
}
lms/static/sass/discussion/views/_thread.scss
// discussion - thread layout // 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 { body.discussion, .discussion-module {
// post layout // post layout
.discussion-post { .discussion-post {
padding: ($baseline*2) ($baseline*2) $baseline ($baseline*2); @include padding(($baseline*1.5), ($baseline*1.5), $baseline, ($baseline*1.5));
border-radius: 3px 3px 0 0; @include border-radius(3px, 3px, 0, 0);
background-color: $white; background-color: $white;
.wrapper-post-header {
padding-bottom: 0;
margin-bottom: ($baseline*0.75);
}
.post-header-content { .post-header-content {
display: inline-block; display: inline-block;
width: flex-grid(9,12); width: flex-grid(9,12);
} }
.post-header-actions { .post-header-actions {
display: inline-block;
@include float(right); @include float(right);
vertical-align: middle;
width: flex-grid(3,12); width: flex-grid(3,12);
} }
} }
// response layout // response layout
.discussion-response { .discussion-response {
min-height: ($baseline*7.5); min-height: ($baseline*5);
.username {
@include font-size(14);
@extend %t-weight5;
}
.posted-details .username {
font-size: inherit;
}
.response-header-content { .response-header-content {
display: inline-block; display: inline-block;
...@@ -43,62 +45,21 @@ body.discussion, .discussion-module { ...@@ -43,62 +45,21 @@ body.discussion, .discussion-module {
} }
.response-header-actions { .response-header-actions {
position: absolute; @include float(right);
@include right($baseline); @include right($baseline);
position: absolute;
top: ($baseline); top: ($baseline);
@include float(right);
} }
} }
// comments layout // comments layout
.comments { .discussion-comment {
@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;
}
}
.response-body { .response-body {
@extend %t-copy-sub2;
display: inline-block; display: inline-block;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
width: flex-grid(10,12); width: flex-grid(10,12);
font-size: 13px;
p + p { p + p {
margin-top: 12px; margin-top: 12px;
...@@ -106,24 +67,128 @@ body.discussion, .discussion-module { ...@@ -106,24 +67,128 @@ body.discussion, .discussion-module {
} }
.comment-actions-list { .comment-actions-list {
display: inline-block; @include float(right);
width: flex-grid(2,12);
vertical-align: top;
} }
//TO-DO : clean up posted-details styling, currently reused by responses and comments
.posted-details { .posted-details {
margin-top: 0; margin-top: 0;
} }
} }
} }
// +thread - wrapper styling
.forum-thread-main-wrapper { .forum-thread-main-wrapper {
@include border-radius(3px, 3px, 0, 0);
border-bottom: 1px solid $white; // Prevent collapsing margins border-bottom: 1px solid $white; // Prevent collapsing margins
border-radius: 3px 3px 0 0;
background-color: $white; 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 { body.discussion, .discussion-thread.expanded {
.forum-thread-main-wrapper { .forum-thread-main-wrapper {
box-shadow: 0 1px 3px $shadow; box-shadow: 0 1px 3px $shadow;
......
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