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