Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Discussion forum styling cleanup to correct current visual styling issues in addition to cleaning up styles in preparation for adding post images

Browse Source
This commit is contained in:
Marco Morales
2015-09-01 14:28:57 -04:00
committed by marcotuts
parent 58488eaa0b
commit ad465d6ba6
17 changed files with 584 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/static/common/templates/discussion/discussion-home.underscore
View File

@@ -1,4 +1,4 @@
<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) { %>

2
common/static/common/templates/discussion/forum-action-answer.underscore
View File

@@ -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>

2
common/static/common/templates/discussion/forum-action-endorse.underscore
View File

@@ -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>

2
common/static/common/templates/discussion/response-comment-show.underscore
View File

@@ -1,4 +1,4 @@
<div id="comment_<%- id %>">
<div class="discussion-comment" id="comment_<%- id %>">
<div class="response-body"><%- body %></div>
<%=
_.template(

2
common/static/common/templates/discussion/thread-response-show.underscore
View File

@@ -1,4 +1,4 @@
<header>
<header class="wrapper-response-header">
<div class="response-header-content">
<%= author_display %>
<p class="posted-details">

52
common/static/common/templates/discussion/thread-show.underscore
View File

@@ -1,21 +1,7 @@
<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>

5
lms/static/sass/_build-lms.scss
View File

@@ -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";

4
lms/static/sass/course/courseware/_courseware.scss
View File

@@ -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%;

379
lms/static/sass/discussion/_discussion.scss
View File

@@ -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;
}

26
lms/static/sass/discussion/_mixins.scss
View File

@@ -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);
}
}

2
lms/static/sass/discussion/elements/_actions.scss
View File

@@ -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;
}

15
lms/static/sass/discussion/utilities/_shame.scss
View File

@@ -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;
}
}

9
lms/static/sass/discussion/utilities/_variables.scss
View File

@@ -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

4
lms/static/sass/discussion/views/_create-edit-post.scss
View File

@@ -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;

162
lms/static/sass/discussion/views/_home.scss Normal file
View File

@@ -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;}
}
}

202
lms/static/sass/discussion/views/_response.scss
View File

@@ -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;
}
}
}

199
lms/static/sass/discussion/views/_thread.scss
View File

@@ -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;