Merge pull request #12600 from edx/alasdair/ECOM-4216-style-the-program-details-header
ECOM-4216 Styling the header
This commit is contained in:
AlasdairSwan
@@ -12,8 +12,7 @@
|
||||
breakpoints: {
|
||||
min: {
|
||||
'medium': '768px',
|
||||
'large': '1180px',
|
||||
'x-large': '1440px'
|
||||
'large': '1180px'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
46
lms/static/sass/elements/_banners.scss
Normal file
46
lms/static/sass/elements/_banners.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<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>
|
||||
|
||||
@@ -1,24 +1,39 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user