Skip to content

E
edx-platform
Commit 4922d775 by Andy Armstrong
Options

Clean up discussion styles to be consistent across views

parent 81c4e170
Showing with 154 additions and 212 deletions
common/static/common/templates/discussion/thread-show.underscore
<div class="discussion-post">
<header class="wrapper-post-header">
<% if (!readOnly) { %>
<div class="post-header-actions post-extended-content">
<%=
_.template(
$('#forum-actions').html())(
{
contentId: cid,
contentType: 'post',
primaryActions: ['vote', 'follow'],
secondaryActions: ['pin', 'edit', 'delete', 'report', 'close'],
readOnly: readOnly
}
)
%>
</div>
<% } %>
<div class="post-header-content">
<h4 class="post-title"><%- title %></h4>
<p class="posted-details">
......@@ -32,22 +48,6 @@
</span>
</div>
</div>
<% if (!readOnly) { %>
<div class="post-header-actions post-extended-content">
<%=
_.template(
$('#forum-actions').html())(
{
contentId: cid,
contentType: 'post',
primaryActions: ['vote', 'follow'],
secondaryActions: ['pin', 'edit', 'delete', 'report', 'close'],
readOnly: readOnly
}
)
%>
</div>
<% } %>
</header>
<div class="post-body"><%- body %></div>
......
common/static/common/templates/discussion/thread.underscore
......@@ -9,7 +9,7 @@
<div class="post-extended-content thread-responses-wrapper">
<% if (!readOnly) { %>
<div class="add-response">
<button class="btn-brand btn-small add-response-btn">
<button class="btn btn-small add-response-btn">
<%- gettext("Add a Response") %>
</button>
</div>
......@@ -26,7 +26,7 @@
<ul class="discussion-errors"></ul>
<div class="reply-body" data-id="<%- id %>"></div>
<div class="reply-post-control">
<button class="btn-brand discussion-submit-post control-button"><%- gettext("Submit") %></button>
<button class="btn discussion-submit-post control-button"><%- gettext("Submit") %></button>
</div>
</form>
<% } %>
......
lms/djangoapps/discussion/static/discussion/templates/search.underscore
......@@ -6,4 +6,4 @@
id="search"
placeholder="<%- gettext("Search all posts") %>"
/>
<button class="btn-brand btn-small search-btn" type="button"><%- gettext("Search") %></button>
<button class="btn btn-small search-btn" type="button"><%- gettext("Search") %></button>
lms/djangoapps/discussion/templates/discussion/discussion_board.html
......@@ -67,7 +67,7 @@ DiscussionBoardFactory({
## Add Post button
% if has_permission(user, 'create_thread', course.id):
<div class="form-actions">
<button class="btn-brand btn-small new-post-btn">${_("Add a Post")}</button>
<button class="btn btn-small new-post-btn">${_("Add a Post")}</button>
</div>
% endif
## Search box
......
lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html
......@@ -20,7 +20,6 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str
<%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default)}</%block>
<%block name="headextra">
<%static:css group='style-inline-discussion'/>
<%include file="_js_head_dependencies.html" />
</%block>
......
lms/static/sass/discussion/_build.scss
......@@ -37,5 +37,6 @@ $static-path: '../..' !default;
@import 'views/create-edit-post';
@import 'views/response';
@import 'views/search';
@import 'views/inline';
@import 'utilities/developer';
@import 'utilities/shame';
lms/static/sass/discussion/_discussion.scss
......@@ -2,7 +2,7 @@
// ====================
// NOTE: this file is deprecated, and we should not continue to add to this file. Use other partials as appropriate.
body.discussion {
.discussion-body {
.edit-post-form {
@include clearfix();
......@@ -175,18 +175,17 @@ body.discussion {
}
}
.container .discussion-body {
.discussion-body {
@include clearfix();
border: none;
background: transparent;
box-shadow: none;
line-height: 1.4;
.bottom-post-status {
padding: 30px;
font-size: $forum-x-large-font-size;
font-weight: 700;
color: $gray-l3;
color: $forum-color-copy-light;
text-align: center;
}
......@@ -196,14 +195,10 @@ body.discussion {
a {
word-wrap: break-word;
}
p + p {
margin-top: $baseline;
}
}
blockquote {
background: $gray-l5;
background: $forum-color-background-light;
border-radius: $forum-border-radius;
padding: ($baseline/4) ($baseline/2);
font-size: $forum-base-font-size;
......@@ -248,7 +243,6 @@ body.discussion {
.discussion-reply-new {
@include clearfix();
@include transition(opacity .2s linear 0s);
padding: 0 ($baseline/2);
h4 {
font-size: $forum-large-font-size;
......@@ -432,6 +426,8 @@ section.discussion-pagination {
.response-count {
@include float(right);
color: $forum-color-response-count;
font-size: $forum-base-font-size;
}
.response-pagination {
......
lms/static/sass/discussion/_layouts.scss
// Layouts for discussion pages
@import '../course/base/extends';
.discussion-user-profile-board {
.discussion-profile-title {
margin-bottom: $baseline / 5;
font-size: $forum-x-large-font-size;
}
.discussion-profile-count {
margin-top: $baseline / 4;
}
.discussion-profile-info {
@include margin-right($baseline);
}
.user-name {
@include margin-right($baseline);
font-size: $forum-x-large-font-size;
}
.user-roles {
font-size: $forum-small-font-size;
font-style: italic;
}
.discussion-post .post-body {
width: 90%; // this page is full screen
}
.all-posts-btn {
padding: 0;
font-size: $forum-base-font-size;
}
.response-count {
@include margin-right($baseline / 4);
}
}
.discussion-column {
min-height: 500px;
......
lms/static/sass/discussion/elements/_labels.scss
// discussion - elements - labels
// ====================
.forum-nav-thread {
.discussion {
.post-label {
@include margin($baseline/4, $baseline/2, 0, 0);
@extend %t-weight4;
font-size: $forum-small-font-size;
font-weight: 100;
display: inline;
white-space: nowrap;
......
lms/static/sass/discussion/utilities/_developer.scss
......@@ -17,66 +17,64 @@
// provisional styling for "search alerts" (messages boxes that appear in the sidebar below the search
// input field with notices pertaining to the search result).
// --------------------
body.discussion {
.forum-nav {
.forum-nav {
// wrapper for multiple alerts
.search-alerts {
// wrapper for multiple alerts
.search-alerts {
}
// a single alert, which can be independently displayed / dismissed
.search-alert {
@include transition(none);
padding: ($baseline/2) 11px ($baseline/2) 18px;
background-color: $black;
}
}
.search-alert-content, .search-alert-controls {
display: inline-block;
vertical-align: middle;
}
// a single alert, which can be independently displayed / dismissed
.search-alert {
@include transition(none);
padding: ($baseline/2) 11px ($baseline/2) 18px;
background-color: $black;
}
// alert content
.search-alert-content {
width: 70%;
.search-alert-content, .search-alert-controls {
display: inline-block;
vertical-align: middle;
}
// alert copy
.message {
font-size: $forum-small-font-size;
color: $white;
// alert content
.search-alert-content {
width: 70%;
em {
@extend %t-weight5;
font-style: italic;
}
}
// alert copy
.message {
font-size: $forum-small-font-size;
color: $white;
// links to jump to users/content in alerts
.link-jump {
@include transition(none);
em {
@extend %t-weight5;
font-style: italic;
}
}
// alert controls
.search-alert-controls {
@include text-align(right);
width: 28%;
// links to jump to users/content in alerts
.link-jump {
@include transition(none);
@extend %t-weight5;
}
}
.control {
@include transition(none);
@extend %t-weight5;
padding: ($baseline/4) ($baseline/2);
color: $white;
font-size: $forum-base-font-size;
// alert controls
.search-alert-controls {
@include text-align(right);
width: 28%;
.control {
@include transition(none);
@extend %t-weight5;
padding: ($baseline/4) ($baseline/2);
color: $white;
font-size: $forum-base-font-size;
// reseting poorly globally scoped hover/focus state for this control
&:hover, &:focus {
color: $white;
text-decoration: none;
}
// reseting poorly globally scoped hover/focus state for this control
&:hover, &:focus {
color: $white;
text-decoration: none;
}
}
}
......
lms/static/sass/discussion/utilities/_shame.scss
......@@ -118,7 +118,20 @@ li[class*=forum-nav-thread-label-] {
// -------
.discussion-module {
.wrapper-post-header .post-title {
margin-bottom: 0 !important; // overrides "#seq_content h1" styling
.wrapper-post-header {
margin-bottom: 0 !important; // overrides default header styling
padding-bottom: 0 !important; // overrides default header styling
.posted-details {
margin: ($baseline/5) 0 !important; // overrides courseware p styling
}
.post-labels {
font-size: $forum-base-font-size; // overrides default heading styling
}
.post-title {
margin-bottom: 0 !important; // overrides "#seq_content h1" styling
}
}
}
lms/static/sass/discussion/utilities/_variables-v1.scss
......@@ -3,6 +3,8 @@
// base color variables
$forum-color-primary: $blue !default;
$forum-color-copy-light: rgb(65, 65, 65) !default;
$forum-color-background-light: rgb(245, 245, 245) !default;
// contextual color variables
$forum-color-background: $white;
......@@ -18,13 +20,13 @@ $forum-color-community-ta: $green-d1 !default;
$forum-color-marked-answer: $green-d1 !default;
$forum-color-border: $gray-l3 !default;
$forum-color-error: $red !default;
$forum-color-hover-thread: #f6f6f6 !default;
$forum-color-reading-thread: $gray-d3 !default;
$forum-color-hover-thread: $forum-color-background-light !default;
$forum-color-reading-thread: $forum-color-background-light !default;
$forum-color-read-post: $gray-d3 !default;
$forum-color-never-read-post: $forum-color-primary !default;
$forum-color-editor-preview-label: $gray-d2 !default;
$forum-color-response-count: $gray-d2 !default;
$forum-color-navigation-bar: #f6f6f6 !default;
$forum-color-navigation-bar: $forum-color-background-light !default;
$forum-color-count: $gray-d3 !default;
$forum-color-background-label: $gray-d2 !default;
......
lms/static/sass/discussion/utilities/_variables-v2.scss
......@@ -3,6 +3,8 @@
// base color variables
$forum-color-primary: palette(primary, base) !default;
$forum-color-copy-light: palette(grayscale, base) !default;
$forum-color-background-light: palette(grayscale, x-back) !default;
// contextual color variables
$forum-color-background: $lms-container-background-color !default;
......@@ -18,13 +20,13 @@ $forum-color-community-ta: palette(success, text) !default;
$forum-color-marked-answer: palette(success, text) !default;
$forum-color-border: palette(grayscale, back) !default;
$forum-color-error: palette(error, accent) !default;
$forum-color-hover-thread: palette(grayscale, x-back) !default;
$forum-color-reading-thread: palette(grayscale, x-back) !default;
$forum-color-hover-thread: $forum-color-background-light !default;
$forum-color-reading-thread: $forum-color-background-light !default;
$forum-color-read-post: palette(grayscale, base) !default;
$forum-color-never-read-post: $forum-color-primary !default;
$forum-color-editor-preview-label: palette(grayscale, base) !default;
$forum-color-response-count: palette(grayscale, base) !default;
$forum-color-navigation-bar: palette(grayscale, x-back) !default;
$forum-color-navigation-bar: $forum-color-background-light !default;
$forum-color-count: palette(grayscale, base) !default;
$forum-color-background-label: palette(grayscale, base) !default;
......
lms/static/sass/discussion/views/_thread.scss
......@@ -13,42 +13,28 @@
.discussion-post {
padding: 0 ($baseline/2);
.wrapper-post-header {
padding-bottom: $baseline;
}
.post-header-content {
display: inline-block;
width: flex-grid(9,12);
}
.post-header-actions {
@include float(right);
}
.post-body {
@include float(left);
width: flex-grid(10,12);
}
.post-context {
@include float(left);
}
}
.posted-details {
@extend %t-copy-sub2;
margin: ($baseline/5) 0;
color: $forum-color-copy-light;
.posted-details {
@extend %t-copy-sub2;
margin: ($baseline/5) 0;
color: $gray-d1;
.username {
@extend %t-strong;
display: inline;
}
.username {
@extend %t-strong;
display: inline;
.timeago, .top-post-status {
color: inherit;
}
}
}
.timeago, .top-post-status {
color: inherit;
}
.thread-responses-wrapper {
padding: 0 ($baseline/2);
}
// response layout
......@@ -67,6 +53,11 @@
position: absolute;
top: $baseline;
}
// response body
.response-body {
@extend %t-copy-sub1;
}
}
// comments layout
......@@ -79,7 +70,7 @@
width: flex-grid(10,12);
p + p {
margin-top: 12px;
margin-top: ($baseline/2);
}
}
......@@ -99,55 +90,50 @@
}
// +thread - elements - shared styles
body.discussion {
.discussion-post, .discussion-response, .discussion-comment {
@include clearfix();
.discussion-post, .discussion-response, .discussion-comment {
@include clearfix();
// thread - images
.author-image {
@include margin-right($baseline/2);
display: inline-block;
vertical-align: top;
// thread - images
.author-image {
@include margin-right($baseline/2);
display: inline-block;
vertical-align: top;
// STATE: No profile image
&:empty {
display: none;
}
// STATE: No profile image
&:empty {
display: none;
}
// CASE: post image
&.level-post {
height: $post-image-dimension;
width: $post-image-dimension;
}
// 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: 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;
}
// CASE: comment image
&.level-comment {
height: $comment-image-dimension;
width: $comment-image-dimension;
}
img {
border-radius: $forum-border-radius;
}
img {
border-radius: $forum-border-radius;
}
}
}
.discussion-response .response-body {
@include padding-right($baseline); //ensures content doesn't overlap on post or response actions.
}
.discussion-response .response-body {
@include padding-right($baseline); //ensures content doesn't overlap on post or response actions.
}
// +post - individual element styling
// NOTE: discussion-article is used for inline discussion modules.
.discussion-post,
.discussion-article {
.discussion-post {
@include clearfix();
.post-header-content {
......@@ -162,24 +148,19 @@ body.discussion {
// post body
.post-body {
@extend %t-copy-sub1;
// clear: both; //TO-DO: confirm that removing this is ok for all cases of discussion posts.
padding: ($baseline/2) 0;
}
// post context
.post-context {
@extend %t-copy-sub2;
margin-top: $baseline;
color: $gray-d1;
color: $forum-color-copy-light;
font-weight: 100;
// CASE: no courseware context or cohort visibility rules
&:empty {
display: none;
}
// post visibility - cohorts
.group-visibility-label {
margin-top: ($baseline/4);
}
}
}
......@@ -193,10 +174,6 @@ body.discussion {
margin-bottom: 0;
}
.thread-main-wrapper, .thread-responses-wrapper {
padding: $baseline;
}
.discussion-article {
@include transition(all .2s linear 0s);
border: 1px solid $forum-color-border;
......@@ -290,13 +267,6 @@ body.discussion {
}
}
// Custom styling for the list of user threads
.discussion-user-threads {
.discussion-post {
padding: $baseline/2;
}
}
.thread-wrapper,
.forum-new-post-form {
img {
......
lms/templates/ux/reference/course-skeleton.html
......@@ -56,7 +56,7 @@
id="search"
placeholder="Search all the things"
/>
<button class="btn-brand btn-small search-btn" type="button">Search</button>
<button class="btn btn-small search-btn" type="button">Search</button>
</form>
</div>
</div>
......
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