Skip to content

E
edx-platform
Commit 194d33ea by AlasdairSwan
Options

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

ECOM-4216 Styling the header
parents 98a392c3 a7cd4dae
Showing with 176 additions and 36 deletions
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 0 → 100644
$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'] %>)">
<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 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 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-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}
) %>">
<% }) %>
</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>
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