Skip to content

E
edx-platform
Commit 03355141 by Stephen Sanchez
Options

Updating the platform header styles to match new site styles. 

Putting the new edx header behind a feature flag.
parent 70d47fb5
Showing with 495 additions and 19 deletions
lms/djangoapps/branding/__init__.py
...@@ -63,7 +63,7 @@ def get_logo_url(): ...@@ -63,7 +63,7 @@ def get_logo_url():
university = microsite.get_value('university') university = microsite.get_value('university')
if university is None: 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 static_url=settings.STATIC_URL
) )
......
lms/envs/common.py
...@@ -264,6 +264,11 @@ FEATURES = { ...@@ -264,6 +264,11 @@ FEATURES = {
# Default to false here b/c dev environments won't have the api, will override in aws.py # Default to false here b/c dev environments won't have the api, will override in aws.py
'ENABLE_ANALYTICS_ACTIVE_COUNT': False, '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 # Ignore static asset files on import which match this pattern
......
lms/static/sass/base/_variables.scss
...@@ -217,6 +217,10 @@ $footer-bg: $white; ...@@ -217,6 +217,10 @@ $footer-bg: $white;
$courseware-footer-border: none; $courseware-footer-border: none;
$courseware-footer-shadow: none; $courseware-footer-shadow: none;
$courseware-footer-margin: 0px; $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; ...@@ -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-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
// Header specific sans-serif
$header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif;
// SPLINT: colors // SPLINT: colors
$msg-bg: $action-primary-bg; $msg-bg: $action-primary-bg;
lms/static/sass/shared/_header.scss
...@@ -316,3 +316,317 @@ header.global { ...@@ -316,3 +316,317 @@ header.global {
color: $link-color !important; 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 @@ ...@@ -71,7 +71,13 @@
else: else:
header_extra_file = None 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') google_analytics_file = microsite.get_template_path('google_analytics.html')
if getattr(settings, 'SITE_NAME', '').endswith('edx.org'): 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) ...@@ -36,7 +36,7 @@ site_status_msg = get_site_status_msg(course_id)
% endif % endif
</%block> </%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> <nav>
<h1 class="logo"> <h1 class="logo">
<a href="${marketing_link('ROOT')}"> <a href="${marketing_link('ROOT')}">
...@@ -96,33 +96,33 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -96,33 +96,33 @@ site_status_msg = get_site_status_msg(course_id)
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a> <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li> </li>
<li class="nav-global-02"> <li class="nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Courses")}</a> <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</li> </li>
<li class="nav-global-03"> <li class="nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a> <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</li> </li>
% endif % endif
</%block> </%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>
<ol class="right nav-courseware"> <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 not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain: % 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: % 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
% endif % endif
</li> </li>
......
lms/templates/original_navigation.html 0 → 100644
## 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"/>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment