Merge pull request #5915 from edx/alasdair/rwd-trackselection

ECOM-574 Updated track selection page to be responsive

common/djangoapps/course_modes/views.py

@@ -94,6 +94,7 @@ class ChooseModeView(View):
             "error": error,
             "upgrade": upgrade,
             "can_audit": "audit" in modes,
+            "responsive": True
         }
         if "verified" in modes:
             context["suggested_prices"] = [

common/static/js/spec_helpers/rwd_header_footer.js

@@ -0,0 +1,99 @@
+/**
+ * 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
+        };
+    })();
+
+    setTimeout( function() {
+        rwd.init();
+    }, 100);
+})(jQuery);

lms/envs/common.py

@@ -1023,6 +1023,7 @@ main_vendor_js = base_vendor_js + [
 
 dashboard_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'js/dashboard/**/*.js'))
 discussion_js = sorted(rooted_glob(COMMON_ROOT / 'static', 'coffee/src/discussion/**/*.js'))
+rwd_header_footer_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'js/common_helpers/rwd_header_footer.js'))
 staff_grading_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/staff_grading/**/*.js'))
 open_ended_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/open_ended/**/*.js'))
 notes_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/notes/**/*.js'))
@@ -1201,6 +1202,10 @@ PIPELINE_JS = {
         'source_filenames': dashboard_js,
         'output_filename': 'js/dashboard.js'
     },
+    'rwd_header_footer': {
+        'source_filenames': rwd_header_footer_js,
+        'output_filename': 'js/rwd_header_footer.js'
+    },
     'student_account': {
         'source_filenames': student_account_js,
         'output_filename': 'js/student_account.js'

lms/static/sass/base/_grid-settings.scss

@@ -0,0 +1,14 @@
+@import "neat/neat-helpers"; // or "neat-helpers" when in Rails
+
+/* Change the grid settings */
+$max-width: 1200px;
+/* Override the default global box-sizing */
+$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);
+$xl-desktop:  new-breakpoint(min-width 980px 12);

lms/static/sass/base/_variables.scss

@@ -173,6 +173,7 @@ $m-blue-d1: #1790C7;
 $m-blue-d2: #1580B0;
 $m-blue-d3: #126F9A;
 $m-blue-d4: #0A4A67;
+$m-blue-d5: #009EE7;
 $m-blue-t0: rgba($m-blue,0.125);
 $m-blue-t1: rgba($m-blue,0.25);
 $m-blue-t2: rgba($m-blue,0.50);
@@ -423,6 +424,7 @@ $header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif;
 
 $msg-bg: $action-primary-bg;
 
+
 // New Shopping Cart
 
 $dark-gray1: #4a4a4a;

lms/static/sass/shared/_footer.scss

@@ -1,10 +1,14 @@
 // 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%);
   padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
   background: $footer-bg;
+  clear: both;
 
   footer {
     @include clearfix();
@@ -280,8 +284,6 @@ $edx-footer-bg-color: rgb(252,252,252);
       @extend %t-weight4;
     }
   }
