diff --git a/lms/static/js/learner_dashboard/views/program_header_view.js b/lms/static/js/learner_dashboard/views/program_header_view.js index dcebbb82d7..20380c73b9 100644 --- a/lms/static/js/learner_dashboard/views/program_header_view.js +++ b/lms/static/js/learner_dashboard/views/program_header_view.js @@ -12,8 +12,7 @@ breakpoints: { min: { 'medium': '768px', - 'large': '1180px', - 'x-large': '1440px' + 'large': '1180px' } }, diff --git a/lms/static/js/spec/learner_dashboard/program_details_header_spec.js b/lms/static/js/spec/learner_dashboard/program_details_header_spec.js index a09223e028..bb8a63fb52 100644 --- a/lms/static/js/spec/learner_dashboard/program_details_header_spec.js +++ b/lms/static/js/spec/learner_dashboard/program_details_header_spec.js @@ -49,6 +49,8 @@ define([ }); it('should render the header based on the passed in model', function() { + var programListUrl = view.$('.breadcrumb-list .crumb:nth-of-type(2) .crumb-link').attr('href'); + expect(view.$('.title').html()).toEqual(context.programData.name); expect(view.$('.subtitle').html()).toEqual(context.programData.subtitle); expect(view.$('.org-logo').length).toEqual(context.programData.organizations.length); @@ -56,7 +58,7 @@ define([ expect(view.$('.org-logo').attr('alt')).toEqual( context.programData.organizations[0].display_name + '\'s logo' ); - expect(view.$('.breadcrumb').attr('href')).toEqual(context.programListingUrl); + expect(programListUrl).toEqual(context.programListingUrl); }); }); } diff --git a/lms/static/sass/_build-learner-dashboard.scss b/lms/static/sass/_build-learner-dashboard.scss index 17ec0628d6..e82ae2ea37 100644 --- a/lms/static/sass/_build-learner-dashboard.scss +++ b/lms/static/sass/_build-learner-dashboard.scss @@ -2,7 +2,8 @@ // Learner Dashboard: Shared Build Compile // Uses the Pattern Library -@import 'views/program-list'; -@import 'views/program-details'; +@import 'elements/banners'; @import 'elements/program-card'; @import 'elements/course-card'; +@import 'views/program-list'; +@import 'views/program-details'; diff --git a/lms/static/sass/elements/_banners.scss b/lms/static/sass/elements/_banners.scss new file mode 100644 index 0000000000..96242240d0 --- /dev/null +++ b/lms/static/sass/elements/_banners.scss @@ -0,0 +1,46 @@ +$full-width-banner-img-height: 260px !default; +$full-width-banner-img-width: 1140px !default; +$full-width-banner-margin: 20px; + +.full-width-banner { + position: relative; + + .banner-background-wrapper { + height: $full-width-banner-img-height; + width: 100%; + overflow: hidden; + position: relative; + background: palette(grayscale, black-t); + + &:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: palette(grayscale, black-t); + opacity: 0.65; + + @include susy-media($bp-screen-md) { + opacity: 0.4; + } + } + } + + .banner-background-image { + height: $full-width-banner-img-height; + + @include susy-media($full-width-banner-img-width) { + height: auto; + width: 100%; + } + } + + .banner-content { + position: absolute; + top: 0; + left: $full-width-banner-margin; + right: $full-width-banner-margin; + } +} diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index 3fbbc401bb..5ad0b244bb 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/lms/static/sass/views/_program-details.scss @@ -1,3 +1,77 @@ -.org-logo { - width: 120px; +.program-details { + .content-wrapper { + max-width: 100%; + padding-top: 0; + } +} + +.program-header { + .banner-content { + padding-top: 100px; + } + + .title { + margin: 0; + } + + .title, + .subtitle { + color: palette(grayscale, white-t); + font-weight: font-weight(semi-bold); + } + + .org-wrapper { + position: absolute; + top: 0; + background: palette(grayscale, white-t); + opacity: 0.7; + left: 0; + } + + .org-logo { + height: 80px; + } + + .breadcrumb-wrapper { + padding: $full-width-banner-margin; + + @include susy-media(1200px) { + padding-left: 0; + } + } + + .breadcrumb-list { + list-style-type: none; + margin: 0; + } + + .crumb { + position: relative; + float: left; + font-size: font-size(x-small); + line-height: line-height(x-small); + color: palette(grayscale, dark); + + &.active { + color: palette(grayscale, x-dark); + } + } + + .crumb-link { + font-size: inherit; + line-height: inherit; + color: palette(primary, base); + + &:hover, + &:focus { + color: palette(grayscale, black); + text-decoration: underline; + } + } + + .crumb-separator { + font-size: font-size(xx-small); + line-height: line-height(xx-small); + padding: 0 $full-width-banner-margin/4; + } } diff --git a/lms/templates/learner_dashboard/program_details.html b/lms/templates/learner_dashboard/program_details.html index d571111835..b290783a9b 100644 --- a/lms/templates/learner_dashboard/program_details.html +++ b/lms/templates/learner_dashboard/program_details.html @@ -21,7 +21,8 @@ ProgramDetailsFactory({ <%block name="pagetitle">${_("Program Details")} +<%block name="bodyclass">program-details
-
+
diff --git a/lms/templates/learner_dashboard/program_details_view.underscore b/lms/templates/learner_dashboard/program_details_view.underscore index 22c422b5c1..b38a3fea75 100644 --- a/lms/templates/learner_dashboard/program_details_view.underscore +++ b/lms/templates/learner_dashboard/program_details_view.underscore @@ -1,4 +1,6 @@ -
-
-
- +
+
+
+
+ +
diff --git a/lms/templates/learner_dashboard/program_header_view.underscore b/lms/templates/learner_dashboard/program_header_view.underscore index 03a8e6d9eb..932989609f 100644 --- a/lms/templates/learner_dashboard/program_header_view.underscore +++ b/lms/templates/learner_dashboard/program_header_view.underscore @@ -1,24 +1,39 @@ - - - - - -

<%- programData.name %>

-

<%- programData.subtitle %>

-<%- gettext('Programs') %> -<%- StringUtils.interpolate( - gettext('{category} program'), - {category: programData.category} -) %> -<% _.each(programData.organizations, function(org) { %> - -<% }) %> -<% if (programData.category === 'xseries') { %> -

<%- StringUtils.interpolate( - gettext('To complete the {program} XSeries and earn an XSeries Certificate you must successfully earn a Verified Certificate in all courses shown below.'), - {program: programData.name} - ) %>

-<% } %> + + +