diff --git a/lms/djangoapps/learner_dashboard/views.py b/lms/djangoapps/learner_dashboard/views.py index fe3a1a90cc..c719583c0c 100644 --- a/lms/djangoapps/learner_dashboard/views.py +++ b/lms/djangoapps/learner_dashboard/views.py @@ -33,11 +33,15 @@ def view_programs(request): slug=program['marketing_slug'] ) - return render_to_response('learner_dashboard/programs.html', { + context = { 'programs': programs, 'progress': meter.progress, 'xseries_url': marketing_root if ProgramsApiConfig.current().show_xseries_ad else None, 'nav_hidden': True, 'show_program_listing': show_program_listing, - 'credentials': _get_xseries_credentials(request.user) - }) + 'credentials': _get_xseries_credentials(request.user), + 'disable_courseware_js': True, + 'uses_pattern_library': True + } + + return render_to_response('learner_dashboard/programs.html', context) diff --git a/lms/envs/common.py b/lms/envs/common.py index bf87fdc0f6..2e8d159c14 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -1495,6 +1495,18 @@ PIPELINE_CSS = { ], 'output_filename': 'css/certificates-style-rtl.css' }, + 'style-learner-dashboard': { + 'source_filenames': [ + 'css/lms-learner-dashboard.css', + ], + 'output_filename': 'css/lms-learner-dashboard.css', + }, + 'style-learner-dashboard-rtl': { + 'source_filenames': [ + 'css/lms-learner-dashboard-rtl.css', + ], + 'output_filename': 'css/lms-learner-dashboard-rtl.css', + }, } diff --git a/lms/static/js/spec/learner_dashboard/certificate_view_spec.js b/lms/static/js/spec/learner_dashboard/certificate_view_spec.js index 92e61daa07..51c9e99df1 100644 --- a/lms/static/js/spec/learner_dashboard/certificate_view_spec.js +++ b/lms/static/js/spec/learner_dashboard/certificate_view_spec.js @@ -38,14 +38,14 @@ define([ }); it('should load the certificates based on passed in certificates list', function() { - var $certificates = view.$el.find('.certificate-box'); + var $certificates = view.$el.find('.certificate-link'); expect($certificates.length).toBe(2); $certificates.each(function(index, el){ expect($(el).html().trim()).toEqual(data.context.certificatesData[index].display_name); expect($(el).attr('href')).toEqual(data.context.certificatesData[index].credential_url); }); - expect(view.$el.find('.title').html().trim()).toEqual('XSeries Program Certificates:'); + expect(view.$el.find('.hd-6').html().trim()).toEqual('XSeries Program Certificates:'); expect(view.$el.find('img').attr('src')).toEqual('/images/testing.png'); }); @@ -57,7 +57,7 @@ define([ context: {certificatesData: []} }); view.render(); - $certificate = view.$el.find('.certificate-box'); + $certificate = view.$el.find('.certificate-link'); expect($certificate.length).toBe(0); }); }); diff --git a/lms/static/js/spec/learner_dashboard/sidebar_view_spec.js b/lms/static/js/spec/learner_dashboard/sidebar_view_spec.js index 14f57bd91f..e2995f0f11 100644 --- a/lms/static/js/spec/learner_dashboard/sidebar_view_spec.js +++ b/lms/static/js/spec/learner_dashboard/sidebar_view_spec.js @@ -46,7 +46,7 @@ define([ }); it('should load the certificates based on passed in certificates list', function() { - expect(view.$('.certificate-box').length).toBe(1); + expect(view.$('.certificate-link').length).toBe(1); }); it('should not load the xseries advertising if no xseriesUrl passed in', function(){ @@ -59,7 +59,7 @@ define([ view.render(); $ad = view.$el.find('.program-advertise'); expect($ad.length).toBe(0); - expect(view.$('.certificate-box').length).toBe(0); + expect(view.$('.certificate-link').length).toBe(0); }); }); diff --git a/lms/static/sass/_build-learner-dashboard.scss b/lms/static/sass/_build-learner-dashboard.scss new file mode 100644 index 0000000000..550649e1c3 --- /dev/null +++ b/lms/static/sass/_build-learner-dashboard.scss @@ -0,0 +1,6 @@ +// ------------------------------ +// Learner Dashboard: Shared Build Compile +// Uses the Pattern Library + +@import 'views/program-list'; +@import 'elements/program-card'; diff --git a/lms/static/sass/_build-lms-v1.scss b/lms/static/sass/_build-lms-v1.scss index bfa3ea5859..97cae57036 100644 --- a/lms/static/sass/_build-lms-v1.scss +++ b/lms/static/sass/_build-lms-v1.scss @@ -18,7 +18,6 @@ @import 'elements/navigation'; @import 'elements/pagination'; @import 'elements/creative-commons'; -@import 'elements/program-card'; // shared - course @import 'shared/fields'; @@ -59,8 +58,7 @@ @import "views/financial-assistance"; @import 'views/bookmarks'; @import 'course/auto-cert'; -@import 'xseries_certificates'; -@import 'views/program-list'; +@import 'elements/xseries-certificates'; @import 'views/api-access'; // app - discussion diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 6c62583c5c..0608be8817 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -306,10 +306,6 @@ $credit-color-base: rgb(244,195,0); // accessible with black text // edx-specific: Studio/Staff actions $staff-color: $pink; -// from the edX Pattern Library -$x-light: #E5E9EB; -$success-dark: #1E8142; -$warning-base: #FDBC56; // ---------------------------- // #TYPOGRAPHY diff --git a/lms/static/sass/elements/_program-card.scss b/lms/static/sass/elements/_program-card.scss index 695b0303af..d8f355dfe9 100644 --- a/lms/static/sass/elements/_program-card.scss +++ b/lms/static/sass/elements/_program-card.scss @@ -1,34 +1,37 @@ -// +Imports -// ==================== -@import '../base/grid-settings'; -@import 'neat/neat'; // lib - Neat - %hide-until-focus { @include left(0); display: inline-block; position: absolute; - top: -($baseline*30); + top: -1000px; overflow: hidden; } .program-card{ - @include span-columns(12); + @include span(12); border: 1px solid $border-color-l3; border-bottom: none; - box-sizing: border-box; - margin-bottom: $baseline; + margin-bottom: $baseline + px; position: relative; - display: inline; + + @include susy-media($bp-screen-md) { + @include span(6); + + &:nth-child(2n) { + @include margin-right(0); + } + } .card-link{ @include left(0); + @include right(0); position: absolute; top: 0; bottom: 0; - right: 0; border: 0; z-index: 1; opacity: 0.8; + + &:active, &:hover, &:focus{ opacity: 1; @@ -37,7 +40,11 @@ .banner-image-container{ position: relative; overflow: hidden; - height: 116px; + height: 166px; + + @include susy-media($bp-screen-sm) { height: 242px; } + @include susy-media($bp-screen-md) { height: 116px; } + @include susy-media($bp-screen-lg) { height: 145px; } .banner-image{ @include left(50%); @@ -51,58 +58,61 @@ } .text-section{ - padding: 40px $baseline $baseline; - margin-top: 106px; + padding: 40px $baseline + px $baseline + px; position: relative; + margin-top: 156px; - .meta-info{ - @include outer-container; - font-size: em(12); - color: $gray; - position: absolute; - top: $baseline; - width: calc(100% - 40px); + @include susy-media($bp-screen-sm) { margin-top: 232px; } + @include susy-media($bp-screen-md) { margin-top: 106px; } + @include susy-media($bp-screen-lg) { margin-top: 135px; } + } - .organization{ - @include span-columns(6); - white-space: nowrap; - overflow: hidden; - } + .meta-info{ + font-size: font-size(x-small); + color: palette(grayscale, dark); + position: absolute; + top: $baseline + px; + width: calc(100% - 40px); + } - .category{ - @include span-columns(6); - text-align: right; + .organization{ + @include span(6); + white-space: nowrap; + overflow: hidden; + } - .category-text{ - @include float(right); - } + .category{ + @include span(6); + @include text-align(right); - .xseries-icon{ - @include float(right); - @include margin-right($baseline*0.25); - background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat; - background-color: transparent; - background-size: 100%; - width: ($baseline*0.7); - height: ($baseline*0.7); - } - } + .category-text{ + @include float(right); } - - .title{ - @extend %t-title4; - font-size: em(24); - color: $gray-d2; - margin-bottom: 10px; - line-height: 1.2; - min-height: ($baseline*3); + + .xseries-icon{ + @include float(right); + @include margin-right($baseline*0.25 + px); + background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat; + background-color: transparent; + background-size: 100%; + width: ($baseline*0.7 + px); + height: ($baseline*0.7 + px); } } + + .hd-3 { + color: palette(grayscale, x-dark); + min-height: ($baseline*3) + px; + line-height: 1; + } .certificate-status { + margin-bottom: 0; + .status-text { - font-size: em(12); - color: $gray; + font-size: font-size(x-small); + color: palette(grayscale, dark); + line-height: 1; } .secondary { @@ -113,7 +123,7 @@ &:focus, &:active { position: relative; - top: auto; + top: 4px; width: auto; height: auto; margin: 0; @@ -128,7 +138,7 @@ .progress { height: 5px; - background: $x-light; + background: palette(grayscale-cool, x-light); .bar { @include float(left); @@ -136,84 +146,12 @@ position: relative; &.complete { - background: $success-dark; + background: palette(success, dark); } &.in-progress { - background: $warning-base; + background: palette(warning, base); } } } } - -@include media($bp-small) { - .program-card{ - @include omega(n); - @include span-columns(4); - - .card-link{ - .banner-image-container{ - height: 166px; - } - } - - .text-section{ - margin-top: 156px; - } - } -} - - -@include media($bp-medium) { - .program-card{ - @include omega(n); - @include span-columns(8); - - .card-link{ - .banner-image-container{ - height: 242px; - } - } - - .text-section{ - margin-top: 232px; - } - } -} - - - -@include media($bp-large) { - .program-card{ - @include omega(2n); - @include span-columns(6); - - .card-link{ - .banner-image-container{ - height: 116px; - } - } - - .text-section{ - margin-top: 106px; - } - } -} - -@include media($bp-huge) { - .program-card{ - @include omega(2n); - @include span-columns(6); - - .card-link{ - .banner-image-container{ - height: 145px; - } - } - - .text-section{ - margin-top: 135px; - } - } -} - diff --git a/lms/static/sass/_xseries_certificates.scss b/lms/static/sass/elements/_xseries-certificates.scss similarity index 93% rename from lms/static/sass/_xseries_certificates.scss rename to lms/static/sass/elements/_xseries-certificates.scss index 7cc9dab924..33fcd8f6ad 100644 --- a/lms/static/sass/_xseries_certificates.scss +++ b/lms/static/sass/elements/_xseries-certificates.scss @@ -10,7 +10,7 @@ margin-bottom:$baseline; color: $gray; } - .certificate-box{ + .certificate-link{ padding-top: $baseline; display: block; } diff --git a/lms/static/sass/lms-learner-dashboard-rtl.scss b/lms/static/sass/lms-learner-dashboard-rtl.scss new file mode 100644 index 0000000000..3ccb8b3721 --- /dev/null +++ b/lms/static/sass/lms-learner-dashboard-rtl.scss @@ -0,0 +1,13 @@ +// ------------------------------ +// LMS Learner Dashboard styling +// users the Pattern Library + +// NOTE: This is the right-to-left (RTL) configured style compile. +// It should mirror lms-learner-dashboard-rtl w/ the exception of bi-app references. + + +// Load the RTL version of lms main +@import 'lms-main-v2-rtl'; + +// Load the shared build +@import 'build-learner-dashboard'; diff --git a/lms/static/sass/lms-learner-dashboard.scss b/lms/static/sass/lms-learner-dashboard.scss new file mode 100644 index 0000000000..422caaa61a --- /dev/null +++ b/lms/static/sass/lms-learner-dashboard.scss @@ -0,0 +1,13 @@ +// ------------------------------ +// LMS Learner Dashboard styling +// users the Pattern Library + +// NOTE: This is the left-to-right (LTR) configured style compile. +// It should mirror lms-learner-dashboard-rtl w/ the exception of bi-app references. + + +// Load the LTR version of lms main +@import 'lms-main-v2'; + +// Load the shared build +@import 'build-learner-dashboard'; diff --git a/lms/static/sass/shared-v2/_base.scss b/lms/static/sass/shared-v2/_base.scss index 55363c2800..12bba147e5 100644 --- a/lms/static/sass/shared-v2/_base.scss +++ b/lms/static/sass/shared-v2/_base.scss @@ -1,6 +1,11 @@ // LMS base styles .content-wrapper { - margin: 0 auto; - padding: 10px; + width: span(12); + margin: 0 auto; + background: palette(grayscale, white-t); + + @media print { + padding-bottom: 0; + } } diff --git a/lms/static/sass/shared-v2/_header.scss b/lms/static/sass/shared-v2/_header.scss index 0998ed4c01..1cd5486125 100644 --- a/lms/static/sass/shared-v2/_header.scss +++ b/lms/static/sass/shared-v2/_header.scss @@ -1,71 +1,96 @@ // LMS header styles .header-global { - @extend %ui-depth1; + @extend %ui-depth1; + box-sizing: border-box; + position: relative; + width: 100%; + border-bottom: 1px solid $gray-l1; + box-shadow: 0 1px 5px 0 $shadow-l1; + background: $header-bg; + + .wrapper-header { + @include clearfix(); box-sizing: border-box; - position: relative; + height: 74px; + margin: 0 auto; + padding: 10px 10px 0; width: 100%; - border-bottom: 4px solid $courseware-border-bottom-color; - box-shadow: 0 1px 5px 0 $shadow-l1; - background: $header-bg; + max-width: 1180px; - .wrapper-header { - @include clearfix(); - box-sizing: border-box; - height: 74px; - margin: 0 auto; - padding: 10px 10px 0; - width: 100%; - max-width: 1180px; - - .logo { - @include float(left); - @include margin-right(39px); - @include margin-left(10px); - margin-top: 4px; - margin-bottom: 0; - position: relative; - } - - .left { - @include float(left); - } - - .right { - @include float(right); - } - - .wrapper-user-menu { - @include float(right); - margin-top: 4px; - width: auto; - } - - .dropdown-menu { - @include text-align(left); - top: inherit; - } - - .list-inline { - &.nav-global { - margin-top: 12px; - } - - &.nav-courseware { - margin-top: 5px; - } - - .item { - font-weight: font-weight(semi-bold); - text-transform: uppercase; - - &.active { - a { - text-decoration: none; - color: $link-color; - } - } - } - } + .logo { + @include float(left); + @include margin-right(39px); + @include margin-left(10px); + margin-top: 4px; + margin-bottom: 0; + position: relative; } + + .left { + @include float(left); + } + + .right { + @include float(right); + } + + .wrapper-user-menu { + @include float(right); + margin-top: 4px; + width: auto; + } + + .dropdown-menu { + @include text-align(left); + top: inherit; + } + + .list-inline { + &.nav-global { + margin-top: 12px; + } + + &.nav-courseware { + margin-top: 5px; + } + + .item { + font-weight: font-weight(semi-bold); + text-transform: uppercase; + + &.active { + a { + text-decoration: none; + color: $link-color; + } + } + } + } + + .tab-nav-item{ + @include float(left); + display: flex; + margin: 0; + justify-content: center; + + .tab-nav-link{ + font-size: font-size(base); + font-weight: font-weight(semi-bold); + color: palette(grayscale, dark); + padding: 5px 25px 23px; + display: inline-block; + + &:active, + &:focus, + &:hover { + border-bottom: 4px solid $courseware-border-bottom-color; + } + } + + .active{ + border-bottom: 4px solid $black-t3 !important; + } + } + } } diff --git a/lms/static/sass/views/_program-list.scss b/lms/static/sass/views/_program-list.scss index 47ae704fba..63b0654ca2 100644 --- a/lms/static/sass/views/_program-list.scss +++ b/lms/static/sass/views/_program-list.scss @@ -1,163 +1,108 @@ -// +Imports -// ==================== -@import '../base/grid-settings'; -@import 'neat/neat'; // lib - Neat - -//Patern Library button colors -$pl-button-border-color: #065683; -$pl-button-color: #0079bc; - -.program-list-wrapper{ - @include outer-container; - padding: $baseline $baseline; +.program-list-wrapper { + padding: $baseline + px; } -.program-cards-container{ - @include outer-container; - @include span-columns(12); -} -.sidebar{ - @include outer-container; - @include span-columns(12); - @include float(right); - margin-bottom: $baseline; - .certificate-container{ - @include xseries-certificate-container(); +.program-cards-container { + @include span(12); + + @include susy-media($bp-screen-md) { + @include span(9); } - .program-advertise{ - padding: $baseline; +} + +.sidebar { + @include span(12); + @include float(right); + margin-bottom: $baseline + px; + + @include susy-media($bp-screen-md) { + @include span(3); + } + + .aside { + padding: $baseline + px; + margin-bottom: $baseline + px; background-color: $body-bg; box-sizing: border-box; border: 1px solid $border-color-l3; + } + + .program-advertise { clear: both; - .advertise-message{ - font-size: em(12); - color: $gray-d4; - margin-bottom: $baseline; + + .btn-neutral { + width: 100%; + text-align: center; + padding: 10px; + } - .ad-link{ - text-align:center; - a{ - padding: $baseline * 0.5; - border: 1px solid $pl-button-border-color; - color: $pl-button-color; - font-size: em(16); - text-decoration: none; - display: block; - line-height: 1.2; - &:hover, - &:focus, - &:active{ - color: $white; - background-color: $pl-button-color; - } - span{ - @include margin-left($baseline*0.25); - } + + .advertise-message { + font-size: font-size(x-small); + color: palette(grayscale, black); + margin-bottom: $baseline + px; + } + } + + .certificate-container { + .hd-6 { + color: palette(grayscale, dark); + font-weight: font-weight(normal); + margin-bottom: $baseline + px; + } + + .certificate-link { + padding-top: $baseline + px; + color: palette(primary, base); + display: block; + + &:active, + &:focus, + &:hover { + color: $link-hover; + text-decoration: underline; } } } } +.empty-programs-message { + border: 3px solid $gray-l4; + background: $gray-l6; + padding: ($baseline*2) + px 0; + text-align: center; + margin-bottom: 20px; - -@include media($bp-medium) { - .program-cards-container{ - @include span-columns(8); + .hd-3 { + color: $black; + margin-bottom: $baseline + px; } - .sidebar{ - @include span-columns(8); - } -} + .find-xseries-programs { + background: $black; + border-color: $black; + color: $white; + .action-xseries-icon { + @include float(left); + @include margin-right($baseline*0.4 + px); -@include media($bp-large) { - .program-cards-container{ - @include span-columns(9); - } - .sidebar{ - @include omega(n); - @include span-columns(3); - } -} + display: inline; + background: url('#{$static-path}/images/icon-sm-xseries-white.png') no-repeat; + background-color: transparent; + width: ($baseline*1.1) + px; + height: ($baseline*1.1) + px; + } -@include media($bp-huge) { - .program-cards-container{ - @include span-columns(9); - } - .sidebar{ - @include omega(n); - @include span-columns(3); - } -} - -// CASE: empty list of programs - .empty-programs-message { - border: 3px solid $gray-l4; - background: $gray-l6; - padding: ($baseline*2) 0; - text-align: center; - - .text { - @include font-size(24); - margin: { - top: 0; - bottom: $baseline; - } - text-shadow: 0 1px rgba(255,255,255, 0.6); - text-transform: none; - font-family: $sans-serif; - letter-spacing: initial; + &:active, + &:hover, + &:focus { + background: $white; color: $black; - } - a { - @include box-sizing(border-box); - background-color: $blue; - border: 1px solid $blue; - box-shadow: 0 1px 8px 0 $shadow-l1; - color: $white; - font-family: $sans-serif; - display: inline-block; - letter-spacing: 1px; - margin-top: ($baseline/4); - margin-left: ($baseline/4); - padding: 15px 20px; - - &:hover, &:focus { - background: $blue-l2; - text-decoration: none; - } - } - - .find-xseries-programs { - @extend %btn-pl-black-base; .action-xseries-icon { - @include float(left); - @include margin-right($baseline*0.4); - - display: inline; - background: url('#{$static-path}/images/icon-sm-xseries-white.png') no-repeat; - background-color: transparent; - - width: ($baseline*1.1); - height: ($baseline*1.1); - } - &:hover, - &:focus { - - .action-xseries-icon { - @include float(left); - @include margin-right($baseline*0.4); - - display: inline; - background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat; - background-color: transparent; - - width: ($baseline*1.1); - height: ($baseline*1.1); - } + background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat; } } } +} diff --git a/lms/templates/learner_dashboard/certificate.underscore b/lms/templates/learner_dashboard/certificate.underscore index b1b6a9c3fc..1110dc76de 100644 --- a/lms/templates/learner_dashboard/certificate.underscore +++ b/lms/templates/learner_dashboard/certificate.underscore @@ -1,7 +1,7 @@
-

