Skip to content
Snippets Groups Projects
Unverified Commit f1694661 authored by Matt Tuchfarber's avatar Matt Tuchfarber Committed by GitHub
Browse files

Merge pull request #16683 from edx/tuchfarber/add_intructor_bio_program_marketing 

Add intructor bio program marketing
parents 72903b80 a20e797f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/js/program_marketing.js
+ 15
− 0
View file @ f1694661
......@@ -4,3 +4,18 @@ function playVideo(src) {
document.querySelector('#program_video iframe').style = 'display:block;';
document.querySelector('#program_video iframe').src = src;
}
$(".instructor-image, .instructor-label").leanModal({closeButton: ".modal_close", top: '10%'});
// Create MutationObserver which prevents the body of
// the page from scrolling when a modal window is displayed
var observer = new MutationObserver(function(mutations, obv){
mutations.forEach(function(mutation) {
if ($(mutation.target).css('display') === 'block') {
$('body').css('overflow','hidden');
} else {
$('body').css('overflow', 'auto');
}
});
});
$('.modal').each(function(index, element){
observer.observe(element, {attributes: true, attributeFilter:['style']});
});
\ No newline at end of file
lms/static/sass/views/_program-marketing-page.scss
+ 60
− 6
View file @ f1694661
.content-wrapper {
margin-left: auto;
margin-right: auto;
}
#program-details-hero {
.program_title {
font-weight: bold;
......@@ -22,6 +27,7 @@
.btn {
font-size: 20px;
font-weight: $font-weight-bold;
.original-price {
text-decoration: line-through;
font-weight: $font-weight-normal;
......@@ -172,25 +178,33 @@
#instructors {
.instructor {
margin: $baseline 0;
* {
text-align: center;
margin: auto;
}
display: flex;
flex-direction: column;
align-items: center;
img {
display: block;
height: 100px;
width: 100px;
border-radius: 100px;
margin: auto;
}
.instructor-name {
font-weight: bold;
}
.instructor-position {
.instructor-org {
font-weight: bold;
}
.instructor-bio-toggle {
margin-top: 5px;
}
.hidden {
display: none;
}
}
}
......@@ -202,4 +216,44 @@
margin-top: $baseline;
}
}
a:focus,
a:active {
text-decoration: none;
outline: 0;
}
.modal-custom {
max-width: 500px;
max-height: 80%;
width: 90%;
top: 10%;
bottom: unset;
right: 0 !important;
left: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
background-color: #fff;
overflow: auto;
.modal-header {
padding-top: 0;
justify-content: center;
text-align: center;
}
.instructor-bio {
padding: 10px 0;
}
.btn-close.modal_close {
text-align: right;
i {
font-size: 28px;
cursor: pointer;
padding: 5px;
}
}
}
}
lms/templates/courseware/program_marketing.html
+ 61
− 25
View file @ f1694661
......@@ -50,6 +50,7 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
%>
<%block name="js_extra">
<script src="${static.url('js/leanModal.js')}"></script>
<script src="${static.url('js/program_marketing.js')}"></script>
</%block>
......@@ -130,31 +131,33 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
</div>
</div>
</div>
<div class="row quick-nav">
<div class="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">${_('Frequently Asked Questions')}</a>
</li>
% endif
</ul>
<div class="row">
<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">${_('Frequently Asked Questions')}</a>
</li>
% endif
</ul>
</div>
</div>
</div>
</div>
</%block>
<div id="program-details-page" class="container">
<div id="program-details-page" class="container">
<div class="row program-info">
<div class="col col-12 col-lg-7">
<div class="section">
......@@ -341,14 +344,47 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
<h2>${_('Instructors')}</h2>
</div>
% for instructor in instructors:
<div class="col-6 col-sm-3 instructor">
<div>
<%
instructor_hash = hash(instructor['name'])
%>
<div class="col-12 col-sm-6 col-md-4 instructor">
<a href="#instructor-details-${instructor_hash}" class="instructor-label">
<img alt="" src="${instructor['image']}"/>
</a>
<a href="#instructor-details-${instructor_hash}" class="instructor-label">
<div class="instructor-name">${instructor['name']}</div>
</a>
% if instructor.get('title'):
<div class="instructor-position">${instructor['title']}</div>
% endif
% if instructor.get('organization'):
<div class="instructor-org">${instructor['organization']}</div>
% endif
% if instructor.get('bio'):
<div class="instructor-modal">
<div class="col col-12 sm-col-12 md-col-6 lg-col-6 xl-col-6">
<div class="modal modal-custom" id="instructor-details-${instructor_hash}">
<div class="btn-close modal_close"><i class="fa fa-close"></i></div>
<div class="modal-body">
<div class="modal-header">
<div>
<img alt="" src="${instructor['image']}"/>
<div class="instructor-name">${instructor['name']}</div>
<div>
% if instructor.get('title'):
<span>${instructor['title']}</span>,
% endif
% if instructor.get('organization'):
<span>${instructor['organization']}</span>
% endif
</div>
</div>
</div>
<div class="instructor-bio">${HTML(instructor['bio'])}</div>
</div>
</div>
</div>
</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
......
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