diff --git a/common/djangoapps/course_modes/views.py b/common/djangoapps/course_modes/views.py index d4147b6fa3..043e4e32d8 100644 --- a/common/djangoapps/course_modes/views.py +++ b/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"] = [ 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..f68b97c8c7 --- /dev/null +++ b/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([ + '', + '', + '' + ].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 + }; + })(); + + setTimeout( function() { + rwd.init(); + }, 100); +})(jQuery); diff --git a/lms/envs/common.py b/lms/envs/common.py index c23e6c1556..b430be4033 100644 --- a/lms/envs/common.py +++ b/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' diff --git a/lms/static/images/verified-ribbon.png b/lms/static/images/verified-ribbon.png new file mode 100644 index 0000000000..56b4b04b51 Binary files /dev/null and b/lms/static/images/verified-ribbon.png differ diff --git a/lms/static/sass/base/_grid-settings.scss b/lms/static/sass/base/_grid-settings.scss new file mode 100644 index 0000000000..4e41d3ba82 --- /dev/null +++ b/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); diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 35dfbf1aa3..546af6040f 100644 --- a/lms/static/sass/base/_variables.scss +++ b/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; diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 9a6e4c37b2..9afd513a8b 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/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); + } + } + } } diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 33f7b7771f..dd0bddeb3d 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); @@ -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 { diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 3945876888..b900784744 100644 --- a/lms/static/sass/views/_verification.scss +++ b/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 diff --git a/lms/templates/main.html b/lms/templates/main.html index 51649afed1..0026085f3c 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -11,6 +11,9 @@ + % if responsive: + + % endif <%! from django.utils.translation import ugettext as _ %> <%! from microsite_configuration import microsite %> <%! from microsite_configuration import page_title_breadcrumbs %> diff --git a/lms/templates/navigation-edx.html b/lms/templates/navigation-edx.html index d5807a93a8..54cdfb7ba5 100644 --- a/lms/templates/navigation-edx.html +++ b/lms/templates/navigation-edx.html @@ -53,11 +53,15 @@ site_status_msg = get_site_status_msg(course_id) % if user.is_authenticated():
    <%block name="navigation_global_links_authenticated"> - % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'): -
    - ${_('Find Courses')} -
    - % endif +
  • + ${_("How it Works")} +
    • +
  • + ${_("Find Courses")} +
    • +
  • + ${_("Schools & Partners")} +
    • diff --git a/lms/templates/verify_student/_verification_header.html b/lms/templates/verify_student/_verification_header.html index 40dfa7dd1d..ce8a16e173 100644 --- a/lms/templates/verify_student/_verification_header.html +++ b/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'/> +

    @@ -66,3 +68,7 @@ % endif

    + +<%block name="js_extra"> + <%static:js group='rwd_header_footer'/> +