Make the discussion board responsive

LEARNER-1923

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

common/static/common/templates/discussion/customwmd-prompt.underscore

@@ -44,8 +44,8 @@
             %></div>
         </fieldset>
         <div class="form-actions">
-            <input type="button" id="new-link-image-ok" class="btn-brand form-btn" value="<%- okText %>" />
-            <input type="button" id="new-link-image-cancel" class="btn form-btn" value="<%- cancelText %>" >
+            <input type="button" id="new-link-image-ok" class="btn btn-primary form-btn" value="<%- okText %>" />
+            <input type="button" id="new-link-image-cancel" class="btn btn-outline-primary form-btn" value="<%- cancelText %>" >
         </div>
     </form>
 </div>

common/static/common/templates/discussion/new-post.underscore

@@ -2,7 +2,7 @@
     <h<%- startHeader %> class="thread-title"><%- gettext("Add a Post") %></h<%- startHeader %>>
 
     <% if (mode === 'inline') { %>
-        <button class="btn-default add-post-cancel">
+        <button class="btn btn-outline-primary btn-default add-post-cancel">
             <span class="sr"><%- gettext('Cancel') %></span>
             <span class="fa fa-close" aria-hidden="true"></span>
         </button>
@@ -67,7 +67,7 @@
         <% } %>
     </div>
     <div>
-        <button type="submit" class="btn-brand submit"><%- gettext('Submit') %></button>
-        <button type="button" class="btn cancel"><%- gettext('Cancel') %></button>
+        <button type="submit" class="btn btn-primary submit"><%- gettext('Submit') %></button>
+        <button type="button" class="btn btn-outline-primary cancel"><%- gettext('Cancel') %></button>
     </div>
 </form>

common/static/common/templates/discussion/response-comment-edit.underscore

@@ -4,6 +4,6 @@
     <div class="form-row">
         <div class="edit-comment-body" name="body" data-id="<%- id %>"><%- body %></div>
     </div>
-    <button type="submit" id="edit-comment-submit" class="btn-brand post-update"><%- gettext("Update comment") %></button>
-    <button class="btn post-cancel"><%- gettext("Cancel") %></button>
+    <button type="submit" id="edit-comment-submit" class="btn btn-primary post-update"><%- gettext("Update comment") %></button>
+    <button class="btn btn-outline-primary post-cancel"><%- gettext("Cancel") %></button>
 </div>

common/static/common/templates/discussion/thread-edit.underscore

@@ -14,5 +14,5 @@
     <p class="sr-only field-help" id="edit-post-editor-description"><%- gettext('Edit your post below.') %></p>
     <div class="edit-post-body" aria-describedby="edit-post-editor-description" name="body"><%- body %></div>
 </div>
-<button type="submit" id="edit-post-submit" class="btn-brand submit post-update"><%- gettext("Update post") %></button>
-<button class="btn post-cancel"><%- gettext("Cancel") %></button>
+<button type="submit" id="edit-post-submit" class="btn btn-primary submit post-update"><%- gettext("Update post") %></button>
+<button class="btn btn-outline-primary post-cancel"><%- gettext("Cancel") %></button>

common/static/common/templates/discussion/thread-response-edit.underscore

@@ -4,6 +4,6 @@
     <div class="form-row">
         <div class="edit-post-body" name="body" data-id="<%- id %>"><%- body %></div>
     </div>
-    <button type="submit" id="edit-response-submit"class="btn-brand post-update"><%- gettext("Update response") %></button>
-    <button class="btn post-cancel"><%- gettext("Cancel") %></button>
+    <button type="submit" id="edit-response-submit"class="btn btn-primary post-update"><%- gettext("Update response") %></button>
+    <button class="btn btn-outline-primary post-cancel"><%- gettext("Cancel") %></button>
 </div>

common/static/common/templates/discussion/thread-response.underscore

@@ -15,7 +15,7 @@
                 <div class="comment-body" id="add-new-comment-<%- wmdId %>" data-id="<%- wmdId %>"
                 data-placeholder="<%- gettext('Add a comment') %>"></div>
                 <div class="comment-post-control">
-                    <button class="btn-brand discussion-submit-comment control-button"><%- gettext("Submit") %></button>
+                    <button class="btn btn-primary discussion-submit-comment control-button"><%- gettext("Submit") %></button>
                 </div>
             </form>
         <% } %>

common/static/common/templates/discussion/thread.underscore

@@ -10,7 +10,7 @@
             <div class="response-btn-count-wrapper">
                 <% if (!readOnly) { %>
                 <div class="add-response">
-                    <button class="btn btn-small add-response-btn">
+                    <button class="btn btn-outline-primary btn-small add-response-btn">
                         <%- gettext("Add a Response") %>
                     </button>
                 </div>
@@ -29,7 +29,7 @@
                 <ul class="discussion-errors"></ul>
                 <div class="reply-body" data-id="<%- id %>"></div>
                 <div class="reply-post-control">
-                    <button class="btn discussion-submit-post control-button"><%- gettext("Submit") %></button>
+                    <button class="btn btn-outline-primary discussion-submit-post control-button"><%- gettext("Submit") %></button>
                 </div>
             </form>
             <% } %>

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)

