diff --git a/common/lib/xmodule/xmodule/tabs.py b/common/lib/xmodule/xmodule/tabs.py index 49d98c27ec..fbea4aa858 100644 --- a/common/lib/xmodule/xmodule/tabs.py +++ b/common/lib/xmodule/xmodule/tabs.py @@ -108,6 +108,13 @@ class CourseTab(object): """ raise NotImplementedError() + @property + def uses_bootstrap(self): + """ + Returns true if this tab is rendered with Bootstrap. + """ + return False + def get(self, key, default=None): """ Akin to the get method on Python dictionary objects, gracefully returns the value associated with the diff --git a/common/static/common/templates/discussion/customwmd-prompt.underscore b/common/static/common/templates/discussion/customwmd-prompt.underscore index 765919a736..a5e8fc3f85 100644 --- a/common/static/common/templates/discussion/customwmd-prompt.underscore +++ b/common/static/common/templates/discussion/customwmd-prompt.underscore @@ -44,8 +44,8 @@ %>
- - + +
diff --git a/common/static/common/templates/discussion/new-post.underscore b/common/static/common/templates/discussion/new-post.underscore index 3ccfcc742f..29ee79e998 100644 --- a/common/static/common/templates/discussion/new-post.underscore +++ b/common/static/common/templates/discussion/new-post.underscore @@ -2,7 +2,7 @@ class="thread-title"><%- gettext("Add a Post") %>> <% if (mode === 'inline') { %> - @@ -67,7 +67,7 @@ <% } %>
- - + +
diff --git a/common/static/common/templates/discussion/response-comment-edit.underscore b/common/static/common/templates/discussion/response-comment-edit.underscore index be36b57962..8460ffe50d 100644 --- a/common/static/common/templates/discussion/response-comment-edit.underscore +++ b/common/static/common/templates/discussion/response-comment-edit.underscore @@ -4,6 +4,6 @@
<%- body %>
- - + + diff --git a/common/static/common/templates/discussion/thread-edit.underscore b/common/static/common/templates/discussion/thread-edit.underscore index 856b73f2ea..25d6f457ba 100644 --- a/common/static/common/templates/discussion/thread-edit.underscore +++ b/common/static/common/templates/discussion/thread-edit.underscore @@ -14,5 +14,5 @@

<%- gettext('Edit your post below.') %>

