Skip to content

E
edx-platform
Commit a93832aa by Matt Tuchfarber
Options

Add hero to main.html and use for program page 

Adding hero to main.html allows for full width marketing images to be
used. This commit includes the addition of the hero block into
main.html along with the program marketing page's use of that new
hero block.
parent 59490244
Showing with 87 additions and 66 deletions
lms/static/sass/views/_program-marketing-page.scss
#program-details-page {
font-size: 16px;
#program-details-hero {
.program_title {
font-weight: bold;
margin-top: $baseline
margin-top: $baseline;
}
.logo {
height: 100px;
}
.section_title {
margin-bottom: $baseline;
color: theme-color("dark");
}
.thick_rule {
height: 4px;
border: 0;
background-color: theme-color('secondary');
}
.main-banner {
color: white;
color: $white;
margin-bottom: 1px;
background-size: cover;
background-repeat: no-repeat;
......@@ -50,7 +37,7 @@
button {
background-color: transparent;
color: $white
color: $white;
}
iframe {
......@@ -70,13 +57,32 @@
.quick-nav {
background-color: theme-color('light');
margin-bottom: $baseline/2;
.nav-item {
font-size: 18px;
color: $white;
}
}
}
#program-details-page {
margin-top: $baseline;
font-size: $font-size-base;
.logo {
height: 100px;
}
.section_title {
margin-bottom: $baseline;
color: theme-color("dark");
}
.thick_rule {
height: 4px;
border: 0;
background-color: theme-color('secondary');
}
.program-info {
.quote {
......
lms/templates/courseware/program_marketing.html
......@@ -41,11 +41,8 @@ endorser_position = endorser.get('position') or {}
endorser_title = endorser_position.get('title')
endorser_org = endorser_position.get('organization_name') or corporate_endorsement_name
expected_learning_items = program['expected_learning_items']
authoring_organizations = program['authoring_organizations']
min_hours_effort_per_week = program['min_hours_effort_per_week']
max_hours_effort_per_week = program['max_hours_effort_per_week']
video_url = program['video'].get('src') if program['video'] else ''
banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
%>
<%block name="js_extra">
......@@ -53,56 +50,72 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
</%block>
<%block name="pagetitle">${program['title']}</%block>
<div id="program-details-page" class="container">
<div class="row main-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image});">
<div class="col col-12 col-md-8">
% if authoring_organizations and authoring_organizations[0]['logo_image_url']:
<div>
<img class="authoring-org-logo logo" alt="${authoring_organizations[0]['name']}" src="${authoring_organizations[0]['logo_image_url']}"/>
</div>
% endif
<div>
<h1 class="program_title">${program['title']}</h1>
</div>
<div>
<h2>${program['subtitle']}</h2>
</div>
<div>
% if program.get('is_learner_eligible_for_one_click_purchase'):
<a href="${buy_button_href}" class="btn btn-success">
${_('Purchase the Program')}
</a>
% else:
<a href="#courses" class="btn btn-success">
${_('Start Learning')}
</a>
% endif
<%block name="marketing_hero">
<%
banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
authoring_organizations = program['authoring_organizations']
video_url = program['video'].get('src') if program['video'] else ''
%>
<div id="program-details-hero">
<div class="main-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image}); background-size:100%;">
<div class="container" >
<div class="row">
<div class="col col-12 col-md-8">
% if authoring_organizations and authoring_organizations[0]['logo_image_url']:
<div>
<img class="authoring-org-logo logo" alt="${authoring_organizations[0]['name']}" src="${authoring_organizations[0]['logo_image_url']}"/>
</div>
% endif
<div>
<h1 class="program_title">${program['title']}</h1>
</div>
<div>
<h2>${program['subtitle']}</h2>
</div>
<div>
% if program.get('is_learner_eligible_for_one_click_purchase'):
<a href="${buy_button_href}" class="btn btn-success">
${_('Purchase the Program')}
</a>
% else:
<a href="#courses" class="btn btn-success">
${_('Start Learning')}
</a>
% endif
</div>
</div>
<div class="col col-12 col-md-4">
% if video_url:
<div id="program_video">
<button type="button" class="btn" aria-label="${_('Play')}" onclick="playVideo('${video_url}')">
<span class="icon fa fa-4x fa-play-circle" aria-hidden="true"></span>
</button>
<iframe class="align-middle" title="${_('YouTube Video')}" src="" frameborder="0" allowfullscreen style="display:none;"></iframe>
</div>
% endif
</div>
</div>
</div>
</div>
<div class="col col-12 col-md-4">
% if video_url:
<div id="program_video">
<button type="button" class="btn" aria-label="${_('Play')}" onclick="playVideo('${video_url}')">
<span class="icon fa fa-4x fa-play-circle" aria-hidden="true"></span>
</button>
<iframe class="align-middle" title="${_('YouTube Video')}" src="" frameborder="0" allowfullscreen style="display:none;"></iframe>
<div class="row quick-nav">
<div class="container">
<ul class="nav nav-fill col-lg-12">
<li class="nav-item">
<a class="nav-link" href="#courses">${_('View Courses')}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#instructors">${_('Meet the Instructors')}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faqs">${_('Frequenty Asked Questions')}</a>
</li>
</ul>
</div>
% endif
</div>
</div>
<div class="row quick-nav">
<ul class="nav nav-fill col-lg-12">
<li class="nav-item">
<a class="nav-link" href="#courses">${_('View Courses')}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#instructors">${_('Meet the Instructors')}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faqs">${_('Frequenty Asked Questions')}</a>
</li>
</ul>
</div>
</%block>
<div id="program-details-page" class="container">
<div class="row program-info">
<div class="col col-12 col-lg-7">
<div class="section">
......
lms/templates/main.html
......@@ -156,6 +156,8 @@ from pipeline_mako import render_require_js_path_overrides
% endif
<%include file="/page_banner.html" />
<div class="marketing-hero"><%block name="marketing_hero"></%block></div>
<div class="content-wrapper ${"container-fluid" if uses_bootstrap else "" } main-container" id="content">
${self.body()}
......
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