-
-
 }
 
 .edx-footer-new {
@@ -352,6 +354,7 @@ $edx-footer-bg-color: rgb(252,252,252);
 
   .footer-nav-title {
     @extend %edx-footer-title;
+    margin-top: $baseline;
   }
 
   .footer-nav-links {
@@ -372,12 +375,14 @@ $edx-footer-bg-color: rgb(252,252,252);
 
   .footer-follow-title {
     @extend %edx-footer-title;
+    margin-top: $baseline;
   }
 
   .footer-follow-links {
 
     a {
       @extend %edx-footer-link;
+      margin-top: 20px;
 
       .icon, .copy {
         display: inline-block;
@@ -397,4 +402,33 @@ $edx-footer-bg-color: rgb(252,252,252);
       }
     }
   }
+
+  &.rwd {
+    @include box-sizing(border-box);
+    @include outer-container;
+
+    &.wrapper-footer footer {
+      min-width: 0;
+    }
+
+    .footer-about,
+    .footer-nav,
+    .footer-follow {
+      @include span-columns(12);
+    }
+
+    @include media( $tablet ) {
+    }
+
+    @include media( $desktop ) {
+      .footer-about {
+        @include span-columns(6);
+      }
+
+      .footer-nav,
+      .footer-follow {
+        @include span-columns(3);
+      }
+    }
+  }
 }

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);
@@ -317,7 +320,6 @@ header.global {
 .view-courses .nav-global-02,
 .view-schools .nav-global-03,
 .view-register .nav-global-04 {
-
   a {
     text-decoration: none;
     color: $link-color !important;
@@ -331,8 +333,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 +344,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 +565,7 @@ header.global-new {
     }
   }
 
-  .nav-global {
+  %default-header-nav {
     margin-top: ($baseline/4);
     list-style: none;
     float: left;
@@ -568,25 +573,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 +595,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 +630,182 @@ header.global-new {
       }
     }
   }
+
+  &.rwd {
+    nav {
+      max-width: 1180px;
+      width: 100%;
+    }
+
+    .mobile-menu-button {
+      @extend %t-action1;
+      display: inline;
+      float: left;
+      text-decoration: none;
+      color: $m-gray;
+      margin-top: 9px;
+
+      &: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 {
+        @extend %t-action3;
+
+        &.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;
+          border-bottom: none;
+        }
+      }
+
+      li {
+        display: block;
+        border-bottom: 1px solid $m-blue-d5;
+      }
+    }
+
+    .nav-courseware {
+      display: inline;
+
+      div:last-child {
+        margin-right: 0;
+      }
+    }
+
+    @include media( 320px ) {
+      nav {
+        width: 320px;
+      }
+    }
+
+    @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 {

lms/static/sass/views/_verification.scss

@@ -1,5 +1,7 @@
 // lms - views - verification flow
 // ====================
+@import '../base/grid-settings';
+@import 'neat/neat'; // lib - Neat
 
 // MISC: extends - button
 %btn-verify-primary {
@@ -12,7 +14,6 @@
 .is-expandable {
 
   .title-expand {
-
   }
 
   .expandable-icon {
@@ -438,7 +439,6 @@
           }
         }
       }
-
     }
   }
 
@@ -989,7 +989,7 @@
       @extend %t-weight4;
       position: absolute;
       top: -($baseline*1.25);
-      left: 45%;
+      left: calc( 50% - 46px );
       padding: ($baseline/2) ($baseline*1.5);
       background: white;
       text-align: center;
@@ -1129,22 +1129,35 @@
   }
 
   .content-supplementary {
-    width: flex-grid(12,12);
+    @include box-sizing(border-box);
+    @include outer-container;
+    @include span-columns(12);
 
     .list-help {
       @include clearfix();
 
       .help-item {
-        width: flex-grid(4,12);
+        @include fill-parent;
+
         float: left;
         margin-right: flex-gutter();
+        margin-bottom: 25px;
 
         &:last-child {
-          margin-right: 0;
+          margin: 0;
         }
+      }
+    }
 
-        &.help-item-technical {
-          width: flex-grid(8,12);
+    @include media( 550px ) {
+      .list-help {
+        .help-item {
+          @include span-columns(4);
+          margin-bottom: 0;
+
+          &.help-item-technical {
+            @include span-columns(8);
+          }
         }
       }
     }
@@ -1154,6 +1167,10 @@
 
   // VIEW: select a track
   &.step-select-track {
+    .container {
+      min-width: 0;
+      max-width: 1200px;
+    }
 
     .sts-track {
       @extend %text-sr;
@@ -1161,11 +1178,10 @@
 
     .form-register-choose {
       @include clearfix();
-      width: flex-grid(12,12);
       margin: ($baseline*2) 0;
 
       .deco-divider {
-        width: flex-grid(12,12);
+        @include fill-parent;
         float: left;
       }
     }
@@ -1175,7 +1191,7 @@
     }
 
     .register-choice {
-      width: flex-grid(12,12);
+      @include fill-parent;
       margin: 0 flex-gutter() $baseline 0;
       border-top: ($baseline/4) solid $m-gray-d4;
       padding: $baseline ($baseline*1.5);
@@ -1190,28 +1206,35 @@
         vertical-align: middle;
       }
 
-      .wrapper-copy {
-        width: flex-grid(8,8);
-      }
-
       .list-actions {
-        width: flex-grid(8,8);
+        @include fill-parent;
         text-align: right;
+        float: right;
+        margin: ($baseline/4) 0;
+        border-top: none;
+        clear: both;
       }
 
       .title {
         @extend %t-title5;
         @extend %t-weight5;
         margin-bottom: ($baseline/2);
+        width: calc( 100% - 30px );
       }
 
       .copy {
         @extend %t-copy-base;
       }
 
-      .action-select input {
-        @extend %t-weight4;
-        padding: ($baseline/2) ($baseline*0.75);
+      .action-select {
+        @include fill-parent;
+
+        input {
+          @extend %t-weight4;
+          padding: ($baseline/2) ($baseline*0.75);
+          width: 100%;
+          white-space: normal;
+        }
       }
     }
 
@@ -1226,15 +1249,9 @@
         display: block;
         width: ($baseline*2.9);
         height: ($baseline*4.2);
-        background: transparent url('../images/honor-ribbon.png') no-repeat 0 0;
-      }
-
-      .wrapper-copy {
-        width: flex-grid(8,8);
       }
 
       .list-actions {
-        width: flex-grid(8,8);
         margin: ($baseline) 0;
       }
 
@@ -1249,19 +1266,12 @@
 
       .deco-ribbon {
         position: absolute;
-        top: -($baseline*1.5);
+        top: -10px;
         right: $baseline;
         display: block;
-        width: ($baseline*3);
-        height: ($baseline*4);
-        background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0;
-      }
-
-      .list-actions {
-        margin: ($baseline/4) 0;
-        border-top: none;
-        width: flex-grid(4,12);
-        float: right;
+        width: 45px;
+        height: 45px;
+        background: transparent url('../images/verified-ribbon.png') no-repeat 0 0;
       }
 
       .action-intro, .action-select {
@@ -1270,15 +1280,11 @@
       }
 
       .action-intro {
+        @include fill-parent;
         @extend %copy-detail;
-        width: flex-grid(3,8);
         text-align: left;
       }
 
-      .action-select {
-        width: initial;
-      }
-
       .action-select input {
         @extend %btn-verify-primary;
       }
@@ -1301,7 +1307,7 @@
     }
 
     .help-register {
-      width: flex-grid(4,12);
+      @include span-columns(4);
 
       .title {
         @extend %hd-lv4;
@@ -1333,8 +1339,8 @@
 
     .contribution-options {
       @include clearfix();
+      @include fill-parent;
       margin: 0;
-      width: flex-grid(8,12);
 
       &:after{
         clear: none;
@@ -1342,6 +1348,7 @@
       }
 
       .field {
+        @include fill-parent;
         float: left;
         margin: 0 ($baseline/2) ($baseline/2) 0;
         padding: ($baseline/2) ($baseline*0.75);
@@ -1380,6 +1387,65 @@
         }
       }
     }
+
+    @include media(min-width 550px max-width 768px) {
+      .contribution-options {
+        .field {
+          @include span-columns(6);
+
+          &:nth-of-type(even) {
+            margin-right: 0;
+          }
+        }
+      }
+
+      .register-choice {
+        .list-actions {
+          float: left;
+          width: auto;
+        }
+
+        .action-select {
+          width: initial;
+
+          input {
+            width: initial;
+          }
+        }
+      }
+    }
+
+    @include media( $desktop ) {
+      .contribution-options {
+        .field {
+          width: auto;
+        }
+      }
+
+      .register-choice {
+        .list-actions {
+          @include span-columns(4);
+          width: auto;
+        }
+
+        .action-select {
+          width: initial;
+
+          input {
+            width: initial;
+          }
+        }
+      }
+    }
+
+    @include media( $xl-desktop ) {
+      .register-choice {
+        .list-actions {
+          float: right;
+          clear: none;
+        }
+      }
+    }
   }
 
   // VIEW: requirements

lms/templates/main.html

@@ -11,6 +11,9 @@
 <head dir="${dir_rtl}">
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    % if responsive:
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    % endif
 <%! from django.utils.translation import ugettext as _ %>
 <%! from microsite_configuration import microsite %>
 <%! from microsite_configuration import page_title_breadcrumbs %>

lms/templates/navigation-edx.html

@@ -53,11 +53,15 @@ site_status_msg = get_site_status_msg(course_id)
     % if user.is_authenticated():
     <div class="left nav-global authenticated">
       <%block name="navigation_global_links_authenticated">
-        % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
-          <div class="nav-global-01">
-            <a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
-          </div>
-        % endif
+          <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')}">${_("Find Courses")}</a>
+          </li>
+          <li class="nav-global-03">
+            <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
+          </li>
       </%block>
     </div>
 

lms/templates/verify_student/_verification_header.html

@@ -1,5 +1,7 @@
 <%! from django.utils.translation import ugettext as _ %>
 
+<%namespace name='static' file='../static_content.html'/>
+
 <header class="page-header">
     <h2 class="title">
         <span class="wrapper-sts">
@@ -66,3 +68,7 @@
         % endif
     </h2>
 </header>
+
+<%block name="js_extra">
+    <%static:js group='rwd_header_footer'/>
+</%block>