diff --git a/lms/djangoapps/branding/__init__.py b/lms/djangoapps/branding/__init__.py index a5fe4d5e2c..945fc6bcc5 100644 --- a/lms/djangoapps/branding/__init__.py +++ b/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 ) diff --git a/lms/envs/common.py b/lms/envs/common.py index dbca00c584..71a9f11986 100644 --- a/lms/envs/common.py +++ b/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 diff --git a/lms/static/images/logo-edX-77x36.png b/lms/static/images/logo-edX-77x36.png new file mode 100644 index 0000000000..4353551a87 Binary files /dev/null and b/lms/static/images/logo-edX-77x36.png differ diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 2b6a316836..35bf721ab7 100644 --- a/lms/static/sass/base/_variables.scss +++ b/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; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 1d55a4b25a..7c8704edf0 100644 --- a/lms/static/sass/shared/_header.scss +++ b/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; + } +} diff --git a/lms/templates/main.html b/lms/templates/main.html index fefc4deec7..7dbbd17b31 100644 --- a/lms/templates/main.html +++ b/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'): diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index 4852757aea..03075917f5 100644 --- a/lms/templates/navigation.html +++ b/lms/templates/navigation.html @@ -36,7 +36,7 @@ site_status_msg = get_site_status_msg(course_id) % endif -
+