From 033551416ba2e09c90db819b1f5ada39af5c4bed Mon Sep 17 00:00:00 2001 From: Stephen Sanchez Date: Mon, 18 Aug 2014 20:03:17 +0000 Subject: [PATCH] Updating the platform header styles to match new site styles. Putting the new edx header behind a feature flag. --- lms/djangoapps/branding/__init__.py | 2 +- lms/envs/common.py | 5 + lms/static/images/logo-edX-77x36.png | Bin 0 -> 5139 bytes lms/static/sass/base/_variables.scss | 7 + lms/static/sass/shared/_header.scss | 314 +++++++++++++++++++++++++ lms/templates/main.html | 8 +- lms/templates/navigation.html | 34 +-- lms/templates/original_navigation.html | 143 +++++++++++ 8 files changed, 494 insertions(+), 19 deletions(-) create mode 100644 lms/static/images/logo-edX-77x36.png create mode 100644 lms/templates/original_navigation.html 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 0000000000000000000000000000000000000000..4353551a87de9abfa2850ca131841b679500b298 GIT binary patch literal 5139 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 JFIT%8`aj3SX(s>x literal 0 HcmV?d00001 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 -
+