lms/djangoapps/discussion/__init__.py

+"""
+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')

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()

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

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)({}));

lms/djangoapps/discussion/static/discussion/templates/search.underscore

 <label class="field-label sr-only" for="search" id="search-hint"><%- gettext("Search all posts") %></label>
 <input
-    class="field-input input-text search-input"
+    class="field-input form-control input-text search-input"
     type="search"
     name="search"
     id="search"
     placeholder="<%- gettext("Search all posts") %>"
 />
-<button class="btn btn-small search-button" type="button"><%- gettext("Search") %></button>
+<button class="btn btn-outline-primary btn-small search-button" type="button"><%- gettext("Search") %></button>

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
 %>
 
-<section class="discussion discussion-board container" id="discussion-container"
+<section class="discussion discussion-board page-content-container" id="discussion-container"
          data-course-id="${course.id}"
          data-user-create-comment="${json.dumps(can_create_comment)}"
          data-user-create-subcomment="${json.dumps(can_create_subcomment)}"
@@ -34,7 +34,7 @@ from openedx.core.djangolib.markup import HTML
             ## Add Post button
             % if has_permission(user, 'create_thread', course.id):
             <div class="form-actions">
-                <button class="btn btn-small new-post-btn">${_("Add a Post")}</button>
+                <button class="btn btn-outline-primary btn-small new-post-btn">${_("Add a Post")}</button>
             </div>
             % endif
             ## Search box
@@ -46,16 +46,15 @@ from openedx.core.djangolib.markup import HTML
         lang="${course.language}"
       % endif
     >
-        <div class="discussion-body layout layout-1t2t">
-            <aside class="forum-nav layout-col layout-col-a" role="complementary" aria-label="${_("Discussion thread list")}">
-                <%include file="_filter_dropdown.html" />
-                <div class="discussion-thread-list-container"></div>
-            </aside>
-
-            <main id="main" aria-label="Content" tabindex="-1" class="discussion-column layout-col layout-col-b">
+        <div class="discussion-body">
+            <main id="main" class="discussion-column" aria-label="Content" tabindex="-1">
                 <article class="new-post-article is-hidden" style="display: none" tabindex="-1" aria-label="${_("New topic form")}"></article>
                 <div class="forum-content"></div>
             </main>
+            <aside class="forum-nav" role="complementary" aria-label="${_("Discussion thread list")}">
+                <%include file="_filter_dropdown.html" />
+                <div class="discussion-thread-list-container"></div>
+            </aside>
         </div>
     </div>
 </section>

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">
-<section class="discussion inline-discussion discussion-user-profile-board container">
+<section class="discussion inline-discussion discussion-user-profile-board page-content-container">
     <header class="page-header">
         <div class="page-header-main">
             <div class="sr-is-focusable" tabindex="-1"></div>

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')

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
   }

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;

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;

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

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

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

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

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

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;

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

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 {

lms/static/sass/discussion/lms-discussion-bootstrap.scss

+// ------------------------------
+// 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';

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

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 {

lms/static/sass/discussion/utilities/_variables-bootstrap.scss

+// 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;

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;

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;

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 {

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

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 {

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 {

lms/static/sass/discussion/views/_search.scss

 .forum-search {
   @include margin-left($baseline);
 
-  display: inline-block;
+  display: flex;
 
   .search-input {
     width: input-width(short);
   }
+
+  .search-button {
+    margin-left: 0;
+  }
 }

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

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 {

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
-                <div class="page-header-search">
+                <div class="page-header-search navbar">
                     <form class="search-form" role="search">
                         <label class="field-label sr-only" for="search" id="search-hint">Search all the things</label>
                         <input
@@ -61,7 +61,7 @@
                         <button type="button" class="action action-clear" aria-label="Clear search">
                             <span class="icon fa fa-times-circle" aria-hidden="true"></span>
                         </button>
-                        <button class="btn btn-small search-button" type="button">Search</button>
+                        <button class="btn btn-outline-primary search-button" type="button">Search</button>
                     </form>
                 </div>
             </div>

openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html

@@ -10,7 +10,7 @@
                   <form class="search-form" role="search" action="/courses/course-v1:W3Cx+HTML5.0x+1T2017/search/">
                       <label class="field-label sr-only" for="search" id="search-hint">Search the course</label>
                       <input
-                              class="field-input input-text search-input"
+                              class="field-input input-text search-input form-control"
                               type="search"
                               name="query"
                               id="search"

openedx/features/course_experience/templates/course_experience/course-home-fragment.html

@@ -31,13 +31,13 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
                     <form class="search-form" role="search" action="${reverse('openedx.course_search.course_search_results', args=[course_key])}">
                         <label class="field-label sr-only" for="search" id="search-hint">${_('Search the course')}</label>
                         <input
-                                class="field-input input-text search-input"
+                                class="field-input input-text search-input form-control"
                                 type="search"
                                 name="query"
                                 id="search"
                                 placeholder="${_('Search the course')}"
                         />
-                        <button class="btn btn-small search-button" type="submit">${_('Search')}</button>
+                        <button class="btn btn-outline-primary search-button" type="submit">${_('Search')}</button>
                     </form>
                 </div>
             % endif

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):

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):

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):

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",

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')