Updating the platform header styles to match new site styles.

Putting the new edx header behind a feature flag.

lms/djangoapps/branding/__init__.py

@@ -63,7 +63,7 @@ def get_logo_url():
     university = microsite.get_value('university')
 
     if university is None:
-        return '{static_url}images/header-logo.png'.format(
+        return '{static_url}images/logo-edX-77x36.png'.format(
             static_url=settings.STATIC_URL
         )
 

lms/envs/common.py

@@ -264,6 +264,11 @@ FEATURES = {
     # Default to false here b/c dev environments won't have the api, will override in aws.py
     'ENABLE_ANALYTICS_ACTIVE_COUNT': False,
 
+    # TODO: ECOM-136
+    # Enables the new navigation template and styles. This should be enabled
+    # when the styles appropriately match the edX.org website.
+    'ENABLE_NEW_EDX_HEADER': False,
+
 }
 
 # Ignore static asset files on import which match this pattern

lms/static/sass/base/_variables.scss

@@ -217,6 +217,10 @@ $footer-bg: $white;
 $courseware-footer-border: none;
 $courseware-footer-shadow: none;
 $courseware-footer-margin: 0px;
+$courseware-border-bottom-color: #44a2de;
+$courseware-button-border-color: #e6e6e6;
+$courseware-hover-color: #333435;
+$courseware-navigation-color: #009ee7;
 
 // ====================
 
@@ -394,6 +398,9 @@ $f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
 $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
 $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
 
+// Header specific sans-serif
+$header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif;
+
 // SPLINT: colors
 
 $msg-bg: $action-primary-bg;

lms/static/sass/shared/_header.scss

@@ -316,3 +316,317 @@ header.global {
     color: $link-color !important;
   }
 }