<%- body %>
- - + + diff --git a/common/static/common/templates/discussion/thread-response-edit.underscore b/common/static/common/templates/discussion/thread-response-edit.underscore index e3a516d94b..97f7387eeb 100644 --- a/common/static/common/templates/discussion/thread-response-edit.underscore +++ b/common/static/common/templates/discussion/thread-response-edit.underscore @@ -4,6 +4,6 @@
<%- body %>
- - + + diff --git a/common/static/common/templates/discussion/thread-response.underscore b/common/static/common/templates/discussion/thread-response.underscore index 2b80d0cfac..a6934b35dc 100644 --- a/common/static/common/templates/discussion/thread-response.underscore +++ b/common/static/common/templates/discussion/thread-response.underscore @@ -15,7 +15,7 @@
- +
<% } %> diff --git a/common/static/common/templates/discussion/thread.underscore b/common/static/common/templates/discussion/thread.underscore index 9654470f97..8205854fc8 100644 --- a/common/static/common/templates/discussion/thread.underscore +++ b/common/static/common/templates/discussion/thread.underscore @@ -10,7 +10,7 @@
<% if (!readOnly) { %>
-
@@ -29,7 +29,7 @@
- +
<% } %> diff --git a/lms/djangoapps/courseware/views/views.py b/lms/djangoapps/courseware/views/views.py index 57b29386a0..51e24103cf 100644 --- a/lms/djangoapps/courseware/views/views.py +++ b/lms/djangoapps/courseware/views/views.py @@ -554,11 +554,11 @@ class CourseTabView(EdxFragmentView): log.exception("Error while rendering courseware-error page") raise - def uses_bootstrap(self, request, course): + def uses_bootstrap(self, request, course, tab): """ Returns true if this view uses Bootstrap. """ - return False + return tab.uses_bootstrap def create_page_context(self, request, course=None, tab=None, **kwargs): """ @@ -566,7 +566,7 @@ class CourseTabView(EdxFragmentView): """ staff_access = has_access(request.user, 'staff', course) supports_preview_menu = tab.get('supports_preview_menu', False) - uses_bootstrap = self.uses_bootstrap(request, course) + uses_bootstrap = self.uses_bootstrap(request, course, tab=tab) if supports_preview_menu: masquerade, masquerade_user = setup_masquerade(request, course.id, staff_access, reset_masquerade_data=True) request.user = masquerade_user @@ -610,8 +610,9 @@ class CourseTabView(EdxFragmentView): """ if not page_context: page_context = self.create_page_context(request, course=course, tab=tab, **kwargs) + tab = page_context['tab'] page_context['fragment'] = fragment - if self.uses_bootstrap(request, course): + if self.uses_bootstrap(request, course, tab=tab): return render_to_response('courseware/tab-view.html', page_context) else: return render_to_response('courseware/tab-view-v2.html', page_context) diff --git a/lms/djangoapps/discussion/__init__.py b/lms/djangoapps/discussion/__init__.py index e69de29bb2..2ab03ad9fc 100644 --- a/lms/djangoapps/discussion/__init__.py +++ b/lms/djangoapps/discussion/__init__.py @@ -0,0 +1,11 @@ +""" +Discussion settings and flags. +""" + +from openedx.core.djangoapps.waffle_utils import WaffleFlag, WaffleFlagNamespace + +# Namespace for course experience waffle flags. +WAFFLE_FLAG_NAMESPACE = WaffleFlagNamespace(name='edx_discussions') + +# Waffle flag to enable the use of Bootstrap +USE_BOOTSTRAP_FLAG = WaffleFlag(WAFFLE_FLAG_NAMESPACE, 'use_bootstrap') diff --git a/lms/djangoapps/discussion/plugins.py b/lms/djangoapps/discussion/plugins.py index 77037d41a2..fc4866cd28 100644 --- a/lms/djangoapps/discussion/plugins.py +++ b/lms/djangoapps/discussion/plugins.py @@ -9,6 +9,8 @@ import django_comment_client.utils as utils from courseware.tabs import EnrolledTab from xmodule.tabs import TabFragmentViewMixin +from . import USE_BOOTSTRAP_FLAG + class DiscussionTab(TabFragmentViewMixin, EnrolledTab): """ @@ -30,3 +32,10 @@ class DiscussionTab(TabFragmentViewMixin, EnrolledTab): if not super(DiscussionTab, cls).is_enabled(course, user): return False return utils.is_discussion_enabled(course.id) + + @property + def uses_bootstrap(self): + """ + Returns true if this tab is rendered with Bootstrap. + """ + return USE_BOOTSTRAP_FLAG.is_enabled() diff --git a/lms/djangoapps/discussion/static/discussion/js/discussion_router.js b/lms/djangoapps/discussion/static/discussion/js/discussion_router.js index 353ff0de03..4175f49646 100644 --- a/lms/djangoapps/discussion/static/discussion/js/discussion_router.js +++ b/lms/djangoapps/discussion/static/discussion/js/discussion_router.js @@ -65,7 +65,6 @@ }, allThreads: function() { - this.discussionBoardView.updateSidebar(); return this.discussionBoardView.goHome(); }, @@ -106,9 +105,6 @@ is_commentable_divided: this.discussion.is_commentable_divided }); this.main.render(); - this.main.on('thread:responses:rendered', function() { - return self.discussionBoardView.updateSidebar(); - }); return this.thread.on('thread:thread_type_updated', this.showMain); }, diff --git a/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js b/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js index 02ccf6c900..c2dafffd24 100644 --- a/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js +++ b/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js @@ -53,7 +53,6 @@ el: this.$('.forum-search') }).render(); this.renderBreadcrumbs(); - $(window).bind('load scroll resize', _.bind(this.updateSidebar, this)); this.showBrowseMenu(true); return this; }, @@ -88,7 +87,6 @@ $('.forum-nav-browse-filter-input').focus(); this.filterInputReset(); } - this.updateSidebar(); } }, @@ -101,7 +99,6 @@ if (this.selectedTopicId !== 'undefined') { this.$('.forum-nav-browse-filter-input').attr('aria-activedescendant', this.selectedTopicId); } - this.updateSidebar(); } }, @@ -135,37 +132,6 @@ this.discussionThreadListView.clearSearchAlerts(); }, - updateSidebar: function() { - var amount, browseFilterHeight, discussionBottomOffset, discussionsBodyBottom, - discussionsBodyTop, headerHeight, refineBarHeight, scrollTop, sidebarHeight, topOffset, - windowHeight, $discussionBody, $sidebar; - scrollTop = $(window).scrollTop(); - windowHeight = $(window).height(); - $discussionBody = this.$('.discussion-column'); - discussionsBodyTop = $discussionBody[0] ? $discussionBody.offset().top : undefined; - discussionsBodyBottom = discussionsBodyTop + $discussionBody.outerHeight(); - $sidebar = this.$('.forum-nav'); - if (scrollTop > discussionsBodyTop - this.sidebar_padding) { - $sidebar.css('top', scrollTop - discussionsBodyTop + this.sidebar_padding); - } else { - $sidebar.css('top', '0'); - } - sidebarHeight = windowHeight - Math.max(discussionsBodyTop - scrollTop, this.sidebar_padding); - topOffset = scrollTop + windowHeight; - discussionBottomOffset = discussionsBodyBottom + this.sidebar_padding; - amount = Math.max(topOffset - discussionBottomOffset, 0); - sidebarHeight = sidebarHeight - this.sidebar_padding - amount; - sidebarHeight = Math.min(sidebarHeight + 1, $discussionBody.outerHeight()); - $sidebar.css('height', sidebarHeight); - headerHeight = this.$('.forum-nav-header').outerHeight(); - refineBarHeight = this.$('.forum-nav-refine-bar').outerHeight(); - browseFilterHeight = this.$('.forum-nav-browse-filter').outerHeight(); - this.$('.forum-nav-thread-list') - .css('height', (sidebarHeight - headerHeight - refineBarHeight - 2) + 'px'); - this.$('.forum-nav-browse-menu') - .css('height', (sidebarHeight - headerHeight - browseFilterHeight - 2) + 'px'); - }, - goHome: function() { var url = DiscussionUtil.urlFor('notifications_status', window.user.get('id')); HtmlUtils.append(this.$('.forum-content').empty(), HtmlUtils.template(discussionHomeTemplate)({})); diff --git a/lms/djangoapps/discussion/static/discussion/templates/search.underscore b/lms/djangoapps/discussion/static/discussion/templates/search.underscore index e0239c8ad4..d7e724cce9 100644 --- a/lms/djangoapps/discussion/static/discussion/templates/search.underscore +++ b/lms/djangoapps/discussion/static/discussion/templates/search.underscore @@ -1,9 +1,9 @@ " /> - + diff --git a/lms/djangoapps/discussion/templates/discussion/discussion_board_fragment.html b/lms/djangoapps/discussion/templates/discussion/discussion_board_fragment.html index 94dc0052b2..bad1389b1b 100644 --- a/lms/djangoapps/discussion/templates/discussion/discussion_board_fragment.html +++ b/lms/djangoapps/discussion/templates/discussion/discussion_board_fragment.html @@ -15,7 +15,7 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str from openedx.core.djangolib.markup import HTML %> -
- +
% endif ## Search box @@ -46,16 +46,15 @@ from openedx.core.djangolib.markup import HTML lang="${course.language}" % endif > -
- - -
+
+
+
diff --git a/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html b/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html index 75e9e5b05f..283ac87589 100644 --- a/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html +++ b/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html @@ -51,7 +51,7 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str <%include file="../courseware/course_navigation.html" args="active_page='discussion'" /> <%block name="content"> -
+
diff --git a/lms/djangoapps/discussion/views.py b/lms/djangoapps/discussion/views.py index 00c718e69c..e5dde5bc46 100644 --- a/lms/djangoapps/discussion/views.py +++ b/lms/djangoapps/discussion/views.py @@ -50,6 +50,8 @@ from student.models import CourseEnrollment from util.json_request import JsonResponse, expect_json from xmodule.modulestore.django import modulestore +from . import USE_BOOTSTRAP_FLAG + log = logging.getLogger("edx.discussions") try: import newrelic.agent @@ -61,6 +63,8 @@ THREADS_PER_PAGE = 20 INLINE_THREADS_PER_PAGE = 20 PAGES_NEARBY_DELTA = 2 +BOOTSTRAP_DISCUSSION_CSS_PATH = 'css/discussion/lms-discussion-bootstrap.css' + @contextmanager def newrelic_function_trace(function_name): @@ -399,6 +403,7 @@ def _create_base_discussion_view_context(request, course_key): user_info = cc_user.to_dict() course = get_course_with_access(user, 'load', course_key, check_if_enrolled=True) course_settings = make_course_settings(course, user) + uses_bootstrap = USE_BOOTSTRAP_FLAG.is_enabled() return { 'csrf': csrf(request)['csrf_token'], 'course': course, @@ -415,7 +420,8 @@ def _create_base_discussion_view_context(request, course_key): ), 'course_settings': course_settings, 'disable_courseware_js': True, - 'uses_pattern_library': True, + 'uses_bootstrap': uses_bootstrap, + 'uses_pattern_library': not uses_bootstrap, } @@ -737,7 +743,13 @@ class DiscussionBoardFragmentView(EdxFragmentView): works in conjunction with the Django pipeline to ensure that in development mode the files are loaded individually, but in production just the single bundle is loaded. """ - if get_language_bidi(): + is_right_to_left = get_language_bidi() + if USE_BOOTSTRAP_FLAG.is_enabled(): + css_file = BOOTSTRAP_DISCUSSION_CSS_PATH + if is_right_to_left: + css_file = css_file.replace('.css', '-rtl.css') + return [css_file] + elif is_right_to_left: return self.get_css_dependencies('style-discussion-main-rtl') else: return self.get_css_dependencies('style-discussion-main') diff --git a/lms/static/sass/bootstrap/_layouts.scss b/lms/static/sass/bootstrap/_layouts.scss index 3ea2e58bab..428933346a 100644 --- a/lms/static/sass/bootstrap/_layouts.scss +++ b/lms/static/sass/bootstrap/_layouts.scss @@ -44,6 +44,16 @@ border-bottom: 1px solid $border-color; padding: 20px; + .page-header-search { + @include media-breakpoint-up(md) { + margin-right: $baseline; + } + + .search-form { + display: flex; + } + } + .page-header-main { flex-grow: 1; // This column should consume all the available space } diff --git a/lms/static/sass/bootstrap/_legacy.scss b/lms/static/sass/bootstrap/_legacy.scss index 1252cf804f..7cdb7b7a45 100644 --- a/lms/static/sass/bootstrap/_legacy.scss +++ b/lms/static/sass/bootstrap/_legacy.scss @@ -65,6 +65,8 @@ $success-color: theme-color("success") !default; $success-color-hover: theme-color("success") !default; $lms-hero-color: #005e90 !default; $lms-purchase-color: theme-color("success") !default; +$border-color-2: $gray-400 !default; +$link-hover: #065683 !default; // wcag2a compliant // Blacks $black: rgb(0, 0, 0) !default; diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index f679c62803..419108ee91 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -5,7 +5,7 @@ $notification-highlight-border-color: $uxpl-green-base !default; $lms-border-color: $uxpl-gray-background !default; $notification-background: rgb(255, 255, 255) !default - .home { +.home { @include clearfix(); max-width: 1140px; diff --git a/lms/static/sass/discussion/_build-discussion.scss b/lms/static/sass/discussion/_build-discussion.scss index c631d529bb..574c06d012 100644 --- a/lms/static/sass/discussion/_build-discussion.scss +++ b/lms/static/sass/discussion/_build-discussion.scss @@ -6,6 +6,12 @@ // Set the relative path to the static root $static-path: '../..'; +// Bootstrap support for use with shared partials +@import 'bootstrap/theme'; +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import "bootstrap/scss/mixins/breakpoints"; + // Styles for discussions @import "utilities/variables-v1"; @import "mixins"; diff --git a/lms/static/sass/discussion/_build.scss b/lms/static/sass/discussion/_build.scss index 4b104caffb..46c3d52941 100644 --- a/lms/static/sass/discussion/_build.scss +++ b/lms/static/sass/discussion/_build.scss @@ -4,6 +4,12 @@ // Set the relative path to the static root $static-path: '../..' !default; +// Bootstrap support for use with shared partials +@import 'bootstrap/theme'; +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import "bootstrap/scss/mixins/breakpoints"; + // Configuration @import '../config'; @import 'base/variables'; diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 44dd2b6113..6e58910aac 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -5,10 +5,16 @@ .discussion-body { @include clearfix(); + width: 100%; border: none; background: transparent; box-shadow: none; + @include media-breakpoint-up(md) { + display: flex; + flex-direction: row-reverse; + } + .bottom-post-status { padding: 30px; font-size: $forum-x-large-font-size; @@ -33,7 +39,7 @@ .discussion-reply-new { @include clearfix(); - @include transition(opacity .2s linear 0s); + @include transition(opacity 0.2s linear 0s); h4 { font-size: $forum-large-font-size; @@ -89,7 +95,6 @@ margin-top: $baseline; margin-bottom: $baseline; } - } .discussion-show { @@ -101,8 +106,8 @@ text-align: center; &.shown { - background-color: $btn-default-background-color; - color: $uxpl-primary-blue; + background-color: theme-color("inverse"); + color: theme-color("primary"); } } @@ -154,7 +159,7 @@ section.discussion-pagination { font-size: $forum-base-font-size; font-weight: 700; line-height: 32px; - color: $gray-d3; + color: theme-color("gray-dark"); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); } } diff --git a/lms/static/sass/discussion/_layouts.scss b/lms/static/sass/discussion/_layouts.scss index aaf7c649d7..eec2b9e1b7 100644 --- a/lms/static/sass/discussion/_layouts.scss +++ b/lms/static/sass/discussion/_layouts.scss @@ -1,6 +1,4 @@ // Layouts for discussion pages -@import '../course/base/extends'; - .discussion-user-profile-board { .discussion-profile-title { margin-bottom: $baseline / 5; @@ -27,8 +25,24 @@ } } +.forum-nav { + @include media-breakpoint-up(md) { + // Note: a single width setting is not obeyed by a flex layout + min-width: 300px; + max-width: 300px; + } +} + .discussion-column { - min-height: 500px; + flex-grow: 1; // This column should consume all the available space + margin-bottom: $baseline; + + @include media-breakpoint-up(md) { + @include margin-left($baseline); + + min-height: 500px; + margin-bottom: 0; + } .new-post-article { margin-top: -$baseline; diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index a61760a727..b5e13fd923 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -20,7 +20,7 @@ border-color: #aaa; background-color: $white; - color: $dark-gray; + color: theme-color("gray-dark"); &:hover, &:focus { background-color: $white; @@ -38,7 +38,7 @@ height: 125px; background: $forum-color-background; font-size: $forum-base-font-size; - font-family: $sans-serif; + font-family: $font-family-sans-serif; line-height: 1.6; } diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index bbb4c95260..e4d02f8cc3 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -75,7 +75,7 @@ width: 100%; border-radius: $forum-border-radius; margin: ($baseline/4) 0 0 0; - border: 1px solid $gray-l3; + border: 1px solid $forum-color-border; padding: ($baseline/2) ($baseline*0.75); background: $forum-color-background; @@ -96,13 +96,13 @@ &::after { @include margin-right(1px); - border-color: $transparent; + border-color: transparent; border-bottom-color: $white; border-width: 6px; } &::before { - border-color: $transparent; + border-color: transparent; border-bottom-color: $forum-color-border; border-width: 7px; } @@ -128,7 +128,7 @@ display: inline-block; border: 1px solid transparent; border-radius: $forum-border-radius; - color: $gray-l1; + color: theme-color("secondary"); .action-icon { display: inline-block; @@ -138,7 +138,7 @@ border: 1px solid $forum-color-border; border-radius: $forum-border-radius; text-align: center; - color: $gray-l1; + color: theme-color("secondary"); .icon { @include margin-right(0); @@ -168,13 +168,13 @@ // specific button styles &.action-follow { .action-label { - color: $blue-d1; + color: theme-color("primary"); } &.is-checked, &:hover, &:focus { .action-icon { background-color: $forum-color-following; - border: 1px solid $blue-d1; + border: 1px solid theme-color("primary"); color: $white; } } @@ -191,17 +191,17 @@ &.is-checked, &:hover, &:focus { .action-icon { - background-color: $green-d1; - border: 1px solid $green-d2; + background-color: $green; + border: 1px solid $green; color: $white; } } &:hover, &:focus { - border-color: $green-d2; + border-color: $green; .action-label { - color: $green-d2; + color: $green; } } } @@ -209,18 +209,18 @@ &.action-endorse { &.is-checked, &:hover, &:focus { .action-icon { - background-color: $blue-d1; - border: 1px solid $blue-d2; + background-color: theme-color("primary"); + border: 1px solid theme-color("primary"); color: $white; } } &:hover, &:focus { - border-color: $blue-d2; + border-color: theme-color("primary"); background-color: $forum-color-background; .action-label { - color: $blue-d2; + color: theme-color("primary"); } } } @@ -228,18 +228,18 @@ &.action-answer { &.is-checked, &:hover, &:focus { .action-icon { - border: 1px solid $green-d1; - background-color: $green-d1; + border: 1px solid $green; + background-color: $green; color: $white; } } &:hover, &:focus { - border-color: $green-d1; + border-color: $green; background-color: $forum-color-background; .action-label { - color: $green-d2; + color: $green; } } } @@ -249,13 +249,13 @@ position: relative; &:hover, &:focus { - border-color: $gray; + border-color: theme-color("dark"); background-color: $forum-color-background; .action-icon { - border: 1px solid $gray; - background-color: $gray; - color: $white; + border: 1px solid theme-color("dark"); + background-color: theme-color("dark"); + color: theme-color("inverse"); } .action-label { @@ -280,7 +280,7 @@ width: 100%; padding: ($baseline/10) 0; white-space: nowrap; - color: $gray-l1; + color: theme-color("secondary"); &:hover, &:focus { color: $link-color; diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss index ae3646c07c..5b9f6b1471 100644 --- a/lms/static/sass/discussion/elements/_editor.scss +++ b/lms/static/sass/discussion/elements/_editor.scss @@ -141,7 +141,7 @@ > form > input[type="button"] { border: 1px solid #888; - font-family: $sans-serif; + font-family: $font-family-sans-serif; font-size: $forum-x-large-font-size; } diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index c003522eb6..edd4b0f022 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -3,39 +3,16 @@ @import '../../edx-pattern-library-shims/base/variables'; -.forum-nav { - border: 1px solid #aaa; - border-radius: $forum-border-radius; -} - // ------ // Discussion Forums Page Header // ------ .discussion-board > .page-header { - $searchBoxPadding: rem($baseline / 2 + 2); - $searchBoxHeight: (rem($baseline) + ($searchBoxPadding * 2)); - - div { - display: inline-block; - vertical-align: middle; - } - .has-breadcrumbs .breadcrumbs { margin-bottom: ($baseline / 2); font-size: font-size(base); font-weight: font-weight(semi-bold); line-height: $base-line-height; } - - .page-header-main { - line-height: $searchBoxHeight; - } - - .page-header-secondary > .form-actions > button { - // Overrides base size set in lms/static/sass/shared-v2/_layouts.scss - // Done to match size of UXPL's search box. This is bad, I know. - height: $searchBoxHeight !important; - } } // ----------- @@ -43,7 +20,7 @@ // ----------- .forum-nav-browse-menu-wrapper { border-bottom: 1px solid $forum-color-border; - background: $gray-l5; + background: theme-color("light"); } .forum-nav-browse-filter { @@ -113,13 +90,18 @@ } .forum-nav-browse-menu { + @include padding-left(0); + + margin: 0; font-size: $forum-base-font-size; overflow-y: scroll; list-style: none; + max-height: 600px; } .forum-nav-browse-submenu { list-style: none; + margin: 0; padding: 0; li { @@ -139,7 +121,7 @@ font-size: $forum-small-font-size; border-bottom: 1px solid $forum-color-border; - background-color: $gray-l5; + background-color: theme-color("light"); padding: ($baseline/4) ($baseline/2); color: $black; } @@ -318,7 +300,7 @@ margin: 0 ($baseline / 4); // 125 is the width we need to save for the "X new" comments indicator - and we want to clip the preview // at the same length whether there are unread comments for this story or not. - max-width: calc(100% - 125px); + max-width: calc(100% - 75px); flex-grow: 1; // This column should consume all the available space } @@ -327,7 +309,7 @@ @include text-align(right); - min-width: 90px; + min-width: 40px; white-space: nowrap; } @@ -367,7 +349,7 @@ border-radius: $forum-border-radius; padding: ($baseline/10) ($baseline/5); min-width: 2em; // Fit most comment counts but allow expansion if necessary - background-color: $gray-l4; + background-color: theme-color("light"); // Speech bubble tail &::after { @@ -383,13 +365,13 @@ border-style: solid; @include border-width(0, ($baseline/4), ($baseline/4), 0); - @include border-color(transparent, $gray-l4, transparent, transparent); + @include border-color(transparent, $forum-color-border, transparent, transparent); } } .forum-nav-load-more { border-bottom: 1px solid $forum-color-border; - background-color: $gray-l5; + background-color: theme-color("light"); } %forum-nav-load-more-content { diff --git a/lms/static/sass/discussion/lms-discussion-bootstrap.scss b/lms/static/sass/discussion/lms-discussion-bootstrap.scss new file mode 100644 index 0000000000..39cd37c319 --- /dev/null +++ b/lms/static/sass/discussion/lms-discussion-bootstrap.scss @@ -0,0 +1,44 @@ +// ------------------------------ +// LMS discussion main styling + +// Set the relative path to the static root +$static-path: '../..'; + +// Bootstrap theme +@import 'bootstrap/theme'; +@import 'bootstrap/scss/bootstrap'; + +// Legacy support +@import '../bootstrap/legacy'; + +// Base +@import '../bootstrap/base'; +@import '../bootstrap/variables'; + +// Elements +@import '../bootstrap/header'; +@import '../bootstrap/footer'; +@import '../bootstrap/navigation'; +@import '../bootstrap/layouts'; +@import '../bootstrap/components'; +@import '../course/layout/courseware_preview'; + +// Discussion variables +@import 'utilities/variables-bootstrap'; +@import 'utilities/v1-compatibility'; + +// Discussion styling +@import 'mixins'; +@import 'discussion'; // Process old file after definitions but before everything else, partial is deprecated. +@import 'layouts'; +@import 'elements/actions'; +@import 'elements/editor'; +@import 'elements/labels'; +@import 'elements/navigation'; +@import 'views/home'; +@import 'views/thread'; +@import 'views/create-edit-post'; +@import 'views/response'; +@import 'views/search'; +@import 'views/inline'; +@import 'utilities/shame'; diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index 350e15c609..2a63cf0191 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/lms/static/sass/discussion/utilities/_shame.scss @@ -24,6 +24,7 @@ // Override global label rules .forum-nav-browse-filter label { margin-bottom: 0; + width: 100%; } // Override global input rules @@ -37,15 +38,6 @@ font-size: $forum-small-font-size !important; } -// Override global ul rules -.forum-nav-browse-menu, .forum-nav-browse-submenu { - margin: 0; -} - -.forum-nav-browse-menu { - @include padding-left(0); -} - // -------------------------------- // navigation - sort and filter bar // -------------------------------- diff --git a/lms/static/sass/discussion/utilities/_v1-compatibility.scss b/lms/static/sass/discussion/utilities/_v1-compatibility.scss index 73021b549b..bf384d477a 100644 --- a/lms/static/sass/discussion/utilities/_v1-compatibility.scss +++ b/lms/static/sass/discussion/utilities/_v1-compatibility.scss @@ -58,7 +58,7 @@ // copy %t-copy { - font-family: $f-sans-serif; + font-family: $font-family-sans-serif; } %t-copy-sub1 { diff --git a/lms/static/sass/discussion/utilities/_variables-bootstrap.scss b/lms/static/sass/discussion/utilities/_variables-bootstrap.scss new file mode 100644 index 0000000000..3872c0509e --- /dev/null +++ b/lms/static/sass/discussion/utilities/_variables-bootstrap.scss @@ -0,0 +1,49 @@ +// discussion - utilities - variables +// ==================== + +// base color variables +$forum-color-primary: theme-color("primary") !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: theme-color("inverse"); +$forum-color-active-thread: $forum-color-primary !default; +$forum-color-hover: rgb(6, 86, 131) !default; +$forum-color-active-text: $white !default; +$forum-color-pinned: rgb(152, 44, 98) !default; +$forum-color-reported: rgb(152, 44, 98) !default; +$forum-color-closed: $black !default; +$forum-color-following: $forum-color-primary !default; +$forum-color-staff: $forum-color-primary !default; +$forum-color-community-ta: $green !default; +$forum-color-marked-answer: theme-color("success") !default; +$forum-color-border: $gray-300 !default; +$forum-color-error: theme-color("danger") !default; +$forum-color-hover-thread: $forum-color-background-light !default; +$forum-color-reading-thread: $forum-color-background-light !default; +$forum-color-read-post: $forum-color-copy-light !default; +$forum-color-never-read-post: $forum-color-primary !default; +$forum-color-editor-preview-label: $forum-color-copy-light !default; +$forum-color-response-count: $forum-color-copy-light !default; +$forum-color-navigation-bar: $forum-color-background-light !default; +$forum-color-count: $forum-color-copy-light !default; +$forum-color-background-label: $gray-700 !default; + +// post images +$post-image-dimension: ($baseline*3) !default; // image size + margin +$response-image-dimension: ($baseline*2.5) !default; // image size + margin +$comment-image-dimension: ($baseline*2) !default; // image size + margin + +// action-dropdown +$actions-dropdown-width: 145px; // best estimate in RU +$actions-dropdown-offset: 100px; // actions dropdown expanded more menu + +// font sizes +$forum-base-font-size: 14px; +$forum-x-large-font-size: 21px; +$forum-large-font-size: 16px; +$forum-small-font-size: 12px; + +// borders +$forum-border-radius: 3px; diff --git a/lms/static/sass/discussion/utilities/_variables-v1.scss b/lms/static/sass/discussion/utilities/_variables-v1.scss index 4aa34a17fb..66ce1a3692 100644 --- a/lms/static/sass/discussion/utilities/_variables-v1.scss +++ b/lms/static/sass/discussion/utilities/_variables-v1.scss @@ -47,7 +47,3 @@ $forum-small-font-size: 12px; // borders $forum-border-radius: 3px; - -// btn colors -$uxpl-primary-blue: rgb(0, 117, 180) !default; -$btn-default-background-color: $white; diff --git a/lms/static/sass/discussion/utilities/_variables-v2.scss b/lms/static/sass/discussion/utilities/_variables-v2.scss index cfb955c5f8..4949ca3992 100644 --- a/lms/static/sass/discussion/utilities/_variables-v2.scss +++ b/lms/static/sass/discussion/utilities/_variables-v2.scss @@ -47,7 +47,3 @@ $forum-small-font-size: font-size(x-small); // borders $forum-border-radius: $component-border-radius; - -// btn colors -$uxpl-primary-blue: palette(primary, base) !default; -$btn-default-background-color: $lms-container-background-color; diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss index fa8a85f443..635e0ca94e 100644 --- a/lms/static/sass/discussion/views/_create-edit-post.scss +++ b/lms/static/sass/discussion/views/_create-edit-post.scss @@ -132,9 +132,9 @@ width: 100%; height: 40px; box-shadow: 0 1px 3px $shadow-l1 inset; - color: $dark-gray; + color: theme-color("gray-dark"); font-size: $forum-large-font-size; - font-family: $sans-serif; + font-family: $font-family-sans-serif; } } @@ -151,7 +151,7 @@ .post-type-label { @include margin-right($baseline); - color: $gray-d3; + color: theme-color("gray-dark"); } input[type=text].field-input { diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss index 84a2ff1c51..aaac6efe2f 100644 --- a/lms/static/sass/discussion/views/_home.scss +++ b/lms/static/sass/discussion/views/_home.scss @@ -5,6 +5,13 @@ .view-discussion-home { @include padding-left($baseline); + display: none; + + // Only show this component for large sizes + @include media-breakpoint-up(lg) { + display: block; + } + section { border-bottom: 1px solid $forum-color-border; } @@ -154,9 +161,9 @@ } .helpgrid-row-navigation { - .fa-bars {color: $light-gray;} - .fa-search {color: $light-gray;} - .fa-sort {color: $light-gray;} + .fa-bars {color: theme-color("light");} + .fa-search {color: $gray-300;} + .fa-sort {color: $gray-300;} } .helpgrid-row-participation { @@ -167,6 +174,6 @@ .helpgrid-row-notification { .fa-square {color: $green;} - .fa-envelope {color: $light-gray;} + .fa-envelope {color: $gray-300;} } } diff --git a/lms/static/sass/discussion/views/_inline.scss b/lms/static/sass/discussion/views/_inline.scss index 54b16384ff..0b92f3dea6 100644 --- a/lms/static/sass/discussion/views/_inline.scss +++ b/lms/static/sass/discussion/views/_inline.scss @@ -42,7 +42,7 @@ top: $baseline / 2; position: absolute; - color: $uxpl-primary-blue; + color: theme-color("primary"); &:hover, &:focus { diff --git a/lms/static/sass/discussion/views/_response.scss b/lms/static/sass/discussion/views/_response.scss index 553138ebf0..87e3f03a4d 100644 --- a/lms/static/sass/discussion/views/_response.scss +++ b/lms/static/sass/discussion/views/_response.scss @@ -20,8 +20,7 @@ // wrapper - response plus comment area .forum-response { - @include animation(fadeIn .3s); - + animation: fadeIn 0.3s; position: relative; margin: $baseline 0; border: 1px solid $forum-color-border; @@ -76,7 +75,7 @@ display: block; padding: ($baseline/2) $baseline; width: 100%; - background: $gray-l6; + background: theme-color("lightest"); box-shadow: 0 1px 3px -1px $shadow inset; } @@ -146,7 +145,7 @@ @include border-radius(0, 0, $forum-border-radius, $forum-border-radius); - background: $gray-l6; + background: theme-color("lightest"); box-shadow: 0 1px 3px -1px $shadow inset; > li { diff --git a/lms/static/sass/discussion/views/_search.scss b/lms/static/sass/discussion/views/_search.scss index 4f6c4d5061..3dd402fa10 100644 --- a/lms/static/sass/discussion/views/_search.scss +++ b/lms/static/sass/discussion/views/_search.scss @@ -1,9 +1,13 @@ .forum-search { @include margin-left($baseline); - display: inline-block; + display: flex; .search-input { width: input-width(short); } + + .search-button { + margin-left: 0; + } } diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index c9d511debf..2f98f44103 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -43,7 +43,7 @@ display: block; margin-bottom: $baseline; font-size: $forum-x-large-font-size; - color: $gray-d3; + color: theme-color("gray-dark"); font-weight: 600; } diff --git a/lms/static/sass/shared-v2/_layouts.scss b/lms/static/sass/shared-v2/_layouts.scss index ac36397eba..53c2f0df6b 100644 --- a/lms/static/sass/shared-v2/_layouts.scss +++ b/lms/static/sass/shared-v2/_layouts.scss @@ -41,7 +41,7 @@ @include float(right); @include text-align(right); - display: inline-block; + display: flex; vertical-align: text-bottom; .form-actions { diff --git a/lms/templates/ux/reference/pattern-library/course-skeleton.html b/lms/templates/ux/reference/pattern-library/course-skeleton.html index c5ccc5357a..f29929b0f2 100644 --- a/lms/templates/ux/reference/pattern-library/course-skeleton.html +++ b/lms/templates/ux/reference/pattern-library/course-skeleton.html @@ -48,7 +48,7 @@ ## TODO: note that this search component markup is provisional ## - update to use Chris's placeholder recommendation: http://codepen.io/clrux/pen/YqMpRO ## - update the Pattern Library's markup to match -
+
diff --git a/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html b/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html index b6650d25b3..caf6e61581 100644 --- a/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html +++ b/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html @@ -10,7 +10,7 @@
% endif diff --git a/openedx/features/course_experience/views/course_home.py b/openedx/features/course_experience/views/course_home.py index 42e3c3cb21..dff93ed7f4 100644 --- a/openedx/features/course_experience/views/course_home.py +++ b/openedx/features/course_experience/views/course_home.py @@ -52,7 +52,10 @@ class CourseHomeView(CourseTabView): """ return super(CourseHomeView, self).get(request, course_id, 'courseware', **kwargs) - def uses_bootstrap(self, request, course): + def uses_bootstrap(self, request, course, tab): + """ + Returns true if the USE_BOOTSTRAP Waffle flag is enabled. + """ return USE_BOOTSTRAP_FLAG.is_enabled(course.id) def render_to_fragment(self, request, course=None, tab=None, **kwargs): diff --git a/openedx/features/course_experience/views/course_reviews.py b/openedx/features/course_experience/views/course_reviews.py index 5c552e06f8..b1ccf6d924 100644 --- a/openedx/features/course_experience/views/course_reviews.py +++ b/openedx/features/course_experience/views/course_reviews.py @@ -31,7 +31,10 @@ class CourseReviewsView(CourseTabView): """ return super(CourseReviewsView, self).get(request, course_id, 'courseware', **kwargs) - def uses_bootstrap(self, request, course): + def uses_bootstrap(self, request, course, tab): + """ + Returns true if the USE_BOOTSTRAP Waffle flag is enabled. + """ return USE_BOOTSTRAP_FLAG.is_enabled(course.id) def render_to_fragment(self, request, course=None, tab=None, **kwargs): diff --git a/openedx/features/course_experience/views/course_updates.py b/openedx/features/course_experience/views/course_updates.py index 2a1c965629..5b39cbb064 100644 --- a/openedx/features/course_experience/views/course_updates.py +++ b/openedx/features/course_experience/views/course_updates.py @@ -63,7 +63,10 @@ class CourseUpdatesView(CourseTabView): """ return super(CourseUpdatesView, self).get(request, course_id, 'courseware', **kwargs) - def uses_bootstrap(self, request, course): + def uses_bootstrap(self, request, course, tab): + """ + Returns true if the USE_BOOTSTRAP Waffle flag is enabled. + """ return USE_BOOTSTRAP_FLAG.is_enabled(course.id) def render_to_fragment(self, request, course=None, tab=None, **kwargs): diff --git a/package.json b/package.json index 38d0e71ca4..a0a12a8283 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "coffee-loader": "^0.7.3", "coffee-script": "1.6.1", "@edx/studio-frontend": "0.1.0", - "@edx/edx-bootstrap": "0.3.3", + "@edx/edx-bootstrap": "0.3.4", "edx-pattern-library": "0.18.1", "edx-ui-toolkit": "1.5.2", "exports-loader": "^0.6.4", diff --git a/pavelib/paver_tests/test_assets.py b/pavelib/paver_tests/test_assets.py index 181a766f97..ee76f76bce 100644 --- a/pavelib/paver_tests/test_assets.py +++ b/pavelib/paver_tests/test_assets.py @@ -60,6 +60,10 @@ class TestPaverAssetTasks(PaverTestCase): expected_messages.append( u'rtlcss lms/static/css/bootstrap/lms-main.css lms/static/css/bootstrap/lms-main-rtl.css' ) + expected_messages.append( + u'rtlcss lms/static/css/discussion/lms-discussion-bootstrap.css' + u' lms/static/css/discussion/lms-discussion-bootstrap-rtl.css' + ) if force: expected_messages.append(u'rm -rf lms/static/certificates/css/*.css') expected_messages.append(u'libsass lms/static/certificates/sass') @@ -134,6 +138,12 @@ class TestPaverThemeAssetTasks(PaverTestCase): test_theme_dir=str(TEST_THEME_DIR), ) ) + expected_messages.append( + u'rtlcss {test_theme_dir}/lms/static/css/discussion/lms-discussion-bootstrap.css' + u' {test_theme_dir}/lms/static/css/discussion/lms-discussion-bootstrap-rtl.css'.format( + test_theme_dir=str(TEST_THEME_DIR), + ) + ) if force: expected_messages.append( 'rm -rf {test_theme_dir}/lms/static/css/*.css'.format(test_theme_dir=str(TEST_THEME_DIR)) @@ -145,6 +155,10 @@ class TestPaverThemeAssetTasks(PaverTestCase): expected_messages.append( u'rtlcss lms/static/css/bootstrap/lms-main.css lms/static/css/bootstrap/lms-main-rtl.css' ) + expected_messages.append( + u'rtlcss lms/static/css/discussion/lms-discussion-bootstrap.css' + u' lms/static/css/discussion/lms-discussion-bootstrap-rtl.css' + ) if force: expected_messages.append(u'rm -rf lms/static/certificates/css/*.css') expected_messages.append(u'libsass lms/static/certificates/sass')