<%- gettext('XSeries Program Certificates') %>:

+

<%- gettext('XSeries Program Certificates') %>:

<% _.each(certificatesData, function(certificate){ %> - <%- gettext(certificate.display_name) %> + <%- gettext(certificate.display_name) %> <% }); %>
diff --git a/lms/templates/learner_dashboard/empty_programs_list.underscore b/lms/templates/learner_dashboard/empty_programs_list.underscore index 521d68d23a..2215da497d 100644 --- a/lms/templates/learner_dashboard/empty_programs_list.underscore +++ b/lms/templates/learner_dashboard/empty_programs_list.underscore @@ -1,6 +1,6 @@
-

<%- gettext('You are not enrolled in any XSeries Programs yet.') %>

- +

<%- gettext('You are not enrolled in any XSeries Programs yet.') %>

+ <%- gettext('Explore XSeries Programs') %> diff --git a/lms/templates/learner_dashboard/explore_new_programs.underscore b/lms/templates/learner_dashboard/explore_new_programs.underscore index 1b0e5c6e30..932451f9a7 100644 --- a/lms/templates/learner_dashboard/explore_new_programs.underscore +++ b/lms/templates/learner_dashboard/explore_new_programs.underscore @@ -2,7 +2,7 @@ <%- gettext('Browse recently launched courses and see what\'s new in your favorite subjects') %>
- + <%- gettext('Explore New XSeries') %> diff --git a/lms/templates/learner_dashboard/program_card.underscore b/lms/templates/learner_dashboard/program_card.underscore index 1d1e7fd0ac..6387f52216 100644 --- a/lms/templates/learner_dashboard/program_card.underscore +++ b/lms/templates/learner_dashboard/program_card.underscore @@ -1,9 +1,9 @@
-

