Commit 28e1e2bb by Matt Tuchfarber

Make page more dynamic and less 500-prone. Also fix image sizing. Makes

nav links dynamic based on content.
parent fd027db6
......@@ -4,19 +4,18 @@
margin-top: $baseline;
}
.logo {
height: 100px;
}
.main-banner {
color: $white;
margin-bottom: 1px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size:100% 100% !important;
background-repeat:no-repeat !important;
.authoring-org-logo {
background-color: $white;
height: 100px;
}
.logo-space{
height: 50px;
}
.btn {
......@@ -81,7 +80,7 @@
.thick_rule {
height: 4px;
border: 0;
background-color: theme-color('secondary');
background-color: theme-color('primary');
}
.program-info {
......
......@@ -19,9 +19,8 @@ from openedx.core.djangolib.markup import HTML, Text
<%
faqs = program['faq']
program_type = program['type']
program_type = program['type'] if program['type'] else 'Program'
title = program['title']
status = program['status']
courses = program['courses']
subtitle = program['subtitle']
overview = program['overview']
......@@ -30,19 +29,24 @@ job_outlook_items = program['job_outlook_items']
weeks_to_complete = program['weeks_to_complete']
full_program_price_format = '{0:.0f}' if program['full_program_price'].is_integer() else '{0:.2f}'
full_program_price = full_program_price_format.format(program['full_program_price'])
expected_learning_items = program['expected_learning_items']
min_hours_effort_per_week = program['min_hours_effort_per_week']
max_hours_effort_per_week = program['max_hours_effort_per_week']
## Start Endorsement
corporate_endorsement = program['corporate_endorsements'][0] if program['corporate_endorsements'] else {}
corporate_endorsement_name = corporate_endorsement.get('corporation_name')
corporate_endorsement_image = corporate_endorsement.get('image',{}).get('src','')
endorsement = corporate_endorsement['individual_endorsements'][0]
corporate_endorsement_image = corporate_endorsement['image']['src'] if corporate_endorsement.get('image') else ''
endorsements = corporate_endorsement.get('individual_endorsements')
endorsement = endorsements[0] if endorsements else {}
endorsement_quote = endorsement.get('quote')
endorser = endorsement.get('endorser')
endorser_name = endorser.get('given_name') + ' ' + endorser.get('family_name')
endorser_position = endorser.get('position') or {}
endorser_title = endorser_position.get('title')
endorser = endorsement.get('endorser', {})
endorser_given_name = endorser.get('given_name') if endorser.get('given_name') else ''
endorser_family_name = endorser.get('family_name') if endorser.get('family_name') else ''
endorser_name = (endorser_given_name + ' ' + endorser_family_name).strip()
endorser_position = endorser.get('position') if endorser.get('position') else {}
endorser_title = endorser_position.get('title', '')
endorser_org = endorser_position.get('organization_name') or corporate_endorsement_name
expected_learning_items = program['expected_learning_items']
min_hours_effort_per_week = program['min_hours_effort_per_week']
max_hours_effort_per_week = program['max_hours_effort_per_week']
%>
<%block name="js_extra">
......@@ -55,16 +59,22 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
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 ''
faqs = program['faq']
courses = program['courses']
instructors = program['instructors']
%>
<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="main-banner"
style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image});">
<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']}"/>
<img class="authoring-org-logo" alt="${authoring_organizations[0]['name']}" src="${authoring_organizations[0]['logo_image_url']}"/>
</div>
% else:
<div class="logo-space"></div>
% endif
<div>
<h1 class="program_title">${program['title']}</h1>
......@@ -100,15 +110,21 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
<div class="row quick-nav">
<div class="container">
<ul class="nav nav-fill col-lg-12">
% if courses:
<li class="nav-item">
<a class="nav-link" href="#courses">${_('View Courses')}</a>
</li>
% endif
% if instructors:
<li class="nav-item">
<a class="nav-link" href="#instructors">${_('Meet the Instructors')}</a>
</li>
% endif
% if faqs:
<li class="nav-item">
<a class="nav-link" href="#faqs">${_('Frequenty Asked Questions')}</a>
</li>
% endif
</ul>
</div>
</div>
......@@ -137,7 +153,9 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
% if endorsement:
<h3 class="section_title">${_('Real Career Impact')}</h3>
<p>
<img class="logo" alt="${corporate_endorsement_name}" src="${corporate_endorsement_image}"/>
% if corporate_endorsement_image:
<img class="logo" alt="${corporate_endorsement_name}" src="${corporate_endorsement_image}"/>
% endif
<blockquote class="blockquote">
<p class="quote">"${endorsement_quote}"</p>
<footer class="blockquote-footer">
......@@ -237,6 +255,7 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
</div>
</div>
</div>
% if courses:
<hr class="thick_rule">
<div id="courses">
<div class="row">
......@@ -289,26 +308,29 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
</div>
% endfor
</div>
<hr class="thick_rule">
<div id="instructors" class="row">
<div class="col-12">
<h2>${_('Instructors')}</h2>
</div>
% for instructor in instructors:
<div class="col-6 col-sm-3 instructor">
<div>
<img alt="" src="${instructor['image']}"/>
</div>
<div class="instructor-name">${instructor['name']}</div>
% if instructor.get('position'):
<div class="instructor-position">${instructor['position'].get('position')}</div>
<div class="instructor-org">${instructor['position'].get('organization_name')}</div>
% endif
% endif
% if instructors:
<hr class="thick_rule">
<div id="instructors" class="row">
<div class="col-12">
<h2>${_('Instructors')}</h2>
</div>
% endfor
</div>
<hr class="thick_rule">
% for instructor in instructors:
<div class="col-6 col-sm-3 instructor">
<div>
<img alt="" src="${instructor['image']}"/>
</div>
<div class="instructor-name">${instructor['name']}</div>
% if instructor.get('position'):
<div class="instructor-position">${instructor['position'].get('position')}</div>
<div class="instructor-org">${instructor['position'].get('organization_name')}</div>
% endif
</div>
% endfor
</div>
% endif
% if faqs:
<hr class="thick_rule">
<div id="faqs" class="row faqs">
<div class="col-12">
<h2>${_('Frequently Asked Questions')}</h2>
......
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