Skip to content

E
edx-platform
Commit ad5aab4c by Marco Morales
Options

Merge pull request #9666 from edx/marco/UX-2586/discussions-profile-photos 

Discussion post cleanup (in preparation for post author images support)
parents d570866c ad465d6b
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