<%- gettext(name) %>

-
-
<%- orgList %>
-
+

<%- gettext(name) %>

+
+
<%- orgList %>
+
<%- gettext(type) %>
diff --git a/lms/templates/learner_dashboard/programs.html b/lms/templates/learner_dashboard/programs.html index e4e6e1560c..6603ca3cc4 100644 --- a/lms/templates/learner_dashboard/programs.html +++ b/lms/templates/learner_dashboard/programs.html @@ -1,3 +1,6 @@ +## Override the default styles_version to the Pattern Library version (version 2) +<%! main_css = "style-learner-dashboard" %> + <%page expression_filter="h"/> <%inherit file="../main.html" /> <%namespace name='static' file='../static_content.html'/> @@ -23,9 +26,9 @@ ProgramListFactory({ <%block name="pagetitle">${_("Programs")}
-
-

${_("Your Programs")}

-
-
+
+

${_("Your Programs")}

+
+
diff --git a/lms/templates/learner_dashboard/sidebar.underscore b/lms/templates/learner_dashboard/sidebar.underscore index c93b1b2f32..8ea51b42a8 100644 --- a/lms/templates/learner_dashboard/sidebar.underscore +++ b/lms/templates/learner_dashboard/sidebar.underscore @@ -1,2 +1,2 @@ -
-
+ +