Merge pull request #15518 from edx/HarryRein/updating-bootstrap-theming

Harry rein/updating bootstrap theming

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