Skip to content

E
edx-platform
Unverified Commit e88d916c by Matt Tuchfarber Committed by GitHub
Options

Merge pull request #16360 from edx/tuchfarber/marketing_hero 

Add hero to main.html and use it in program page
parents 8afa17f3 a93832aa
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