Skip to content

E
edx-platform
Commit e04a3ab3 by AlasdairSwan
Options

ECOM-406 Added JS fil that will update DOM to make the header and footer responsive 

 Made the header and footer responsive
parent a9a4057d
Showing with 324 additions and 21 deletions
common/static/js/spec_helpers/rwd_header_footer.js 0 → 100644
/**
* 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);
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',
......
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
lms/static/sass/shared/_footer.scss
// 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);
}
}
}
}
lms/static/sass/shared/_header.scss
@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,11 @@ 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);
/*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 +346,16 @@ header.global-new {
nav {
@include clearfix();
@include box-sizing(border-box);
width: grid-width(12);
height: ($baseline*2);
height: 74px; /*($baseline*2);*/
margin: 0 auto;
padding: 18px ($baseline/2) 0;
padding: 17px 0; /*($baseline/2);*/
}
h1.logo {
float: left;
margin: -2px 39px 0px 0px;
margin: -2px 39px 0 10px;
position: relative;
a {
......@@ -560,7 +567,7 @@ header.global-new {
}
}
.nav-global {
%default-header-nav {
margin-top: ($baseline/4);
list-style: none;
float: left;
......@@ -568,21 +575,16 @@ 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; /*($baseline/4);*/
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;
......@@ -594,25 +596,29 @@ 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;
/*margin: 0 21px 0 0;*/
text-transform: uppercase;
letter-spacing: 0!important;
position: relative;
vertical-align: middle;
/*vertical-align: middle;*/
&:last-child {
margin-right: 0;
margin-right: 10px;
}
a {
&.nav-courseware-button {
padding: 5px 45px 5px 45px;
/*padding: 5px 45px 5px 45px;*/
border: 3px solid $courseware-button-border-color;
border-radius: 5px;
margin-top: -22px;
......@@ -628,6 +634,164 @@ header.global-new {
}
}
}
&.rwd {
nav {
max-width: 1180px;
width: 320px;
}
.mobile-menu-button {
display: inline;
float: left;
text-decoration: none;
color: #9a9b9e;
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: #126f9a;
&.show {
display: inline;
}
a {
color: white;
padding: 10px;
font-weight: 300;
}
li {
display: block;
border-bottom: 1px solid #009ee7;
}
}
.nav-courseware {
display: inline;
div:last-child {
margin-right: 0;
}
}
@include media( $desktop ) {
/*$grid-columns: 12;*/
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;
}
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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment