Updating themes for bootstrap.

LEARNER-1785

This story was to update the existing custom themes to work with the flexible bootstrap design. It also updates the red theme to more closely resemble the real implementation on openedx.

lms/djangoapps/courseware/tests/test_comprehensive_theming.py

@@ -30,8 +30,6 @@ class TestComprehensiveTheming(TestCase):
         self.assertEqual(resp.status_code, 200)
         # This string comes from footer.html
         self.assertContains(resp, "super-ugly")
-        # This string comes from header.html
-        self.assertContains(resp, "This file is only for demonstration, and is horrendous!")
 
     def test_theme_outside_repo(self):
         # Need to create a temporary theme, and defer decorating the function

lms/static/sass/bootstrap/_footer.scss

@@ -4,7 +4,7 @@
 .wrapper-footer {
   box-shadow: 0 -1px 5px 0 $black-t0;
   border-top: 1px solid $navbar-light-disabled-color;
-  background-color: $body-bg;
+  background-color: $footer-bg;
   margin-top: $baseline/2;
   padding: $baseline;
   font-family: $font-family-sans-serif;

lms/static/sass/bootstrap/_navigation.scss

@@ -2,6 +2,7 @@
 .navigation-container {
   border-bottom: 1px solid $brand-primary;
   text-decoration: none;
+  background-color: $header-bg;
 
   &.slim {
     border-bottom: 1px solid $inverse-color;
@@ -29,7 +30,7 @@
     .nav-item {
       margin: 0 $baseline 0 0;
       font-weight: $font-weight-normal;
-      font-family: $font-family-sans-serif;
+      font-family: $font-family-base;
       text-transform: uppercase;
       list-style: none;
 
@@ -47,7 +48,7 @@
         display: none;
       }
 
-      @media (max-width: map-get($grid-breakpoints,lg)) {
+      @media (max-width: map-get($grid-breakpoints,md)) {
         &.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
           display: initial;
           margin: $baseline/4 $baseline/2;
@@ -73,7 +74,7 @@
     }
 
     .navbar-right .nav-item {
-      @media (min-width: map-get($grid-breakpoints,lg)) {
+      @media (min-width: map-get($grid-breakpoints,md)) {
         .nav-link {
           text-transform: none;
           color: $brand-inverse;

lms/static/sass/bootstrap/_variables.scss

@@ -48,6 +48,9 @@ $black-t3:  rgba($black, 0.75) !default;
 $light-grey-transparent: rgba(200,200,200, 0) !default;
 $light-grey-solid: rgba(200,200,200, 1) !default;
 
+$header-bg: $white !default;
+$footer-bg: $white !default;
+
 // ----------------------------
 // #TYPOGRAPHY
 // ----------------------------

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

@@ -3,7 +3,7 @@
 // -----------------------------
 
 // Bootstrap theme
-@import 'edx-bootstrap/sass/open-edx/theme';
+@import 'bootstrap/theme';
 @import 'bootstrap/scss/bootstrap';
 
 // Variables
@@ -13,4 +13,3 @@
 @import 'footer';
 @import 'navigation';
 @import 'layouts';
-

lms/static/sass/partials/README.rst

@@ -0,0 +1,4 @@
+Any partials in this directory can be overridden by a theme by matching
+the directory structure as in lms/static/sass/partials.
+
+As an example, look at the red-theme.

lms/static/sass/partials/bootstrap/_theme.scss

@@ -0,0 +1,3 @@
+// Default bootstrap theming
+
+@import 'edx-bootstrap/sass/open-edx/theme';

lms/static/sass/shared-v2/_header.scss

@@ -5,7 +5,7 @@
     box-sizing: border-box;
     position: relative;
     width: 100%;
-    border-bottom: 1px solid $gray-l1;
+    border-bottom: 1px solid $header-border-color;
     box-shadow: 0 1px 5px 0 $shadow-l1;
     background: $header-bg;
 

lms/static/sass/shared-v2/_variables.scss

@@ -42,6 +42,8 @@ $black-t3:  rgba($black, 0.75) !default;
 $light-grey-transparent: rgba(200,200,200, 0) !default;
 $light-grey-solid: rgba(200,200,200, 1) !default;
 
+$header-border-color: $gray-l1 !default;
+
 // ----------------------------
 // #TYPOGRAPHY
 // ----------------------------

lms/templates/navigation/navigation.html

@@ -51,7 +51,7 @@ site_status_msg = get_site_status_msg(course_id)
 
 % if uses_bootstrap:
   <header class="navigation-container header-global ${"slim" if course else ""}">
-    <nav class="navbar navbar-toggleable-md navbar-light">
+    <nav class="navbar navbar-toggleable-sm navbar-light">
       <button class="navbar-toggler navbar-toggler-right mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>

lms/templates/user_dropdown.html

@@ -31,7 +31,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
             <a class="dropdown-item" href="${reverse('logout')}">${_("Sign Out")}</a>
         </ul>
     </li>
-    <li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
+    <li class="nav-item nav-item-open-collapsed-only collapse"><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
     <li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('learner_profile', kwargs={'username': self.real_user.username})}">${_("Profile")}</a></li>
     <li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('account_settings')}">${_("Account")}</a></li>
     <li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('logout')}">${_("Sign Out")}</a></li>

lms/templates/ux/reference/bootstrap/course-skeleton.html

@@ -1,5 +1,5 @@
 ## Override the default styles_version to use Bootstrap
-<%! main_css = "css/bootstrap/lms-main-bootstrap.css" %>
+<%! main_css = "css/bootstrap/lms-main.css" %>
 
 <%page expression_filter="h"/>
 <%inherit file="/main.html" />
@@ -39,7 +39,9 @@
                         <input type="text" class="form-control" placeholder="Search" aria-label="Search"/>
                         <span class="input-group-addon" id="basic-addon2">Search</span>
                     </div>
-                    <button class="btn btn-primary col-4">Click Me!</button>
+                    <a href="#">
+                        <div class="btn btn-primary">Click Me!!</div>
+                    </a>
                 </div>
             </div>
         </div>

themes/edge.edx.org/lms/static/sass/partials/bootstrap/_theme.scss

@@ -0,0 +1,3 @@
+// Override theming for edx.org bootstrap
+
+@import 'edx-bootstrap/sass/edx/theme';

themes/edx.org/lms/static/sass/partials/bootstrap/_theme.scss

@@ -0,0 +1,3 @@
+// Override theming for edx.org bootstrap
+
+@import 'edx-bootstrap/sass/edx/theme';

themes/edx.org/lms/templates/header.html

@@ -44,18 +44,113 @@ site_status_msg = get_site_status_msg(course_id)
 % endif
 </%block>
 
-% if uses_pattern_library:
+% if uses_bootstrap:
+<header class="navigation-container header-global ${"slim" if course and not disable_courseware_header else ""}" aria-label="Main" role="banner">
+% elif uses_pattern_library:
 <header class="header-global ${"slim" if course and not disable_courseware_header else ""}" aria-label="Main" role="banner">
 % else:
 <header class="${"header-global slim" if course and not disable_courseware_header else "header-global-new"}" aria-label="Main" role="banner">
 % endif
-  <div class="${"rwd" if responsive else ""} wrapper-header nav-container">
 
+% if uses_bootstrap:
+  <nav class="navbar navbar-toggleable-md navbar-light" aria-label="${_('Main')}">
+    <button class="navbar-toggler navbar-toggler-right mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <h1 class="hd logo-header">
+      <div class="logo">
+        <a class="navbar-brand" href="${marketing_link('ROOT')}" itemprop="url">
+          <img src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
+        </a>
+      </div>
+      % if course and not disable_courseware_header:
+        <div class="course-header">
+          <span class="provider">${course.display_org_with_default}:</span>
+          <span class="course-number">${course.display_number_with_default}</span>
+          <span class="course-name">${course.display_name_with_default}</span>
+        </div>
+      % endif
+    </h1>
+    % if user.is_authenticated():
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        % if not course or disable_courseware_header:
+          % if not nav_hidden or show_program_listing:
+            <ul class="navbar-nav mr-auto">
+                % if not nav_hidden:
+                  <li class="nav-item mt-2 nav-item-open-collapsed nav-global-01">
+                    <a class="nav-link" href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
+                  </li>
+                  <li class="nav-item mt-2 nav-item-open-collapsed nav-global-02">
+                    <a class="nav-link" href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
+                  </li>
+                  <li class="nav-item mt-2 nav-item-open-collapsed nav-global-03">
+                    <a class="nav-link" href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
+                  </li>
+                % endif
+                % if show_program_listing:
+                  <li class="nav-item mt-2 nav-item-open-collapsed">
+                    <a class="${'active' if reverse('dashboard') == request.path else ''} nav-link" href="${reverse('dashboard')}">
+                      ${_("Courses")}
+                    </a>
+                  </li>
+                  <li class="nav-item mt-2 nav-item-open-collapsed">
+                    <a class="${'active' if reverse('program_listing_view') in request.path else ''} nav-link" href="${reverse('program_listing_view')}">
+                      ${_("Programs")}
+                    </a>
+                  </li>
+                  % endif
+                </ul>
+          % endif
+        % endif
+        <ul class="navbar-nav navbar-right">
+          % if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
+            <a role="button" class="nav-item-open-collapsed btn-shopping-cart btn btn-secondary mr-3" href="${reverse('shoppingcart.views.show_cart')}">
+              <span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
+            </a>
+          % endif
+          <li class="nav-item mt-2 nav-item-open-collapsed">
+            <a href="${get_online_help_info(online_help_token)['doc_url']}"
+             target="_blank"
+             class="nav-link">${_("Help")}</a>
+          </li>
+          <%include file="user_dropdown.html"/>
+          </ul>
+        </div>
+    % else:
+      <div class="collapse navbar-collapse" id="navbarSupportedContent" aria-label="${_('Account')}" >
+        <ul class="navbar-nav mr-auto"></ul>
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            % if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
+              % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
+                <a class="btn btn-primary mt-2" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
+              % else:
+                <a class="btn btn-primary mt-2" href="/login${login_query()}">${_("Sign in")}</a>
+              % endif
+            % endif
+          </li>
+          % if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
+            % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
+            <li class="nav-item">
+              <a class="nav-link mt-2" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
+            </li>
+            % elif static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')):
+            <li>
+              <a class="nav-link mt-2" href="/register">${_("Register")}</a>
+            </li>
+            % endif
+          % endif
+        </ul>
+      </div>
+    % endif
+  </nav>
+% else:
+  <div class="${"rwd" if responsive else ""} wrapper-header nav-container">
     <h1 class="hd logo-header">
       <div class="logo">
         <a href="${marketing_link('ROOT')}" itemprop="url">
           <%block name="navigation_logo">
-              <img src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
+            <img src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
           </%block>
         </a>
       </div>
@@ -119,7 +214,6 @@ site_status_msg = get_site_status_msg(course_id)
           </li>
         </ul>
       % endif
-
     % else:
       <nav aria-label="${_('Account')}" class="nav-account-management">
         <div class="right nav-courseware list-inline">
@@ -130,7 +224,6 @@ site_status_msg = get_site_status_msg(course_id)
               % else:
                 <a class="btn btn-login" href="/login${login_query()}">${_("Sign in")}</a>
               % endif
-
             % endif
           </div>
           % if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
@@ -148,6 +241,7 @@ site_status_msg = get_site_status_msg(course_id)
       </nav>
     % endif
   </div>
+% endif
 </header>
 % if course:
 <!--[if lte IE 9]>

themes/red-theme/lms/static/sass/partials/base/_variables.scss

@@ -1,5 +1,14 @@
-@import 'lms/static/sass/partials/base/variables';
+// Color overrides
+$white: rgb(255,255,255);
+$red: #d9534f !default;
 
-$header-bg: rgb(250,0,0);
-$footer-bg: rgb(250,0,0);
-$container-bg: rgb(250,0,0);
+$footer-bg: $white;
+$header-bg: $white;
+$header-border-color: $red;
+
+$base-font-color: $red;
+$link-color: $red;
+$lms-active-color: $red;
+$lms-label-color: $red;
+
+@import 'lms/static/sass/partials/base/variables';

themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss

@@ -0,0 +1,13 @@
+// Sample red theme to demonstrate SASS overrides
+
+// Theme colors
+//
+// Note: define colors needed by your theme first
+$red: #d9534f !default;
+$brand-primary: $red;
+
+// Theme fonts
+$font-family-sans-serif: cursive;
+
+// Initialize the Open edX bootstrap theme
+@import 'edx-bootstrap/sass/open-edx/theme';

themes/red-theme/lms/templates/header.html

@@ -1,175 +1,8 @@
 ## mako
+<!--
+To override this page, add a navigation.html file in the following
+location: {your_theme}/lms/templates/navigation/navigation.html
+-->
+<%page expression_filter="h" args="online_help_token"/>
 <%namespace name='static' file='static_content.html'/>
-<%namespace file='main.html' import="login_query"/>
-<%!
-from django.core.urlresolvers import reverse
-from django.utils.translation import ugettext as _
-from openedx.core.djangolib.markup import HTML
-
-# App that handles subdomain specific branding
-import branding
-# app that handles site status messages
-from status.status import get_site_status_msg
-
-from lms.djangoapps.ccx.overrides import get_current_ccx
-%>
-
-## Provide a hook for themes to inject branding on top.
-<%block name="navigation_top" />
-
-<%block>
-<%
-try:
-    course_id = course.id.to_deprecated_string()
-except:
-    # can't figure out a better way to get at a possibly-defined course var
-    course_id = None
-site_status_msg = get_site_status_msg(course_id)
-%>
-% if site_status_msg:
-<div class="site-status">
-  <div class="inner-wrapper">
-    <span class="white-error-icon"></span>
-    <p>${site_status_msg}</p>
-  </div>
-</div>
-% endif
-</%block>
-
-  <header id="global-navigation" class="header-global ${"slim" if course else ""}" >
-    <!-- This file is only for demonstration, and is horrendous! -->
-    <nav aria-label="${_('Global')}">
-    <h1 class="logo">
-      <a href="${marketing_link('ROOT')}">
-        <%block name="navigation_logo">
-            <img src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}"/>
-        </%block>
-      </a>
-    </h1>
-
-    % if course:
-    <h2><span class="provider">${course.display_org_with_default | h}:</span>
-      ${course.display_number_with_default | h}
-      <%
-        display_name = course.display_name_with_default_escaped
-        if settings.FEATURES.get('CUSTOM_COURSES_EDX', False):
-          ccx = get_current_ccx(course.id)
-          if ccx:
-            display_name = ccx.display_name
-      %>
-      ${display_name}</h2>
-    % endif
-
-    % if user.is_authenticated():
-    <ol class="left nav-global authenticated">
-      <%block name="navigation_global_links_authenticated">
-        % if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
-          <li class="nav-global-01">
-            <a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
-          </li>
-        % endif
-        %if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
-          <li>
-            ## Translators: This is short for "System administration".
-            <a href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
-          </li>
-        %endif
-        % if show_program_listing:
-          <li class="tab-nav-item">
-            <a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
-              ${_("Courses")}
-            </a>
-          </li>
-          <li class="tab-nav-item">
-            <a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
-              ${_("Programs")}
-            </a>
-          </li>
-        % endif
-      </%block>
-    </ol>
-    <ol class="user">
-      <li class="primary">
-        <a href="${reverse('dashboard')}" class="user-link">
-          <span class="icon fa fa-home" aria-hidden="true"></span>
-          <span class="sr">${_("Dashboard for:")}</span>
-          <div>
-          ${user.username}
-          </div>
-        </a>
-      </li>
-      <li class="primary">
-        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></a>
-        <ul class="dropdown-menu" aria-label="More Options" role="menu">
-          <%block name="navigation_dropdown_menu_links" >
-            <li><a href="${reverse('account_settings')}">${_("Account Settings")}</a></li>
-            <li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("My Profile")}</a></li>
-          </%block>
-          <li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
-        </ul>
-      </li>
-    </ol>
-      % if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
-        <ol class="user">
-          <li class="primary">
-            <a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
-              <span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
-            </a>
-          </li>
-        </ol>
-      % endif
-    % else:
-    <ol class="left nav-global">
-      <%block name="navigation_global_links">
-        % if static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
-          <li class="nav-global-01">
-            <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
-          </li>
-          % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
-            <li class="nav-global-02">
-              <a href="${marketing_link('COURSES')}">${_("Courses")}</a>
-            </li>
-          % endif
-          <li class="nav-global-03">
-            <a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
-          </li>
-        % endif
-      </%block>
-      % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-        % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-          <li class="nav-global-04">
-            <a class="btn btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
-          </li>
-        % else:
-          <li class="nav-global-04">
-            <a class="btn btn-neutral btn-register" href="/register">${_("Register Now")}</a>
-          </li>
-        % endif
-      % endif
-    </ol>
-
-    <ol class="right nav-courseware">
-    <li class="nav-courseware-01">
-      % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-          % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-          <a class="btn btn-brand btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
-          % else:
-          <a class="btn btn-brand btn-login" href="/login${login_query()}">${_("Sign in")}</a>
-          % endif
-      % endif
-    </li>
-    </ol>
-    % endif
-  </nav>
-</header>
-% if course:
-<!--[if lte IE 8]>
-<div class="ie-banner" aria-hidden="true">${_(HTML('<strong>Warning:</strong> Your browser is not fully supported. We strongly recommend using {chrome_link} or {ff_link}.')).format(chrome_link='<a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">Chrome</a>', ff_link='<a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>')}</div>
-<![endif]-->
-% endif
-
-%if not user.is_authenticated():
-  <%include file="forgot_password_modal.html" />
-%endif
-
-<%include file="help_modal.html"/>
+<%include file="${static.get_template_path(relative_path='navigation/navigation.html')}"  args="online_help_token=online_help_token"  />