+
+
+header.global-new {
+  border-bottom: 4px solid $courseware-border-bottom-color;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1);
+  background: $header-bg;
+  height: 75px;
+  position: relative;
+  width: 100%;
+  z-index: 10;
+
+  nav {
+    @include clearfix;
+    height: 40px;
+    margin: 0 auto;
+    padding: 18px 10px 0px;
+    max-width: grid-width(12);
+    min-width: 760px;
+  }
+
+  h1.logo {
+    float: left;
+    margin: -2px 39px 0px 0px;
+    position: relative;
+
+    a {
+      display: block;
+    }
+  }
+
+  ol {
+    &.left {
+      float: left;
+    }
+
+    &.guest {
+      float: right;
+    }
+
+    > li {
+      display: inline-block;
+      margin-right: 20px;
+      position: relative;
+      vertical-align: middle;
+
+      &:last-child {
+        margin-right: 0px;
+      }
+
+      a {
+        vertical-align: middle;
+      }
+    }
+
+    li.secondary {
+      > a {
+        color: $link-color;
+        font-family: $sans-serif;
+        display: inline-block;
+        margin: 0px 30px 0px 0px;
+        text-decoration: none;
+        text-transform: uppercase;
+        text-shadow: 0 1px rgba(255,255,255, 0.6);
+
+        &:last-child {
+          margin-right: 0px;
+        }
+
+        &:hover, &:focus {
+          color: $base-font-color;
+        }
+      }
+    }
+
+    li.primary {
+      margin-right: 5px;
+
+      > a {
+        @include background-image($button-bg-image);
+        background-color: $button-bg-color;
+        border: 1px solid $border-color-2;
+        border-radius: 3px;
+        @include box-sizing(border-box);
+        box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
+        color: $base-font-color;
+        font-family: $header-sans-serif;
+        display: inline-block;
+        line-height: 1em;
+        margin: 1px 5px;
+        padding: 10px 12px;
+        text-decoration: none;
+        text-transform: uppercase;
+        text-shadow: 0 1px rgba(255,255,255, 0.6);
+        vertical-align: middle;
+
+        &:last-child {
+          margin-right: 0px;
+        }
+
+        &:hover, &:focus, &:active {
+          background: $button-bg-hover-color;
+        }
+      }
+    }
+
+    &.user {
+      float: right;
+      margin-top: 4px;
+
+      > li.primary {
+        display: block;
+        float: left;
+        margin: 0px;
+
+        > a {
+          margin: 0px;
+          @include border-right-radius(0px);
+        }
+
+        &:last-child {
+          > a {
+            border-radius: 0 4px 4px 0;
+            border-left: none;
+            padding: 5px 8px 7px 8px;
+
+            &.shopping-cart {
+              border-radius: 4px;
+              border: 1px solid $border-color-2;
+              margin-right: 10px;
+              padding-bottom: 6px;
+            }
+          }
+        }
+      }
+
+      a.user-link {
+        padding: 6px 12px 8px 35px;
+        position: relative;
+        text-transform: none;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 0;
+
+        .avatar {
+          @include background-image(url('../images/small-header-home-icon.png'));
+          background-repeat: no-repeat;
+          height: 26px;
+          display: inline-block;
+          left: 8px;
+          opacity: 0.5;
+          overflow: hidden;
+          position: absolute;
+          top: 4px;
+          @include transition(all 0.15s linear 0s);
+          width: 26px;
+        }
+
+        &:hover, &:focus {
+          .avatar {
+            opacity: 0.8;
+          }
+        }
+      }
+
+      ul.dropdown-menu {
+        background: $border-color-4;
+        border-radius: 4px;
+        box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
+        border: 1px solid $border-color-3;
+        display: none;
+        padding: 5px 10px;
+        position: absolute;
+        right: 0px;
+        top: 34px;
+        width: 170px;
+        z-index: 3;
+
+        &.expanded {
+          display: block;
+        }
+
+        &::before {
+          background: transparent;
+          border: {
+            top: 6px solid $border-color-4;
+            right: 6px solid $border-color-4;
+            bottom: 6px solid transparent;
+            left: 6px solid transparent;
+          }
+          box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3;
+          content: "";
+          display: block;
+          height: 0px;
+          position: absolute;
+          @include transform(rotate(-45deg));
+          right: 12px;
+          top: -6px;
+          width: 0px;
+        }
+
+        li {
+          display: block;
+          border-top: 1px dotted $border-color-2;
+          box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
+
+          &:first-child {
+            border: none;
+            box-shadow: none;
+          }
+
+          > a {
+            border: 1px solid transparent;
+            border-radius: 3px;
+            @include box-sizing(border-box);
+            color: $link-color;
+            cursor: pointer;
+            display: block;
+            margin: 5px 0px;
+            overflow: hidden;
+            padding: 3px 5px 4px;
+            text-overflow: ellipsis;
+            @include transition(padding 0.15s linear 0s);
+            white-space: nowrap;
+            width: 100%;
+
+            &:hover, &:focus {
+              color: $base-font-color;
+              text-decoration: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .nav-global {
+    margin-top: ($baseline/2);
+    list-style: none;
+
+    li {
+      display: inline-block;
+      margin: 0 $baseline+1 0 0;
+      text-transform: uppercase;
+      letter-spacing: 0 !important;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      a {
+        border-bottom: 4px solid $header-bg;
+        display:block;
+        padding: ($baseline/4);
+        font-size: 18px;
+        padding-bottom: 20px;
+        font-weight: 600;
+        font-family: $header-sans-serif;
+        color: $courseware-navigation-color;
+
+        &:hover, &:focus{
+          text-decoration: none;
+          color: $courseware-hover-color;
+        }
+      }
+    }
+  }
+
+
+  .nav-courseware {
+    @extend .nav-global;
+    float: right;
+
+    li {
+      a {
+        &.nav-courseware-button {
+          padding: 5px 45px 5px 45px;
+          border: 3px solid $courseware-button-border-color;
+          border-radius: 5px;
+          margin-top: -22px;
+
+          &:hover, &:focus, &:active {
+            border-bottom-color: $courseware-button-border-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+.view-register header.global-new .cta-register {
+  text-decoration: none;
+  color: $courseware-hover-color;
+  border-bottom-color: $courseware-border-bottom-color;
+}
+
+// marketing site design syncing
+.view-register, .view-login {
+
+  header.global nav {
+    width: 960px;
+  }
+}
+
+// page-based nav states
+.view-howitworks .nav-global-01,
+.view-courses .nav-global-02,
+.view-schools .nav-global-03,
+.view-register .nav-global-04 {
+
+  a {
+    text-decoration: none;
+    color: $link-color !important;
+  }
+}

lms/templates/main.html

@@ -71,7 +71,13 @@
 
   else:
     header_extra_file = None
-    header_file = microsite.get_template_path('navigation.html')
+
+    if settings.FEATURES.get("ENABLE_NEW_EDX_HEADER", False):
+        header_file = microsite.get_template_path('navigation.html')
+    else:
+        header_file = microsite.get_template_path('original_navigation.html')
+
+
     google_analytics_file = microsite.get_template_path('google_analytics.html')
 
     if getattr(settings, 'SITE_NAME', '').endswith('edx.org'):

lms/templates/navigation.html

@@ -36,7 +36,7 @@ site_status_msg = get_site_status_msg(course_id)
 % endif
 </%block>
 
-  <header class="global ${"slim" if course else ""}" aria-label="${_('Global Navigation')}">
+  <header class="global-new ${"slim" if course else ""}" aria-label="${_('Global Navigation')}">
     <nav>
     <h1 class="logo">
       <a href="${marketing_link('ROOT')}">
@@ -96,33 +96,33 @@ site_status_msg = get_site_status_msg(course_id)
             <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
           </li>
           <li class="nav-global-02">
-            <a href="${marketing_link('COURSES')}">${_("Courses")}</a>
+            <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
           </li>
           <li class="nav-global-03">
-            <a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
+            <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</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="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
-          </li>
-          % else:
-          <li class="nav-global-04">
-            <a class="cta cta-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:
+        <li class="nav-courseware-01">
+          <a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
+        </li>
+        % else:
+        <li class="nav-courseware-01">
+          <a class="cta cta-register" href="/register">${_("Register")}</a>
+        </li>
+        % endif
+      % endif
+    <li class="nav-courseware-02">
       % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
           % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-          <a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Log in")}</a>
+          <a class="cta cta-login nav-courseware-button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Log in")}</a>
           % else:
-          <a class="cta cta-login" href="/login${login_query()}">${_("Log in")}</a>
+          <a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Log in")}</a>
           % endif
       % endif
     </li>

lms/templates/original_navigation.html

@@ -0,0 +1,143 @@
+## mako
+<%namespace name='static' file='static_content.html'/>
+<%namespace file='main.html' import="login_query, stanford_theme_enabled"/>
+<%!
+from django.core.urlresolvers import reverse
+from django.utils.translation import ugettext as _
+
+# App that handles subdomain specific branding
+import branding
+# app that handles site status messages
+from status.status import get_site_status_msg
+%>
+
+<%! from microsite_configuration import microsite %>
+<%! from microsite_configuration.templatetags.microsite import platform_name %>
+
+## Provide a hook for themes to inject branding on top.
+<%block name="navigation_top" />
+
+<%block cached="False">
+<%
+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 class="global ${"slim" if course else ""}" aria-label="${_('Global Navigation')}">
+    <nav>
+    <h1 class="logo">
+      <a href="${marketing_link('ROOT')}">
+        <%block name="navigation_logo">
+            <img src="${static.url(branding.get_logo_url())}" alt="${platform_name()}"/>
+        </%block>
+      </a>
+    </h1>
+
+    % if course:
+    <h2><span class="provider">${course.display_org_with_default | h}:</span> ${course.display_number_with_default | h} ${course.display_name_with_default}</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'):
+          <li class="nav-global-01">
+            <a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
+          </li>
+        % endif
+      </%block>
+    </ol>
+    <ol class="user">
+      <li class="primary">
+        <a href="${reverse('dashboard')}" class="user-link">
+          <span class="avatar"></span>
+          <span class="sr">${_("Dashboard for:")} </span> ${user.username}
+        </a>
+      </li>
+      <li class="primary">
+        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</a>
+        <ul class="dropdown-menu" aria-label="More Options" role="menu">
+          <%block name="navigation_dropdown_menu_links" >
+            % if settings.MKTG_URL_LINK_MAP.get('FAQ'):
+              <li><a href="${marketing_link('FAQ')}">${_("Help")}</a></li>
+            % endif
+          </%block>
+          <li><a href="${reverse('logout')}" role="menuitem">${_("Log Out")}</a></li>
+        </ul>
+      </li>
+    </ol>
+      % if display_shopping_cart: # 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')}">
+              <i class="icon-shopping-cart"></i> ${_("Shopping Cart")}
+            </a>
+          </li>
+        </ol>
+      % endif
+    % else:
+    <ol class="left nav-global">
+      <%block name="navigation_global_links">
+        % if microsite.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>
+          <li class="nav-global-02">
+            <a href="${marketing_link('COURSES')}">${_("Courses")}</a>
+          </li>
+          <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="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
+          </li>
+          % else:
+          <li class="nav-global-04">
+            <a class="cta cta-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="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Log in")}</a>
+          % else:
+          <a class="cta cta-login" href="/login${login_query()}">${_("Log in")}</a>
+          % endif
+      % endif
+    </li>
+    </ol>
+    % endif
+  </nav>
+</header>
+% if course:
+<!--[if lte IE 8]>
+<div class="ie-banner" aria-hidden="true">${_('<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"/>