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">
<span class="label"><%- gettext("DISCUSSION HOME:") %></span>
<% if (window.courseName) { %>
......
common/static/common/templates/discussion/forum-action-answer.underscore
......@@ -5,6 +5,6 @@
<span class="label-unchecked"><%- gettext("Mark as Answer") %></span>
<span class="label-checked"><%- gettext("Unmark as Answer") %></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>
</li>
common/static/common/templates/discussion/forum-action-endorse.underscore
......@@ -5,6 +5,6 @@
<span class="label-unchecked"><%- gettext("Endorse") %></span>
<span class="label-checked"><%- gettext("Unendorse") %></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>
</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>
<%=
_.template(
......
common/static/common/templates/discussion/thread-response-show.underscore
<header>
<header class="wrapper-response-header">
<div class="response-header-content">
<%= author_display %>
<p class="posted-details">
......
common/static/common/templates/discussion/thread-show.underscore
<div class="discussion-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>
<header class="wrapper-post-header">
<div class="post-header-content">
<h1><%- title %></h1>
<h1 class="post-title"><%- title %></h1>
<p class="posted-details">
<%
var timeAgoHtml = interpolate(
......@@ -59,16 +45,15 @@
</header>
<div class="post-body"><%- body %></div>
<% if (mode == "tab" && obj.courseware_url) { %>
<%
var courseware_title_linked = interpolate(
'<a href="%(courseware_url)s">%(courseware_title)s</a>',
{courseware_url: courseware_url, courseware_title: _.escape(courseware_title)},
true
);
%>
<div class="post-context">
<div class="post-context">
<% if (mode == "tab" && obj.courseware_url) { %>
<%
var courseware_title_linked = interpolate(
'<a href="%(courseware_url)s">%(courseware_title)s</a>',
{courseware_url: courseware_url, courseware_title: _.escape(courseware_title)},
true
);
%>
<%=
interpolate(
_.escape(gettext('Related to: %(courseware_title_linked)s')),
......@@ -76,6 +61,19 @@
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>
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";
......
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 {
height: 100%;
max-height: 100%;
......
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);
}
}
......
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;
}
......
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;
}
}
lms/static/sass/discussion/utilities/_variables.scss
// 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
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;
......
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 {
@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;
}
}
}
lms/static/sass/discussion/views/_thread.scss
// 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 float(right);
@include right($baseline);
position: absolute;
top: ($baseline);
@include float(right);
}
}
// 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;
......
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