From 9899a1e520230c6b353e3ca28bd5592dd30429a2 Mon Sep 17 00:00:00 2001 From: Andy Armstrong Date: Thu, 18 Aug 2016 22:28:30 -0400 Subject: [PATCH] Fix discussion color contrast and remove gradients TNL-5163 --- .../views/discussion_thread_view.js | 5 +- .../templates/discussion/new-post.underscore | 6 +- .../templates/discussion/thread.underscore | 2 +- .../discussion/discussion_board.html | 2 +- .../teams/templates/team-profile.underscore | 2 +- lms/static/sass/_build-lms-v1.scss | 1 + .../sass/discussion/_discussion-v1.scss | 68 +++++++++++++++++++ lms/static/sass/discussion/_discussion.scss | 14 ---- lms/static/sass/discussion/_mixins.scss | 27 +------- .../discussion/utilities/_variables-v1.scss | 5 +- .../discussion/utilities/_variables-v2.scss | 1 + .../discussion/views/_create-edit-post.scss | 8 +-- .../sass/discussion/views/_response.scss | 1 - lms/static/sass/discussion/views/_thread.scss | 19 ------ lms/static/sass/views/_teams.scss | 1 - .../discussion/_discussion_inline.html | 2 +- 16 files changed, 89 insertions(+), 75 deletions(-) create mode 100644 lms/static/sass/discussion/_discussion-v1.scss diff --git a/common/static/common/js/discussion/views/discussion_thread_view.js b/common/static/common/js/discussion/views/discussion_thread_view.js index b863dee30d..cbd14298cd 100644 --- a/common/static/common/js/discussion/views/discussion_thread_view.js +++ b/common/static/common/js/discussion/views/discussion_thread_view.js @@ -328,7 +328,10 @@ numResponses: responseLimit }, true); } - $loadMoreButton = $(' + + diff --git a/common/static/common/templates/discussion/thread.underscore b/common/static/common/templates/discussion/thread.underscore index e8cebdca28..08eceb1755 100644 --- a/common/static/common/templates/discussion/thread.underscore +++ b/common/static/common/templates/discussion/thread.underscore @@ -26,7 +26,7 @@
- <%- gettext("Submit") %> +
<% } %> diff --git a/lms/djangoapps/discussion/templates/discussion/discussion_board.html b/lms/djangoapps/discussion/templates/discussion/discussion_board.html index f3c119e1cd..72d37bb186 100644 --- a/lms/djangoapps/discussion/templates/discussion/discussion_board.html +++ b/lms/djangoapps/discussion/templates/discussion/discussion_board.html @@ -65,7 +65,7 @@ DiscussionBoardFactory({ ## Add Post button % if has_permission(user, 'create_thread', course.id):
- +
% endif ## Search box diff --git a/lms/djangoapps/teams/static/teams/templates/team-profile.underscore b/lms/djangoapps/teams/static/teams/templates/team-profile.underscore index ee01306134..adb58c4fcb 100644 --- a/lms/djangoapps/teams/static/teams/templates/team-profile.underscore +++ b/lms/djangoapps/teams/static/teams/templates/team-profile.underscore @@ -5,7 +5,7 @@ data-user-create-comment="<%- !readOnly %>" data-user-create-subcomment="<%- !readOnly %>"> <% if ( !readOnly) { %> - <% } %> diff --git a/lms/static/sass/_build-lms-v1.scss b/lms/static/sass/_build-lms-v1.scss index bed818540f..25dc84bd7e 100644 --- a/lms/static/sass/_build-lms-v1.scss +++ b/lms/static/sass/_build-lms-v1.scss @@ -65,6 +65,7 @@ @import "discussion/utilities/variables-v1"; @import "discussion/mixins"; @import 'discussion/discussion'; // Process old file after definitions but before everything else, partial is deprecated. +@import 'discussion/discussion-v1'; // Non-Pattern Library styling @import "discussion/elements/actions"; @import "discussion/elements/editor"; @import "discussion/elements/labels"; diff --git a/lms/static/sass/discussion/_discussion-v1.scss b/lms/static/sass/discussion/_discussion-v1.scss new file mode 100644 index 0000000000..80af8faaf8 --- /dev/null +++ b/lms/static/sass/discussion/_discussion-v1.scss @@ -0,0 +1,68 @@ +// ------------------------------------------------ +// Styling for non-Pattern Library discussion pages +// ------------------------------------------------ + +// Note: replace with globals from common/static/sass/edx-pattern-library-shims when available +%pattern-library-btn { + @include transition( + color 0.125s ease-in-out 0s, + border-color 0.125s ease-in-out 0s, + background 0.125s ease-in-out 0s, + box-shadow 0.125s ease-in-out 0s + ); + display: inline-block; + border: 1px solid $forum-color-active-thread; + border-radius: 3px; + margin: 0; + background-image: none; + box-shadow: none; + height: 40px; + text-shadow: none; + font-size: 14px; + font-weight: 600; + + // Display: block, one button per line, full width + &.block { + display: block; + width: 100%; + } + + // STATE: is disabled + &:disabled, + &.is-disabled { + pointer-events: none; + outline: none; + cursor: not-allowed; + } + + &:hover, + &:active, + &:focus { + border-color: $forum-color-hover; + background-color: $forum-color-hover; + background-image: none; + box-shadow: none; + color: $forum-color-active-text; + text-decoration: none; // Don't show underlines on links that are styled as buttons + } +} + +// Layout control for discussion modules that does not apply to the discussion board +.discussion-module { + .discussion { + clear: both; + padding-top: ($baseline/2); + } + + .btn { + @extend %pattern-library-btn; + background-color: $forum-color-background; + color: $forum-color-active-thread; + } + + .btn-brand { + @extend %pattern-library-btn; + background-color: $forum-color-active-thread; + color: $forum-color-active-text; + } +} diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 7ed23a75c1..f33fcc1b72 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -18,13 +18,11 @@ body.discussion { } .post-cancel { - @include white-button; @include float(left); margin: ($baseline/2) 0 0 ($baseline*0.75); } .post-update { - @include blue-button; @include float(left); margin-top: ($baseline/2); padding-bottom: ($baseline/10); @@ -285,7 +283,6 @@ body.discussion { } .discussion-submit-post { - @include blue-button; @include float(left); } } @@ -311,7 +308,6 @@ body.discussion { .new-post-btn { @include float(right); @include margin-right(4px); - @include blue-button; } div.add-response.post-extended-content { @@ -382,13 +378,11 @@ section.discussion { } .post-cancel { - @include white-button; @include float(left); @include margin($baseline/2, 0, 0, $baseline*0.75); } .post-update { - @include blue-button; @include float(left); height: 37px; margin-top: ($baseline/2); @@ -431,9 +425,6 @@ section.discussion-pagination { list-style: none; display: inline-block; padding-right: 0.5em; - a { - @include white-button; - } &.current-page span { display: inline-block; height: 35px; @@ -471,14 +462,9 @@ section.discussion-pagination { } .load-response-button { - @include white-button; - @include linear-gradient(top, $white 35%, $gray-l4); position: relative; margin: ($baseline/2) 0; - border: 1px solid $forum-color-border; width: 100%; - box-shadow: 0 1px 1px $shadow-l1; text-align: left; - font-weight: normal; } } diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index 2d6a8b9207..ea6bb0e79a 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -15,37 +15,14 @@ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); } -@mixin blue-button { - @include discussion-button(); - @include linear-gradient(top, #6dccf1, #38a8e5); - border-color: #2d81ad; - color: $white; - - &:hover, &:focus { - @include linear-gradient(top, #4fbbe4, #2090d0); - border-color: #297095; - } -} - @mixin white-button { @include discussion-button(); - @include linear-gradient(top, $white, $gray-l5); border-color: #aaa; + background-color: $white; color: $dark-gray; &:hover, &:focus { - @include linear-gradient(top, $white, $gray-l6); - } -} - -@mixin dark-grey-button { - @include discussion-button(); - @include linear-gradient(top, #777, #555); - border-color: #222; - color: $white; - - &:hover, &:focus { - background: -webkit-linear-gradient(top, #888, #666); + background-color: $white; } } diff --git a/lms/static/sass/discussion/utilities/_variables-v1.scss b/lms/static/sass/discussion/utilities/_variables-v1.scss index 9911b9fc89..a4a3762aa8 100644 --- a/lms/static/sass/discussion/utilities/_variables-v1.scss +++ b/lms/static/sass/discussion/utilities/_variables-v1.scss @@ -3,8 +3,9 @@ // color variables $forum-color-background: $white; -$forum-color-active-thread: $white !default; -$forum-color-active-text: $base-font-color !default; +$forum-color-active-thread: $blue !default; +$forum-color-hover: $action-primary-bg !default; +$forum-color-active-text: $white !default; $forum-color-pinned: $pink !default; $forum-color-reported: $pink !default; $forum-color-closed: $black !default; diff --git a/lms/static/sass/discussion/utilities/_variables-v2.scss b/lms/static/sass/discussion/utilities/_variables-v2.scss index 65774da144..26d6c311b1 100644 --- a/lms/static/sass/discussion/utilities/_variables-v2.scss +++ b/lms/static/sass/discussion/utilities/_variables-v2.scss @@ -4,6 +4,7 @@ // color variables $forum-color-background: $lms-container-background-color !default; $forum-color-active-thread: $lms-active-color !default; +$forum-color-hover: palette(primary, dark) !default; $forum-color-active-text: $lms-container-background-color !default; $forum-color-pinned: palette(secondary, dark) !default; $forum-color-reported: palette(secondary, dark) !default; diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss index 9594f6be77..bfd4007484 100644 --- a/lms/static/sass/discussion/views/_create-edit-post.scss +++ b/lms/static/sass/discussion/views/_create-edit-post.scss @@ -139,12 +139,12 @@ padding: ($baseline/2); &:hover { - border-color: $gray-l3; + border-color: $forum-color-border; } &.is-enabled { - border-color: $blue; - color: $blue; + border-color: $forum-color-following; + color: $forum-color-following; } .post-option-input { @@ -162,13 +162,11 @@ // UI: actions .forum-new-post-form { .submit { - @include blue-button; @include margin-right($baseline/2); display: inline-block; } .cancel { - @include white-button; display: inline-block; } } diff --git a/lms/static/sass/discussion/views/_response.scss b/lms/static/sass/discussion/views/_response.scss index 2100274b41..171fec8893 100644 --- a/lms/static/sass/discussion/views/_response.scss +++ b/lms/static/sass/discussion/views/_response.scss @@ -164,7 +164,6 @@ } .discussion-submit-comment { - @include blue-button; @include float(left); margin-top: 8px; } diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index d71323fa35..9a44a5d0ca 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -175,25 +175,6 @@ body.discussion { } } -// Layout control for discussion modules that does not apply to the discussion board -.discussion-module { - .discussion { - clear: both; - padding-top: ($baseline/2); - } - - .btn-brand { - @include blue-button; - display: inline-block; - padding-bottom: ($baseline/10); - height: 37px; - - &:hover, &:focus { - border-color: #222; - } - } -} - // Styling for discussion threads .discussion-thread { padding: 0; diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss index 99627d6a6d..32dd58b33c 100644 --- a/lms/static/sass/views/_teams.scss +++ b/lms/static/sass/views/_teams.scss @@ -339,7 +339,6 @@ .new-post-btn { @include float(right); - @include blue-button; } .page-content-main { diff --git a/lms/templates/discussion/_discussion_inline.html b/lms/templates/discussion/_discussion_inline.html index a383150cf8..1dac1d0fb6 100644 --- a/lms/templates/discussion/_discussion_inline.html +++ b/lms/templates/discussion/_discussion_inline.html @@ -11,7 +11,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string ${_("Show Discussion")} % if can_create_thread: - + % endif