diff --git a/common/static/js/spec_helpers/rwd_header_footer.js b/common/static/js/spec_helpers/rwd_header_footer.js new file mode 100644 index 0000000000..5770381472 --- /dev/null +++ b/common/static/js/spec_helpers/rwd_header_footer.js @@ -0,0 +1,97 @@ +/** + * Adds rwd classes and click handlers. + */ + +(function($) { + 'use strict'; + + var rwd = (function() { + + var _fn = { + header: 'header.global-new', + + footer: '.edx-footer-new', + + resultsUrl: 'course-search', + + init: function() { + _fn.$header = $( _fn.header ); + _fn.$footer = $( _fn.footer ); + _fn.$nav = _fn.$header.find('nav'); + _fn.$globalNav = _fn.$nav.find('.nav-global'); + + _fn.add.elements(); + _fn.add.classes(); + _fn.eventHandlers.init(); + }, + + add: { + classes: function() { + // Add any RWD-specific classes + _fn.$header.addClass('rwd'); + _fn.$footer.addClass('rwd'); + }, + + elements: function() { + _fn.add.burger(); + _fn.add.registerLink(); + }, + + burger: function() { + _fn.$nav.prepend([ + '', + '', + '' + ].join('')); + }, + + registerLink: function() { + var $register = _fn.$nav.find('.cta-register'), + $li = {}, + $a = {}, + count = 0; + + // Add if register link is shown + if ( $register.length > 0 ) { + count = _fn.$globalNav.find('li').length + 1; + + // Create new li + $li = $('
'); + $li.addClass('desktop-hide nav-global-0' + count); + + // Clone register link and remove classes + $a = $register.clone(); + $a.removeClass(); + + // append to DOM + $a.appendTo( $li ); + _fn.$globalNav.append( $li ); + } + } + }, + + eventHandlers: { + init: function() { + _fn.eventHandlers.click(); + }, + + click: function() { + // Toggle menu + _fn.$nav.on( 'click', '.mobile-menu-button', _fn.toggleMenu ); + } + }, + + toggleMenu: function( event ) { + event.preventDefault(); + + _fn.$globalNav.toggleClass('show'); + } + }; + + return { + init: _fn.init + }; + })(); + + rwd.init(); +})(jQuery); diff --git a/lms/envs/common.py b/lms/envs/common.py index 9820b16ae3..588abf375b 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -1026,6 +1026,7 @@ instructor_dash_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/ins # These are not courseware, so they do not need many of the courseware-specific # JavaScript modules. student_account_js = [ + 'js/common_helpers/rwd_header_footer.js', 'js/common_helpers/edx.utils.validate.js', 'js/student_account/models/LoginModel.js', 'js/student_account/models/RegisterModel.js', diff --git a/lms/static/sass/base/_grid-settings.scss b/lms/static/sass/base/_grid-settings.scss index d3c8a75802..f406065403 100644 --- a/lms/static/sass/base/_grid-settings.scss +++ b/lms/static/sass/base/_grid-settings.scss @@ -9,4 +9,5 @@ $border-box-sizing: false; /* Breakpoints */ $mobile: new-breakpoint(max-width 320px 4); $tablet: new-breakpoint(min-width 321px max-width 768px, 8); -$desktop: new-breakpoint(min-width 769px 12); \ No newline at end of file +$desktop: new-breakpoint(min-width 769px 12); +$xl-desktop: new-breakpoint(min-width 980px 12); \ No newline at end of file diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 3255716e78..18615b88ff 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -1,5 +1,8 @@ // Open edX: LMS footer // ==================== +@import '../base/grid-settings'; +@import 'neat/neat'; // lib - Neat + .wrapper-footer { box-shadow: 0 -1px 5px 0 rgba(0,0,0, 0.1); border-top: 1px solid tint($m-gray,50%); @@ -354,6 +357,7 @@ $edx-footer-bg-color: rgb(252,252,252); .footer-nav-title { @extend %edx-footer-title; + font-size: 13px; } .footer-nav-links { @@ -370,16 +374,19 @@ $edx-footer-bg-color: rgb(252,252,252); @extend %edx-footer-reset; @extend %edx-footer-section; width: flex-grid(3,12); + } .footer-follow-title { @extend %edx-footer-title; + font-size: 13px; } .footer-follow-links { a { @extend %edx-footer-link; + line-height: 34px; .icon, .copy { display: inline-block; @@ -399,4 +406,37 @@ $edx-footer-bg-color: rgb(252,252,252); } } } + + &.rwd { + @include box-sizing(border-box); + @include outer-container; + $grid-columns: 4; + + &.wrapper-footer footer { + min-width: 0; + } + + .footer-about, + .footer-nav, + .footer-follow { + @include span-columns(4); + } + + @include media( $tablet ) { + /*$grid-columns: 8;*/ + } + + @include media( $desktop ) { + $grid-columns: 12; + + .footer-about { + @include span-columns(6); + } + + .footer-nav, + .footer-follow { + @include span-columns(3); + } + } + } } diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 33f7b7771f..7bc0cf423c 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -1,3 +1,6 @@ +@import '../base/grid-settings'; +@import 'neat/neat'; // lib - Neat + header.global { border-bottom: 1px solid $m-gray; box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1); @@ -331,8 +334,10 @@ header.global { // CASE: marketing/course discovery header.global-new { @extend %ui-depth1; + /* Temp. fix until applied globally */ + @include box-sizing(border-box); + position: relative; - height: ($baseline*3.75); width: 100%; border-bottom: 4px solid $courseware-border-bottom-color; box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1); @@ -340,15 +345,16 @@ header.global-new { nav { @include clearfix(); + @include box-sizing(border-box); width: grid-width(12); - height: ($baseline*2); + height: 74px; margin: 0 auto; - padding: 18px ($baseline/2) 0; + padding: 17px 0; } h1.logo { float: left; - margin: -2px 39px 0px 0px; + margin: -2px 39px 0 10px; position: relative; a { @@ -560,7 +566,7 @@ header.global-new { } } - .nav-global { + %default-header-nav { margin-top: ($baseline/4); list-style: none; float: left; @@ -568,25 +574,21 @@ header.global-new { li, div { display: inline-block; - margin: 0 $baseline+1 0 0; + margin: 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); + padding: 3px 10px; font-size: 18px; - padding-bottom: ($baseline*1.25); - font-weight: 600; + line-height: 24px; + font-weight: 500; font-family: $header-sans-serif; color: $courseware-navigation-color; - &:hover, &:focus{ + &:hover, + &:focus { text-decoration: none; color: $courseware-hover-color; } @@ -594,25 +596,26 @@ header.global-new { } } + .nav-global { + @extend %default-header-nav; + } + .nav-courseware { - @extend .nav-global; + @extend %default-header-nav; float: right; div { display: inline-block; - margin: 0 21px 0 0; text-transform: uppercase; letter-spacing: 0!important; position: relative; - vertical-align: middle; &:last-child { - margin-right: 0; + margin-right: 10px; } a { &.nav-courseware-button { - padding: 5px 45px 5px 45px; border: 3px solid $courseware-button-border-color; border-radius: 5px; margin-top: -22px; @@ -628,6 +631,175 @@ header.global-new { } } } + + &.rwd { + nav { + max-width: 1180px; + width: 320px; + } + + .mobile-menu-button { + display: inline; + float: left; + text-decoration: none; + color: $m-gray; + margin-toP: 9px; + font-size: 18px; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } + } + + .logo { + position: absolute; + width: 54px; + left: calc( 50% - 90px ); + top: 20px; + + img { + width: 54px; + } + } + + .nav-global, + .nav-courseware { + a { + font-size: 14px; + + &.nav-courseware-button { + width: 86px; + text-align: center; + margin-top: -3px; + } + } + } + + .nav-global, + .nav-courseware-01 { + display: none; + } + + .nav-global { + position: absolute; + top: 73px; + left: calc( 50% - 160px ); + z-index: 1000; + width: 320px; + background: $m-blue-d3; + + &.show { + display: inline; + } + + a { + color: white; + padding: 10px; + font-weight: 300; + + &:hover, + &:focus { + background: $m-blue-d5; + color: white; + } + } + + li { + display: block; + border-bottom: 1px solid $m-blue-d5; + } + } + + .nav-courseware { + display: inline; + + div:last-child { + margin-right: 0; + } + } + + @include media( $desktop ) { + nav { + width: 100%; + } + + .mobile-menu-button { + display: none; + } + + .logo { + position: relative; + width: auto; + top: inherit; + left: inherit; + margin-left: 10px; + + img { + width: auto; + } + } + + .nav-global { + display: inline; + position: relative; + z-index: auto; + width: auto; + top: auto; + left: auto; + background: inherit; + + a { + color: $courseware-navigation-color; + padding: 3px 10px; + font-weight: 500; + + &:hover, + &:focus { + background: inherit; + color: $courseware-hover-color; + } + } + + li { + display: inline-block; + border-bottom: none; + } + } + + .nav-courseware { + div:last-child { + margin-right: 10px; + } + } + + .nav-courseware-01 { + display: inline-block; + } + + .desktop-hide { + display: none!important; + } + } + + @include media( $xl-desktop ) { + nav { + padding: 17px 10px; + } + + .nav-global, + .nav-courseware { + a { + font-size: 18px; + } + } + + .logo { + margin-left: 0; + } + } + } } .view-register header.global-new .cta-register {