Merge pull request #5784 from edx/alasdair/rwd-header-and-footer

Alasdair/rwd header and footer
2014-10-30 09:21:21 -04:00
parent 63ea30da9f 0c22db688f
commit ff753f2bcb
5 changed files with 332 additions and 21 deletions
--- a/common/static/js/spec_helpers/rwd_header_footer.js
+++ 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([
+                        '<a href="#" class="mobile-menu-button" aria-label="menu">',
+                            '<i class="icon-reorder" aria-hidden="true"></i>',
+                        '</a>'
+                    ].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/>');
+                        $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);
--- 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',
--- 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);
+$desktop: new-breakpoint(min-width 769px 12);
+$xl-desktop:  new-breakpoint(min-width 980px 12);
--- 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);
+      }
+    }
+  }
 }
--- 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 {