Skip to content

E
edx-platform
Commit 790ac3f3 by AlasdairSwan
Options

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

ECOM-574 Updated track selection page to be responsive
parents 96b5637b 23081f07
Showing with 483 additions and 71 deletions
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 → 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
};
})();
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 → 100644
@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
// 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
@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
// 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
<%! 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>
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