Make the discussion board responsive

LEARNER-1923
GreenGold33 · Oct 19, 2017 · d18022b · d18022b
1 parent 80126fc
commit d18022b
Show file tree

Hide file tree

Showing 49 changed files with 314 additions and 178 deletions.
diff --git a/common/lib/xmodule/xmodule/tabs.py b/common/lib/xmodule/xmodule/tabs.py
@@ -108,6 +108,13 @@ def is_enabled(cls, course, user=None):
         """
         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
@@ -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>
diff --git a/common/static/common/templates/discussion/new-post.underscore b/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>
diff --git a/common/static/common/templates/discussion/response-comment-edit.underscore b/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>
diff --git a/common/static/common/templates/discussion/thread-edit.underscore b/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>
diff --git a/common/static/common/templates/discussion/thread-response-edit.underscore b/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>
diff --git a/common/static/common/templates/discussion/thread-response.underscore b/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>
         <% } %>

diff --git a/common/static/common/templates/discussion/thread.underscore b/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>
             <% } %>

diff --git a/lms/djangoapps/courseware/views/views.py b/lms/djangoapps/courseware/views/views.py
@@ -554,19 +554,19 @@ def handle_exceptions(request, course, exception):
             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):
         """
         Creates the context for the fragment's template.
         """
         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 @@ def render_standalone_response(self, request, fragment, course=None, tab=None, p
         """
         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
@@ -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
@@ -9,6 +9,8 @@
 from courseware.tabs import EnrolledTab
 from xmodule.tabs import TabFragmentViewMixin
 
+from . import USE_BOOTSTRAP_FLAG
+
 
 class DiscussionTab(TabFragmentViewMixin, EnrolledTab):
     """
@@ -30,3 +32,10 @@ def is_enabled(cls, course, user=None):
         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
@@ -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
@@ -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
@@ -1,9 +1,9 @@
 <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>
diff --git 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.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 @@
             ## 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 @@
         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>

diff --git a/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html b/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html
@@ -51,7 +51,7 @@
 <%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>

diff --git a/lms/djangoapps/discussion/views.py b/lms/djangoapps/discussion/views.py
@@ -50,6 +50,8 @@
 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 @@
 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 @@ def css_dependencies(self):
         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
@@ -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
@@ -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
@@ -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;