Skip to content

E
edx-platform
Commit ff753f2b by AlasdairSwan
Options

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

Alasdair/rwd header and footer
parents 63ea30da 0c22db68
Showing with 332 additions and 20 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
......@@ -10,3 +10,4 @@ $border-box-sizing: false;
$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);
\ 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,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 {
......
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