From 6d89cc1bd184f97162782ea70ded412fe0e2b7fd Mon Sep 17 00:00:00 2001
From: Harry Rein <hrein@edx.org>
Date: Mon, 10 Jul 2017 15:21:05 -0400
Subject: [PATCH] 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.
---
 .../tests/test_comprehensive_theming.py       |   2 -
 lms/static/sass/bootstrap/_footer.scss        |   2 +-
 lms/static/sass/bootstrap/_navigation.scss    |   7 +-
 lms/static/sass/bootstrap/_variables.scss     |   3 +
 ...{lms-main-bootstrap.scss => lms-main.scss} |   3 +-
 lms/static/sass/partials/README.rst           |   4 +
 .../sass/partials/bootstrap/_theme.scss       |   3 +
 lms/static/sass/shared-v2/_header.scss        |   2 +-
 lms/static/sass/shared-v2/_variables.scss     |   2 +
 lms/templates/navigation/navigation.html      |   2 +-
 lms/templates/user_dropdown.html              |   2 +-
 .../reference/bootstrap/course-skeleton.html  |   6 +-
 .../sass/partials/bootstrap/_theme.scss       |   3 +
 .../sass/partials/bootstrap/_theme.scss       |   3 +
 themes/edx.org/lms/templates/header.html      | 104 +++++++++-
 themes/red-theme/lms/static/images/logo.png   | Bin 493 -> 5288 bytes
 .../static/sass/partials/base/_variables.scss |  17 +-
 .../sass/partials/bootstrap/_theme.scss       |  13 ++
 themes/red-theme/lms/templates/header.html    | 179 +-----------------
 19 files changed, 162 insertions(+), 195 deletions(-)
 rename lms/static/sass/bootstrap/{lms-main-bootstrap.scss => lms-main.scss} (85%)
 create mode 100644 lms/static/sass/partials/README.rst
 create mode 100644 lms/static/sass/partials/bootstrap/_theme.scss
 create mode 100644 themes/edge.edx.org/lms/static/sass/partials/bootstrap/_theme.scss
 create mode 100644 themes/edx.org/lms/static/sass/partials/bootstrap/_theme.scss
 create mode 100644 themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss

diff --git a/lms/djangoapps/courseware/tests/test_comprehensive_theming.py b/lms/djangoapps/courseware/tests/test_comprehensive_theming.py
index f2e4e8137c..29790e8dba 100644
--- a/lms/djangoapps/courseware/tests/test_comprehensive_theming.py
+++ b/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
diff --git a/lms/static/sass/bootstrap/_footer.scss b/lms/static/sass/bootstrap/_footer.scss
index 035f4c11f5..2efbc43d81 100644
--- a/lms/static/sass/bootstrap/_footer.scss
+++ b/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;
diff --git a/lms/static/sass/bootstrap/_navigation.scss b/lms/static/sass/bootstrap/_navigation.scss
index 7564c70bcc..055d8d0eca 100644
--- a/lms/static/sass/bootstrap/_navigation.scss
+++ b/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;
diff --git a/lms/static/sass/bootstrap/_variables.scss b/lms/static/sass/bootstrap/_variables.scss
index a6c93c5990..043f6343d9 100644
--- a/lms/static/sass/bootstrap/_variables.scss
+++ b/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
 // ----------------------------
diff --git a/lms/static/sass/bootstrap/lms-main-bootstrap.scss b/lms/static/sass/bootstrap/lms-main.scss
similarity index 85%
rename from lms/static/sass/bootstrap/lms-main-bootstrap.scss
rename to lms/static/sass/bootstrap/lms-main.scss
index 1b5298c5d6..8b2059f028 100644
--- a/lms/static/sass/bootstrap/lms-main-bootstrap.scss
+++ b/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';
-
diff --git a/lms/static/sass/partials/README.rst b/lms/static/sass/partials/README.rst
new file mode 100644
index 0000000000..914165caef
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/lms/static/sass/partials/bootstrap/_theme.scss b/lms/static/sass/partials/bootstrap/_theme.scss
new file mode 100644
index 0000000000..98a8e97205
--- /dev/null
+++ b/lms/static/sass/partials/bootstrap/_theme.scss
@@ -0,0 +1,3 @@
+// Default bootstrap theming
+
+@import 'edx-bootstrap/sass/open-edx/theme';
diff --git a/lms/static/sass/shared-v2/_header.scss b/lms/static/sass/shared-v2/_header.scss
index 6885484cc3..bf76962874 100644
--- a/lms/static/sass/shared-v2/_header.scss
+++ b/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;
 
diff --git a/lms/static/sass/shared-v2/_variables.scss b/lms/static/sass/shared-v2/_variables.scss
index 34a2cd7b9a..5ea9424aae 100644
--- a/lms/static/sass/shared-v2/_variables.scss
+++ b/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
 // ----------------------------
diff --git a/lms/templates/navigation/navigation.html b/lms/templates/navigation/navigation.html
index 6afa7b455e..d3389465f5 100644
--- a/lms/templates/navigation/navigation.html
+++ b/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>
diff --git a/lms/templates/user_dropdown.html b/lms/templates/user_dropdown.html
index b0c40c10eb..3ac2099b1e 100644
--- a/lms/templates/user_dropdown.html
+++ b/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>
diff --git a/lms/templates/ux/reference/bootstrap/course-skeleton.html b/lms/templates/ux/reference/bootstrap/course-skeleton.html
index b8bcba9810..7eae185815 100644
--- a/lms/templates/ux/reference/bootstrap/course-skeleton.html
+++ b/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>
diff --git a/themes/edge.edx.org/lms/static/sass/partials/bootstrap/_theme.scss b/themes/edge.edx.org/lms/static/sass/partials/bootstrap/_theme.scss
new file mode 100644
index 0000000000..e3637f6f4a
--- /dev/null
+++ b/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';
diff --git a/themes/edx.org/lms/static/sass/partials/bootstrap/_theme.scss b/themes/edx.org/lms/static/sass/partials/bootstrap/_theme.scss
new file mode 100644
index 0000000000..e3637f6f4a
--- /dev/null
+++ b/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';
diff --git a/themes/edx.org/lms/templates/header.html b/themes/edx.org/lms/templates/header.html
index 9be3a19a0f..e2a601ef12 100644
--- a/themes/edx.org/lms/templates/header.html
+++ b/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]>
diff --git a/themes/red-theme/lms/static/images/logo.png b/themes/red-theme/lms/static/images/logo.png
index 5efc6b63a436b749addf0c7a978f9cb78ba03eab..77f0f2ba043a03c62b8520ca4b7baa7a02e177e7 100644
GIT binary patch
literal 5288
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

delta 468
zcmV;_0W1EfDeVK0BYy$3Nkl<Zc-rmSp^m~p6op|RHFbamheV)RU62S8EC#g!48b8W
zSOo8Y<t-3A0uO-0ku*T=o+cFyVP+|%?al7F$!AzI`9s)FX9^q+hr{9gqq!6uXu>ya
z;Rt@{2;1;)O>oj)&R5}5gerKjf&*Mahww8Gs!&WbOdVDrF@LR~o<bNGMj$bb!2M*H
z3T!|U+Cb$4VH}u&Bs2pjX&eva!@LA>8XzCmcsI@*Bqj4V;`BgL(u*5s36ip9j5tG(
zlnq~vGXcrS<b^n0kc@PHi_-?lSlbe(29mLwDUJ)06Zc7+5=c%;&jKxS477L>Xpm!|
z!DE~<NY2U+&wo0SGbb8otRT=h5~!mfP$wGbsvyuc63AB&$dB%^M2UL1#}XynAW&aX
zpgtDWQWU5a1X?Q!w8o;QiULi8Kzl`j_E^+TQJ`HA=&UHv8H+k83Umqr-4zA8V^KFn
zfo}W;*`4?sWVhpgF}o?BgX~&-lD2cX7c=v@o44!meNB*^!#9d%1HO~CEAdprtj2RO
zvo23o&4xUiH|z0shgpO7gDm%hc*D$a!;E(nO?MPI91e%`cjgBqKM)cI*kh9b0000<
KMNUMnLSTZ^b;*$c

diff --git a/themes/red-theme/lms/static/sass/partials/base/_variables.scss b/themes/red-theme/lms/static/sass/partials/base/_variables.scss
index c869ff9856..c32bb59471 100755
--- a/themes/red-theme/lms/static/sass/partials/base/_variables.scss
+++ b/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';
diff --git a/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss b/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss
new file mode 100644
index 0000000000..7fb5406954
--- /dev/null
+++ b/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';
diff --git a/themes/red-theme/lms/templates/header.html b/themes/red-theme/lms/templates/header.html
index 2e4078370d..54fc310317 100755
--- a/themes/red-theme/lms/templates/header.html
+++ b/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"  />