Merge pull request #12600 from edx/alasdair/ECOM-4216-style-the-program-details-header

ECOM-4216 Styling the header

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'
                     }
                 },
 

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);
             });
         });
     }

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';

lms/static/sass/elements/_banners.scss

+$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;
+    }
+}

lms/static/sass/views/_program-details.scss

-.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;
+    }
 }

lms/templates/learner_dashboard/program_details.html

@@ -21,7 +21,8 @@ ProgramDetailsFactory({
 </%block>
 
 <%block name="pagetitle">${_("Program Details")}</%block>
+<%block name="bodyclass">program-details</%block>
 
 <main id="main" aria-label="Content" tabindex="-1">
-    <div class="js-program-details-wrapper grid-container"></div>
+    <div class="js-program-details-wrapper"></div>
 </main>

lms/templates/learner_dashboard/program_details_view.underscore

-<header class="js-program-header program-header"></header>
-<div class="js-program-progress-view"></div>
-<div class="js-course-list"></div>
-<aside class="js-course-sidebar"></aside>
+<header class="js-program-header program-header full-width-banner"></header>
+<div class="program-details-content grid-container">
+	<div class="js-program-progress-view"></div>
+	<div class="js-course-list"></div>
+	<aside class="js-course-sidebar"></aside>
+</div>

lms/templates/learner_dashboard/program_header_view.underscore

-<picture>
-    <source srcset="<%- programData.banner_image_urls.w1440h480 %>" media="(min-width: <%- breakpoints.min['x-large'] %>)">
+<div class="banner-background-wrapper">
+    <picture>
+        <source srcset="<%- programData.banner_image_urls.w1440h480 %>" media="(min-width: <%- breakpoints.min.large %>)">
         <source srcset="<%- programData.banner_image_urls.w726h242 %>" media="(min-width: <%- breakpoints.min.medium %>)">
-    <img class="banner-image" srcset="<%- programData.banner_image_urls.w348h116 %>" alt="">
-</picture>
-<h2 class="hd-2 title"><%- programData.name %></h2>
-<p class="subtitle"><%- programData.subtitle %></p>
-<a href="<%- programListingUrl %>" class="breadcrumb"><%- gettext('Programs') %></a>
-<span><%- StringUtils.interpolate(
-    gettext('{category} program'),
-    {category: programData.category}
-) %></span>
-<% _.each(programData.organizations, function(org) { %>
+        <img class="banner-background-image" srcset="<%- programData.banner_image_urls.w348h116 %>" alt="">
+    </picture>
+    
+    <div class="banner-content grid-container">
+        <h2 class="hd-1 title"><%- programData.name %></h2>
+        <p class="hd-4 subtitle"><%- programData.subtitle %></p>
+        <% if (programData.organizations.length) { %>
+            <div class="org-wrapper">
+              <% _.each(programData.organizations, function(org) { %>
                 <img src="<%- org.img %>" class="org-logo" alt="<%- StringUtils.interpolate(
                     gettext('{organization}\'s logo'),
                     {organization: org.display_name}
                 ) %>">
-<% }) %>
-<% if (programData.category === 'xseries') { %>
-	<p><%- 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}
-    ) %></p>
-<% } %>
+              <% }) %>
+            </div>
+        <% } %>
+    </div>
+</div>
+
+<nav class="breadcrumb-wrapper grid-container" aria-label="breadcrumb" role="navigation">
+    <h3 class="sr-only"><%- gettext('You are here') %></h2>
+    <ol class="breadcrumb-list">
+        <li class="crumb">
+            <a href="/" class="crumb-link"><%- gettext('Dashboard') %></a>
+            <span class="crumb-separator fa fa-chevron-right" aria-hidden="true"></span>
+        </li>
+        <li class="crumb">
+            <a href="<%- programListingUrl %>" class="crumb-link"><%- gettext('Programs') %></a>
+            <span class="crumb-separator fa fa-chevron-right" aria-hidden="true"></span>
+        </li>
+        <li class="crumb active">
+            <%- programData.name %>
+        </li>
+    </ol>
+</nav>