Skip to content

E
edx-platform
Commit 946421c4 by Matt Tuchfarber
Options

Rebuild program marketing page in Bootstrap and make it look similar 

to the Micromasters page
parent 12e1af27
Showing with 310 additions and 2371 deletions
lms/djangoapps/courseware/views/views.py
......@@ -864,6 +864,8 @@ def program_marketing(request, program_uuid):
if program.get('is_learner_eligible_for_one_click_purchase') and skus:
context['buy_button_href'] = ecommerce_service.get_checkout_page_url(*skus)
context['uses_bootstrap'] = True
return render_to_response('courseware/program_marketing.html', context)
......
lms/static/js/program_marketing.js
function initializeCourseSlider() {
function playVideo(src) {
'use strict';
var isMobileResolution = $(window).width() <= 767,
sliderExists = $('.course-slider-xs').hasClass('slick-slider');
$('.course-card').toggleClass('slidable', isMobileResolution);
if (isMobileResolution) { // Second condition will avoid the multiple calls from resize
$('.copy-meta-mobile').show();
$('.copy-meta').hide();
if (!sliderExists) {
$('.course-slider-xs').slick({
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
});
}
} else {
$('.copy-meta').show();
$('.copy-meta-mobile').hide();
if (sliderExists) {
$('.course-slider-xs').slick('unslick');
$('.course-slider-xs').html();
$('.slick-arrow, .pageInfo').hide();
}
}
document.querySelector('#program_video button').style = 'display:none;';
document.querySelector('#program_video iframe').style = 'display:block;';
document.querySelector('#program_video iframe').src = src;
}
function paginate(page, size, total) {
'use strict';
var start = size * page,
end = (start + size - 1) >= total ? total - 1 : (start + size - 1);
$('.profile-item-desktop').each(function(index, item) {
if (index >= start && index <= end) {
$(item).css('display', 'block');
} else {
$(item).css('display', 'none');
}
});
$('.pagination-start').text(start + 1);
$('.pagination-end').text(end + 1);
}
$.fn.getFocusableChildren = function() {
'use strict';
return $(this)
/* eslint max-len: 0 */
.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object:not([disabled]), embed, *[tabindex], *[contenteditable]')
.filter(':visible');
};
$(document).ready(function() {
'use strict';
// Create MutationObserver which prevents the body of
// the page from scrolling when a modal window is displayed
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if ($(mutation.target).css('display') === 'block') {
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'auto');
}
});
});
// Custom function showing current slide
var $status = $('.pagingInfo');
var $slickElement = $('.course-slider-xs');
// Instructor pagination
var page = 0,
size = 4,
total = parseInt($('.instructor-size').text(), 10),
maxPages = Math.ceil(total / size) - 1;
paginate(page, size, total);
initializeCourseSlider();
// In order to restrict focus, we added two pseudo <a> elements, one before the instructor modal and one after.
// When reaching the first <a>, we focus the last element in the dialog.
// If there is no focusable element, we focus the close button.
// When focusing the last <a>, we focus the first control in the dialog.
$('.focusKeeper:even').on('focus', function(event) {
event.preventDefault();
if ($(this).parent().find('.modal-body')
.getFocusableChildren().length) {
$(this).parent().find('.modal-body')
.getFocusableChildren()
.filter(':last')
.focus();
} else {
$(this).parent().find('.modal_close a')
.focus();
}
});
$('.focusKeeper:odd').on('focus', function(event) {
event.preventDefault();
$(this).parent().find('.modal_close a')
.focus();
});
$(window).resize(function() {
initializeCourseSlider();
});
// Initialize instructor bio modals
$('.instructor-image, .instructor-label').leanModal({closeButton: '.modal_close', top: '10%'});
$('.modal').each(function(index, element) {
observer.observe(element, {attributes: true, attributeFilter: ['style']});
});
$slickElement.on('init reInit afterChange', function(event, slick, currentSlide) {
// currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = currentSlide || 1;
$status.text(i + ' of ' + slick.slideCount);
});
// Initialize FAQ
$('ul.faq-links-list li.item').click(function() {
if ($(this).find('.answer').hasClass('hidden')) {
$(this).find('.answer').removeClass('hidden');
$(this).addClass('expanded');
} else {
$(this).find('.answer').addClass('hidden');
$(this).removeClass('expanded');
}
});
if (page < maxPages) {
$('#pagination-next').addClass('active');
$('#pagination-next > span.sr').attr('aria-hidden', 'false');
}
$('#pagination-next').click(function() {
if (page === maxPages) {
return false;
}
if (page + 1 === maxPages) {
$(this).removeClass('active');
$(this).children('span.sr').attr('aria-hidden', 'true');
}
page = page + 1;
paginate(page, size, total);
$('#pagination-previous').addClass('active');
$('#pagination-previous > span.sr').attr('aria-hidden', 'false');
return false;
});
$('#pagination-previous').click(function() {
if (page === 0) {
return false;
}
if (page - 1 === 0) {
$(this).removeClass('active');
$(this).children('span.sr').attr('aria-hidden', 'true');
}
page = page - 1;
paginate(page, size, total);
$('#pagination-next').addClass('active');
$('#pagination-next > span.sr').attr('aria-hidden', 'false');
return false;
});
$('#accordion-group').accordion({
header: '> .accordion-item > .accordion-head',
collapsible: true,
active: false,
heightStyle: 'content'
});
});
lms/static/sass/_build-lms-v2.scss
......@@ -36,6 +36,3 @@
@import 'features/course-search';
@import 'features/course-sock';
@import 'features/course-upgrade-message';
// Views
@import "views/program-marketing-page";
lms/static/sass/bootstrap/lms-main.scss
......@@ -27,3 +27,6 @@
@import 'features/course-search';
@import 'features/course-sock';
@import 'features/course-upgrade-message';
// Individual Pages
@import "views/program-marketing-page";
lms/static/sass/views/_program-marketing-page.scss
/* Box shadow mixin */
// example: @include box-shadow(2px, 3px, 6px, rgba(0, 0, 0, 0.3));
@mixin box-shadow($x, $y, $blur, $color, $inset: false) {
@if $inset {
-webkit-box-shadow: inset $x $y $blur $color;
-moz-box-shadow: inset $x $y $blur $color;
box-shadow: inset $x $y $blur $color;
}
@else {
-webkit-box-shadow: $x $y $blur $color;
-moz-box-shadow: $x $y $blur $color;
box-shadow: $x $y $blur $color;
}
}
#program-details-page {
.main-banner {
height: 260px;
background: palette(primary, dark);
margin-bottom: 20px;
position: relative;
@media (max-width: 767px){
padding: 0 12px 25px;
height: auto;
}
@media (min-width: 768px) {
height: 333px;
margin-bottom: 20px;
}
@media (min-width: 1024px) {
margin-bottom: 50px
}
.btn-play {
background-image: none;
background-color: transparent;
box-shadow: none;
padding: 0;
margin-left: -moz-calc((100% - 74px) / 2);
margin-left: -webkit-calc((100% - 74px) / 2);
margin-left: calc((100% - 74px) / 2);
margin-top: 125px;
margin-bottom: 94px;
height: 74px;
width: 74px;
color: #fff;
background: none;
border: 4px solid #fff;
border-radius: 50%;
.icon {
padding-left: 8px;
}
&:hover {
opacity: 0.7;
outline: none;
}
}
.org-logo {
display: inline-block;
position: relative;
overflow: hidden;
margin-bottom: 8px;
background: rgba(255, 255, 255, 0.8);
@include box-shadow(0, 3px, 4px, rgba(0, 0, 0, 0.5));
@media (max-width: 767px) {
margin-bottom: 12px;
max-width: 120px;
box-shadow: none;
}
@media (min-width: 768px) {
max-width: 150px;
position: absolute;
top: 0;
}
@media (min-width: 1024px) {
max-width: 200px;
}
img {
max-width: 100%;
max-height: 95px;
}
&::after {
content: "";
position: absolute;
top: 0;
left: -2px;
right: -2px;
box-shadow: 0 1px 3px #333;
height: 1px;
background: #a1a5a5;
z-index: 1;
}
}
.banner-title,
.banner-description {
color: $white;
}
.banner-title {
font-size: 1.5em;
font-weight: 600;
text-align: left;
letter-spacing: inherit;
margin-bottom: 10px;
@media (min-width: 768px) {
margin-top: 105px;
font-size: 1.9em;
}
@media (min-width: 1024px) {
font-size: 2em;
}
@media (min-width: 1280px) {
font-size: 2.25em;
}
}
.banner-description {
min-height: 60px;
font-size: 1.06em;
font-weight: 600;
line-height: 1.35em;
@media (max-width: 767px) {
margin-bottom: 14px;
font-weight: normal;
}
@media (min-width: 768px) {
font-size: 1.1em;
}
@media (min-width: 1024px) {
font-size: 1.25em;
}
}
.grid-manual, .row{
@media (max-width: 767px){
display: block;
}
}
.grid-manual{
.btn-start{
min-width: 300px;
padding: 0.75rem 2rem;
font-size: 1.25rem;
text-decoration: none;
text-align: center;
font-weight: 600;
border-radius: 0;
background: #008100;
background: -moz-linear-gradient(top, #008100 0%, #0a570a 100%);
background: -webkit-linear-gradient(top, #008100 0%,#0a570a 100%);
background: linear-gradient(to bottom, #008100 0%,#0a570a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008100', endColorstr='#0a570a',GradientType=0);
border: 0;
&:hover {
background: -moz-linear-gradient(top, #006200 0%, #006200 100%);
background: -webkit-linear-gradient(top, #006200 0%,#006200 100%);
background: linear-gradient(to bottom, #006200 0%,#006200 100%);
}
}
}
}
.left-col,
.right-col {
@media (min-width: 768px) {
padding: 0 0 15px;
}
@media (min-width: 1024px) {
padding: 15px 0;
}
}
.left-col {
@media (min-width: 768px) {
border-right: 1px solid #979797;
padding-right: 20px;
}
@media (min-width: 1024px) {
padding-right: 50px;
}
}
.right-col {
@media (min-width: 768px) {
padding-left: 0;
}
@media (min-width: 1024px) {
padding-left: 30px;
}
}
.courses-in-program .course-card .tbl-view .tbl-col:first-child{
width: 70% !important;
@media (max-width: 768px) {
width: 95% !important;
}
}
.courses-in-program .course-card {
background: $white;
padding: 10px;
margin-bottom: 30px;
border: 1px solid palette(grayscale, back);
@include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 0.4));
border-radius: 4px;
@media (min-width: 768px) {
padding: 20px;
border: 1px solid #979797;
box-shadow: none;
border-radius: 0;
}
.title {
margin-bottom: 10px;
font-size: 18px;
text-decoration: underline;
a{
color: #005686;
}
small {
display: block;
font-size: 0;
margin-top: 5px;
> span {
display: inline-block;
text-decoration: none;
font-size: 1rem !important;
&:first-child {
border-right: 1px solid #4a4a4a;
padding-right: 6px;
margin-right: 6px;
@media (min-width: 768px) {
padding-right: 10px;
margin-right: 10px;
}
}
}
}
}
p {
margin-bottom: 0;
font-weight: normal;
font-size: 1rem;
}
&:last-child {
margin-bottom: 0;
}
}
.courses-in-program.container {
display: block;
padding: 20px 0;
background: #ececec;
margin-top: 15px;
@media (min-width: 768px) {
margin-top: 0;
background: $white;
padding: 20px;
}
.course-cards {
padding-top: 5px;
@media (min-width: 768px) {
width: 100% !important;
transform: none !important;
}
}
> .hd {
padding: 0 1.25rem !important;
margin-bottom: 15px;
@media (min-width: 768px) {
padding: 0;
font-size: 18px !important;
}
@media (min-width: 1024px) {
font-size: 22px !important;
}
}
.course-card {
margin-bottom: 20px;
min-height: 283px;
position: relative;
@media (max-width: 767px) {
min-height: 300px;
margin-left: 5px;
margin-right: 5px;
padding-bottom: 50px;
overflow: hidden;
position: relative;
}
.tbl-view {
.tbl-col {
.btn-enroll-now {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
border-radius: 0;
line-height: 22px;
background: #0f8012;
@media (min-width: 768px) {
position: relative;
border: 1px solid #ccc;
max-width: 200px;
}
}
&:first-child {
@media (min-width: 768px) {
width: 75%;
}
p {
@media (min-width: 768px) {
max-width: 700px;
}
}
}
}
}
.btn-enroll-now{
width: 100% !important;
max-width: 300px !important;
min-height: 50px;
font-size: 1.33rem;
font-weight: bold;
}
}
.pagingInfo {
display: block;
text-align: center;
@media (min-width: 768px) {
display: none;
}
}
}
.copy-meta-mobile{
font-size: 0.875rem;
line-height: 1.6em;
}
//Helper Classes
.pull-left{
float: left !important;
}
.pull-right{
float: right !important;
}
.block{
display: block;
}
a{
text-decoration: none;
&:hover {
opacity: 0.8;
text-decoration: none;
}
&:focus{
text-decoration: none;
}
}
.no-padding{
padding: 0 !important;
}
#success-message{
padding: 0;
.alert {
min-width: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 0;
box-shadow: none;
}
}
.window-wrap{
background-color: transparent;
}
.content-wrapper {
max-width: none;
padding-top: 0;
padding-bottom: 0;
.container {
border: none;
}
}
.grid-container {
padding: 0 1rem;
}
.show-user-menu{
display: block !important;
right: -16px !important;
}
.hidden-mobile{
display: none;
}
.visible-mobile{
display: block;
}
.btn-success{
background-color: palette(success, text) !important;
color: $white !important;
border-color: palette(success, text);
&:hover {
background-color: palette(success, accent) !important;
}
}
.btn-block{
width: 100% !important;
}
.bookmark-button:hover {
color: #0071bb !important;
border-color: transparent !important;
}
.inner-container {
@include grid-container();
@include span(12);
padding: 0 1.25rem;
}
h2{
font-size: 1.5rem;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 1.25rem 0;
text-transform: none;
}
h1, h2, h3, h4, h5, h6{
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.col-centered{
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
.input-group{
margin-bottom: 1.25rem;
}
.input-lg{
line-height: 55px !important;
height: 55px !important;
padding: 0 1.25rem !important;
}
.form-block{
label, input, select, button, textarea{
display: block;
width: 100%;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-style: normal;
margin-bottom: 0.5rem !important;
&.has-error {
border-color: palette(error, text);
border-radius: 4px 4px 0 0;
margin-bottom: 0 !important;
+ .field-message{
border-radius: 0 0 4px 4px;
width: 100%;
}
}
}
input{
box-shadow: none;
border: 1px solid palette(grayscale, back);
border-radius: 4px;
font-size: 1rem;
width: 100%;
&:focus, &:active{
box-shadow: none;
border-color: palette(grayscale, base);
}
}
select{
-webkit-appearance: none;
-moz-appearance: none;
border-color: palette(grayscale, back);
appearance: none;
&::-ms-expand{
display: none;
}
}
textarea{
height: 280px;
border-color: palette(grayscale, back);
box-shadow: none;
resize: none;
padding: 1rem;
}
button{
margin-top: 2.5rem;
padding: 1.25rem;
}
}
.list-bulleted{
li{
margin-bottom: 0.2rem !important;
padding-left: 0.5rem !important;
line-height: 1.5rem;
color: palette(grayscale, base);
.brand-link{
display: inline;
}
}
}
.btn-enroll-mobile{
margin-bottom: 2rem;
.btn-enroll{
max-width: 95%;
margin: auto;
border-radius: 3px;
}
}
#course-trailer {
.trailer-link {
color: $white;
font-weight: bold;
span {
text-decoration: underline;
}
&:hover {
cursor: pointer;
}
}
}
#accordion-group {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
.accordion-item {
border-bottom: 1px solid palette(primary, dark);
.accordion-head {
background: #004165;
padding: 18px 18px 18px 84px;
color: $white;
border-radius: 0;
border: none;
margin: 0;
font-size: 1.13em;
position: relative;
&:hover,
&.active,
&:focus{
cursor: pointer;
}
&::before {
content: "\f054";
font-family: FontAwesome;
position: absolute;
left: 44px;
top: 20px;
width: 18px;
height: 22px;
}
&.ui-state-active {
&::before {
content: "\f078";
left: 40px;
}
}
}
.accordion-content {
display: none;
padding: 15px;
background: #f6f6f6;
border: none;
p,
ul {
color: $dark-gray1 !important;
font-size: 1em !important;
line-height: 1.5em;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
p {
&:last-child {
margin: 0;
}
}
ul {
li {
padding-left: 0 !important;
+ div {
color: $dark-gray1;
}
}
}
}
&.show {
.accordion-content {
display: block;
}
}
&:nth-of-type(2) .accordion-head {
background: #004a74;
}
&:nth-of-type(3) .accordion-head {
background: #00527f;
}
&:nth-of-type(4) .accordion-head {
background: #005d91;
}
&:nth-of-type(5) .accordion-head {
background: #016fad;
}
&:nth-of-type(6) .accordion-head {
background: #1878ad;
}
&.instructors-mobile-list {
@extend .visible-sm;
.accordion-content {
background: $white;
padding: 0;
.instructor-profiles {
margin: 0;
.profile-item {
padding: 15px 25px;
margin: 0;
.details {
padding-left: 10px;
.name {
font-size: 0.8em;
}
.dept {
font-size: .7em;
}
}
&:nth-child(even) {
background: #f0f0f0;
}
}
}
}
}
}
}
// Program marketing page
.main-banner {
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
opacity: 0.35;
}
.grid-manual {
z-index: 1;
position: relative;
.btn-start {
color: #fff !important;
text-transform: none;
}
}
}
#courses {
.btn-enroll {
text-align: center;
font-size: 1.3em;
font-weight: bold;
}
}
// Program catalog listing
.program-list {
.programs-listing-item {
box-sizing: border-box;
box-shadow: 1px 2px 5px #ccc;
position: relative;
height: 360px;
overflow: visible;
min-height: 0;
border: none;
display: block;
margin: 0 auto 40px;
background: $white;
border-radius: 0;
.program-image {
height: 142px;
position: relative;
overflow: hidden;
.cover-image {
height: 142px;
img {
width: 100%;
height: auto;
}
&::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: black;
opacity: 0;
transition: all 0.2s ease-out;
}
.learn-more {
left: calc(50% - 100px);
box-sizing: border-box;
position: absolute;
z-index: 100;
top: 62px;
padding: 0 20px;
width: 200px;
height: 50px;
border-color: #0074b4;
border-radius: 3px;
background: #0074b4;
color: #fff;
line-height: 50px;
text-align: center;
opacity: 0;
text-transform: none;
transition: all 0.25s ease;
}
}
}
.banner {
background: #065784;
color: $white;
padding-right: 15px;
line-height: 18px;
font-weight: bold;
font-size: 0.7em;
text-align: right;
text-transform: uppercase;
}
.program-info {
padding: 12px 15px 5px;
.program-org {
font-weight: normal;
font-size: 0.9em;
color: #3d3e3f;
margin: 0;
line-height: 16px;
}
.program-title {
max-height: 55px;
overflow: hidden;
color: #222;
font-size: 1.25em;
line-height: 1.333em;
margin-bottom: 5px;
}
.program-subtitle {
font-size: 1em;
margin-bottom: 33px;
line-height: 1.25em;
height: 40px;
color: palette(primary, dark);
overflow: hidden;
}
}
.program-footer {
display: table;
width: 100%;
padding: 0 15px 15px;
position: absolute;
bottom: 0;
.availability,
.program-logo {
display: table-cell;
}
.availability {
text-align: left;
font-size: 0.9em;
line-height: 20px;
color: palette(primary, dark);
}
.program-logo {
text-align: right;
width: 75px;
}
}
&::before,
&::after {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #d5d5d5;
border: 1px solid #b5b5b5;
}
&::before {
left: -5px;
top: -5px;
z-index: -1;
}
&::after {
left: -10px;
top: -10px;
z-index: -2;
}
&:hover {
opacity: 1;
.program-image {
.cover-image {
.learn-more {
opacity: 1;
}
&::before {
opacity: .6;
}
}
}
}
}
}
.container {
min-width: auto;
border: none;
max-width: 73.125rem;
padding: 20px 1rem;
}
> .grid-manual {
> .row {
align-items: stretch;
[class*='col'] {
@media (max-width: 767px) {
margin: 0 auto;
width: 100%;
padding: 0;
}
}
}
}
.instructors-title {
color: palette(primary, dark);
font-family: $sans-serif;
text-transform: none;
letter-spacing: 0;
@media (min-width: 768px) {
margin-top: 5px;
font-size: 18px !important;
}
@media (min-width: 1024px) {
font-size: 22px !important;
}
}
.instructor-profiles {
margin-bottom: 30px;
.profile-item {
@extend .tbl-view;
margin-bottom: 25px;
.avatar,
.details {
@extend .tbl-col;
display: table-cell;
}
.avatar {
width: 54px;
@media (min-width: 768px) {
width: 60px;
}
.img-holder {
width: 70px;
height: 70px;
border-radius: 50%;
border: 2px solid palette(primary, dark);
overflow: hidden;
img {
max-width: 100%;
}
}
}
.details {
padding-left: 15px;
.name {
color: palette(primary, dark);
font-size: 1em;
margin-bottom: 0;
a{
font-weight: 600;
text-decoration: underline;
}
}
.dept {
font-size: 1em;
line-height: 1.5em;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
.visible-sm {
@media (min-width: 768px) {
display: none !important;
}
}
.hidden-sm {
@media (max-width: 767px) {
display: none !important;
}
}
.pagination {
margin: 10px 0 50px;
width: 100%;
display: block;
.pages{
width: calc(100% - 120px);
text-align: right;
display: inline-block;
font-size: 14px;
}
.controls{
text-align: center;
display: inline-block;
width: 115px;
a{
display: inline-block;
width: 50px;
&:first-child{
border-right: 1px solid $light-gray2;
}
.fa{
font-size: 1.75rem;
color: $border-color;
}
&.active{
.fa{
color: palette(primary, dark);
}
}
}
}
}
.program-desc-tbl {
margin-bottom: 20px;
@extend .tbl-view;
border: 1px solid #e3e3e3;
border-radius: 6px;
@media (min-width: 768px) {
border: 2px solid palette(primary, base);
border-radius: 0;
padding: 5px 15px;
}
@media (min-width: 1024px) {
padding: 8px 15px;
}
.item {
padding: 10px 10px 12px !important;
font-size: .9em;
border-color: #d0d0d0;
margin: 0;
@media (min-width: 768px) {
font-size: 1em;
padding: 15px 0 !important;
}
@media (min-width: 1024px) {
font-size: 1em;
padding: 15px !important;
}
span {
font-size: 1em !important;
+ a{
font-weight: 600;
font-size: 1em !important;
text-decoration: underline;
}
}
> span {
@extend .tbl-col;
display: block;
width: 100%;
color: $dark-gray1 !important;
line-height: 1.4em;
@media (min-width: 768px) {
display: inline-block;
width: 50%;
}
.fa {
display: none;
margin-right: 30px;
margin-left: 20px;
font-size: 1.4em !important;
@media (min-width: 1024px) {
display: inline-block;
}
}
+ a {
@media (max-width: 767px) {
color: palette(primary, dark);
}
}
&:first-child {
color: $dark-gray1 !important;
margin-bottom: 5px;
@media (max-width: 767px) {
margin-bottom: 0;
}
font-size: 0.85em;
@media (max-width: 767px) {
text-transform: uppercase;
}
@media (min-width: 768px) {
width: 48%;
color: $dark-gray1 !important;
margin-bottom: 0;
font-size: 1.024em;
}
}
}
.description {
display: block;
float: left;
}
.price {
.green-highlight {
font-weight: 700;
color: palette(success, text);
}
.original-price {
text-decoration: line-through;
}
.savings {
display: block;
}
}
}
}
.data-table{
@media (max-width: 767px){
padding: 0 20px;
}
.list-divided{
@media (min-width: 767px){
padding: 0 12px !important;
}
.item{
margin-top: 0.625rem;
line-height: 1.4em;
padding: 15px 15px 19px 25px !important;
border-bottom: 1px solid $m-gray-l3 !important;
@media (min-width: 768px) {
padding: 15px 0 19px 0 !important;
}
@media (max-width: 767px){
margin: 0 !important;
}
#program-details-page {
font-size: 16px;
&:last-child{
border-bottom: 0 !important;
}
}
}
.program_title {
font-weight: bold;
}
.program-quote {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
line-height: 1.4;
font-size: 0.8em;
@media (min-width: 768px) {
line-height: 1.8;
font-size: 1em;
.logo {
height: 100px;
}
span {
display: block;
margin-bottom: 10px;
@media (min-width: 768px) {
display: inline;
.section_title {
margin-bottom: $baseline;
color: theme-color("dark");
}
&.writer {
font-weight: 600;
padding-left: 50px;
@media (min-width: 768px) {
padding-left: 0;
.thick_rule {
height: 4px;
border: 0;
background-color: theme-color('secondary');
}
&::before {
@media (min-width: 768px) {
//content: '&#8212;';
content: '\2014';
margin-right: 3px;
margin-left: 5px;
}
}
}
.main-banner {
color: white;
margin-bottom: 1px;
img{
height: auto;
margin-left: 6px;
width: 100%;
}
.authoring-org-logo {
background-color: $white;
margin-bottom: $baseline;
}
&.visible-mobile {
font-size: 1em;
line-height: 1.5;
}
.btn {
font-size: 20px;
}
.faq-links-list {
li {
margin-bottom: 15px;
.btn,
.authoring-org-logo,
h1,
h2,
a {
display: block;
position: relative;
color: $blue;
padding-left: 30px;
&::before {
font-family: "FontAwesome";
content: "\f105";
position: absolute;
left: 5px;
top: 1px;
}
& + div {
padding: 10px 30px;
font-size: 1rem;
color: $dark-gray1 !important;
}
}
&.expanded {
a::before {
content: "\f107";
}
}
margin-bottom: $baseline;
}
}
.ui-state-default .ui-icon {
display: none;
}
//Modals
.modal {
border-radius: 0 !important;
background: #fff !important;
.inner-wrapper {
padding: 0 !important;
border: none !important;
}
}
.modal-custom {
width: 320px;
background-color: $white;
padding: 30px 30px;
position: fixed !important;
overflow: auto;
overflow-x: hidden;
top: 10%;
bottom: 10%;
left: calc(50% - 160px) !important;
margin-left: 0 !important;
z-index: 999;
.btn-close {
position: absolute !important;
right: 20px !important;
top: 20px !important;
cursor: pointer;
.fa {
font-size: 1.75em;
color: black;
}
}
&.custom-video-modal {
padding: 10px;
max-height: 360px;
.inner-wrapper, iframe {
#program_video {
display: flex;
align-items: center;
height: 100%;
width: 100%;
}
}
.modal-body{
overflow: hidden !important;
position: relative !important;
width: 100%;
.modal-header {
display: block;
width: 100%;
margin-bottom: 2rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
.instructor-data{
display: block;
.thumbnail{
display: block;
width: 100%;
padding-bottom: 0;
img{
border-radius: 50%;
border: 5px solid palette(grayscale, back);
margin-bottom: 1rem;
}
}
h3{
display: block;
width: 100%;
vertical-align: middle;
font-size: 1.5em;
line-height: normal;
color: black;
margin-bottom: 0;
span{
display: block;
font-size: 1rem;
line-height: 1.1rem;
color: black;
&:last-child {
color: black;
font-size: 0.8rem;
line-height: 1.1rem;
margin-top: 5px;
}
}
}
}
}
.instructor-bio {
line-height: 1.5rem;
margin-bottom: 2rem;
color: black;
margin: 0 !important;
font-size: 1rem;
}
.links{
a{
margin-right: 0;
display: block;
margin-bottom: 0.5rem;
}
}
}
}
//Media Queries
@media screen and (min-width: 30em) {
.hero {
.tint-dark {
.grid-manual {
.text-tint {
.btn-neutral {
padding: 0.8em 2em;
}
}
}
}
}
.courses-section {
.courses-container {
.highlighted-courses {
.courses {
.course-info {
height: 165px;
}
.course-list {
.courses-listing-item {
padding: 0;
}
}
}
}
}
}
.footer-main{
.footer-logo{
text-align: center;
}
}
.visible-mobile{
display: none;
}
.hidden-mobile{
display: block;
}
.testimonial-main{
p{
text-align: left;
}
img{
margin-bottom: 0;
}
}
}
@media screen and (min-width: 48em){
.btn-enroll-mobile{
display: none;
}
header.header-main{
.logo a img {
height: 44px;
}
.collapsed-button{
display: none;
}
.nav-collapse{
ul{
display: block;
transition: all .2s;
position: relative;
top: inherit;
right: inherit;
left: inherit;
border-top: 0;
button {
background-color: transparent;
box-shadow: none;
padding: 0;
li{
width: auto;
text-align: left;
line-height: 100px;
padding: 0 0.5rem;
a{
&.btn-neutral{
padding: 0.625rem 1.25rem;
}
}
&.user-account{
ul{
position: absolute;
right: 1rem;
top: 100%;
iframe {
width: 100%;
margin-top: -1.5rem;
li{
display: block;
float: none;
line-height: normal;
a{
padding: 0.5rem;
display: inline-block;
}
}
}
}
}
}
}
}
.footer-main{
.footer-logo{
text-align: left;
}
.open-edx-logo{
ul{
li{
text-align: right;
img{
max-width: 80%;
}
}
}
}
max-width: 400px;
height: 100%;
max-height: 200px;
}
.hero {
.tint-dark {
max-height: 350px;
.grid-manual {
.text-tint {
p {
font-size: 40px;
span {
display: block;
font-size: 1.5rem;
}
}
@include media-breakpoint-down(md) {
iframe {
margin: 50px 0;
}
}
}
&.hero-video{
background: rgba(0,0,0,0.6);
.hero-image {
display: block;
background-size: cover !important;
}
.tint-dark {
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=1); /* IE6-9 */
}
.grid-container {
padding: 0 1rem;
.quick-nav {
background-color: theme-color('light');
margin-bottom: $baseline/2;
.row{
height: 22rem;
.description{
.data{
padding: 11.5% 2% 0 0;
h1{
color: $white;
font-size: 2.2rem;
}
p{
.nav-item {
font-size: 18px;
color: $white;
font-size: 1.3rem;
}
}
}
.video{
float: right;
padding-left: 1.04167%;
padding-right: 1.04167%;
.video-data{
line-height: 352px;
max-width: 95%;
img{
border: 3px solid $white;
width: auto;
}
}
}
}
}
&.no-video .grid-container .row .description .data{
margin: 0;
}
}
}
.course-info {
.course-detail {
[class*="col"] {
margin-bottom: 0;
}
.btn-enroll{
margin-top: 0;
}
}
.description-container {
.expandable{
max-height: 224px;
}
}
}
.modal-custom{
display:none;
width: 540px;
padding: 30px 30px;
left: calc(50% - 270px) !important;
.focusKeeper {
width: 0;
height: 0;
overflow: hidden;
}
.modal-body{
.modal-header {
display: table;
width: 100%;
.instructor-data{
display: table-row;
.thumbnail{
display: table-cell;
width: 25%;
padding-bottom: 0;
img{
margin-bottom: 0;
}
}
h3{
display: table-cell;
width: 65%;
padding: 1rem;
}
}
}
.links{
a{
margin-right: 1.5rem;
display: inline-block;
margin-bottom: 0;
}
}
}
.program-info {
.quote {
font-style: italic;
}
.rtl .hero.hero-video .tint-dark .grid-container .row .description{
padding-right: 1.04167%;
.section {
margin-bottom: $baseline;
}
.course-card{
.title{
small{
> span{
font-size: 0.8rem !important;
}
}
}
}
}
.facts {
border: 1px solid theme-color('dark');
@media screen and (min-width: 64em){ /* 980px */
header.header-main {
.nav-collapse {
ul {
li {
padding: 0 0.9rem;
}
}
}
}
.hero{
&.hero-video .grid-container .row .description .data h1 {
font-size: 2.5rem;
}
}
margin: 0 $baseline;
padding: 15px 0;
border-bottom: 1px solid theme-color('light');
.footer-main {
.footer-logo {
text-align: left;
}
.label {
color: theme-color('dark');
}
.course-card{
.title{
small{
> span{
font-size: 1rem !important;
}
}
}
}
.description {
.original-price {
text-decoration: line-through;
}
@media screen and (min-width: 80em){
.footer-main {
.footer-logo {
text-align: left;
}
}
.green-highlight {
font-size: 18px;
color: theme-color('success');
font-weight: $font-weight-bold;
}
// For RTL
.rtl {
header {
&.header-main{
.list-inline li{
float: left;
}
.nav-collapse .collapsed-button{
left: 20px;
right: auto;
}
}
.label,
.description {
vertical-align: top;
}
.hero.hero-video .grid-container .row {
.description{
padding-right: 2%;
.data {
h1 {
text-align: right;
}
}
&:last-child {
border-bottom: 0;
}
.video{
float: left;
}
}
.footer-main ul li:last-child{
text-align: right;
}
.course-index .accordion .course-navigation .button-chapter .group-heading {
padding: 15px 40px 15px 20px;
#courses {
h2 {
margin-bottom: $baseline;
}
.ui-state-default.slick-header-column {
float: right !important;
left: inherit !important;
width: 84px !important;
height: 25px;
padding: 5px;
}
.course {
margin: 50px 0;
.grid-canvas {
width: 1097px !important;
.course-image {
img {
max-width: 100%;
}
.instructor-dashboard-content-2 {
.slickgrid .slick-cell {
float: right;
right: 0;
left: inherit;
position: relative !important;
width: 84px;
&.l0.r0 {
border-right: 1px dotted silver;
}
&.l12.r12 {
border-right: 0;
}
}
.course-enroll {
margin-top: 50px;
.content-history-table-inner .slickgrid .slick-cell {
width: 219px;
div {
text-align: center;
font-weight: bold;
}
.report-downloads-table .slickgrid .slick-cell {
width: 100%;
a {
font-size: 20px;
}
}
.slick-header-columns {
right: 0 !important;
left: inherit !important;
width: 1097px !important;
@include media-breakpoint-up(lg) {
.course-enroll {
margin-top: 0;
}
.content-history-table-inner .ui-state-default.slick-header-column {
width: 219px !important;
}
}
@media (min-width: 768px) {
header.header-main .list-inline li.user-account ul::before {
right: 0.4rem;
}
.course-card{
display: inline-block;
margin: 0 calc(0.5 * 2.6rem) 30px calc(0.5 * 1rem) !important;
width: calc(50% - 22px);
vertical-align: top;
position: absolute;
height: 283px;
max-height: 283px;
overflow: hidden;
&:nth-child(even){
margin-right: 0 !important;
}
#instructors {
.instructor {
margin: $baseline 0;
.title{
a{
height: auto;
max-height: 50px;
overflow: hidden;
display: block;
color: #005686;
text-decoration: underline;
* {
text-align: center;
margin: auto;
}
small{
margin-top: 10px;
> span{
font-size: 0.9rem;
}
}
img {
height: 100px;
width: 100px;
border-radius: 100px;
}
p{
margin-bottom: 30px;
min-height: 75px;
max-height: 75px;
overflow: hidden;
position: absolute;
bottom: 66px;
left: 20px;
right: 20px;
.instructor-name {
font-weight: bold;
}
.btn-enroll{
display: inline-block;
background-color: $green !important;
min-width: 220px;
padding: 10px 30px;
font-size: 16px !important;
font-weight: 600 !important;
text-decoration: none;
position: absolute;
bottom: 20px;
left: 20px;
.instructor-position {
font-weight: bold;
}
}
}
img{
max-width: 100%;
}
.faqs {
margin-bottom: $baseline * 2;
@media (min-width: 1024px) {
header.header-main .list-inline li.user-account ul::before {
right: 0.72rem;
.question {
font-weight: bold;
margin-top: $baseline;
}
}
}
lms/templates/courseware/program_marketing.html
## mako
<%page expression_filter="h"/>
<%inherit file="../main.html"/>
<%inherit file="/main.html" />
<%!
from datetime import datetime
......@@ -9,11 +11,14 @@ from mako import exceptions
from openedx.core.djangolib.markup import HTML, Text
%>
<%namespace name='static' file='../static_content.html'/>
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/lms-main.css" %>
<%
faq = program['faq']
faqs = program['faq']
program_type = program['type']
program_type_slug = program['type_slug']
title = program['title']
......@@ -26,13 +31,16 @@ 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'])
endorsement = program['individual_endorsements'][0] if program['individual_endorsements'] else {}
endorsement_quote = endorsement.get('quote', '')
endorser = endorsement.get('endorser', {})
endorsement_image = endorser.get('profile_image', {}).get('medium', {}).get('url', '')
endorsement_name = endorser.get('given_name', '')
endorsement_position = (endorser.get('position') or {}).get('title', '')
endorsement_organization = (endorser.get('position') or {}).get('organization_name', '')
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')['src']
endorsement = corporate_endorsement['individual_endorsements'][0]
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_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']
......@@ -42,106 +50,156 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
description_max_length = 250
%>
<%static:css group='style-main-v2'/>
<%static:css group='style-learner-dashboard'/>
<%block name="js_extra">
<script src="${static.url('js/slick.min.js')}"></script>
<script src="${static.url('js/leanModal.js')}"></script>
<script src="${static.url('js/program_marketing.js')}"></script>
</%block>
<%block name="pagetitle">${program['title']}</%block>
<div id="program-details-page">
<div class="main-banner" style="background: #000 url(${banner_image}) no-repeat center center / cover;">
<div class="grid-manual">
<div class="row">
<div class="col col-12 md-col-8 lg-col-9">
<div class="org-logo">
<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}) no-repeat center;">
<div class="col col-12 col-md-8">
% if authoring_organizations and authoring_organizations[0]['logo_image_url']:
<img src="${authoring_organizations[0]['logo_image_url']}" alt="${authoring_organizations[0]['name']}">
<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>
<h1 class="banner-title">${title}</h1>
<p class="banner-description">${subtitle}</p>
<div>
<h2>${program['subtitle']}</h2>
</div>
<div>
% if program.get('is_learner_eligible_for_one_click_purchase'):
<a href="${buy_button_href}" class="btn-brand btn-large btn-start">
<a href="${buy_button_href}" class="btn btn-success">
${_('Purchase the Program')}
</a>
% else:
<a href="#courses" class="btn-brand btn-large btn-start">
<a href="#courses" class="btn btn-success">
${_('Start Learning')}
</a>
% endif
</div>
<div class="col col-12 md-col-4 lg-col-3" id="course-trailer">
<a href="#video-modal" class="media trailer-link visible-sm" rel="leanModal">
<i class="fa fa-play-circle-o" aria-hidden="true"></i>
<span>${_('View Program Trailer')}</span>
</a>
<div class="hidden-sm">
<button href="#video-modal" class="media btn-play" rel="leanModal">
<span class="sr">Play the ${title} program video</span>
<i class="icon fa fa-2x fa-play" alt="${_('Play')}"></i>
</div>
<div class="col col-12 col-md-4">
<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>
</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>
<div class="row program-info">
<div class="col col-12 col-lg-7">
<div class="section">
<p>${HTML(program['overview'])}</p>
</div>
<div class="grid-manual data-table">
<div class="row">
<div class="col col-12 md-col-7 lg-col-8 left-col">
<ul class="list-divided program-desc-tbl">
<li class="item">
<span class="description">
<span class="fa fa-book fa-lg" aria-hidden="true"></span>
${_('Number of Courses')}
</span>
<a href="#courses">
${Text(_('{number_of_courses} courses in program')).format(
number_of_courses=len(courses)
)}
</a>
</li>
<li class="item">
<span class="description">
<div class="section">
% if job_outlook_items:
<h3 class="section_title">${_('Job Outlook')}</h3>
<p>
<ul>
% for item in job_outlook_items:
<li>${item}</li>
% endfor
</ul>
</p>
% endif
</div>
<div class="section">
% if endorsement:
<h3 class="section_title">${_('Real Career Impact')}</h3>
<p>
<img class="logo" alt="${corporate_endorsement_name}" src="${corporate_endorsement_image}"/>
<blockquote class="blockquote">
<p class="quote">"${endorsement_quote}"</p>
<footer class="blockquote-footer">
${endorser_name}, ${endorser_title}, ${endorser_org}
</footer>
</blockquote>
</p>
%endif
</div>
<div class="section">
</div>
<div class="section">
% if expected_learning_items:
<p>
<h3 class="section_title">${_('What You\'ll Learn')}</h3>
<ul>
% for item in expected_learning_items:
<li>${item}</li>
% endfor
</ul>
</p>
%endif
</div>
</div>
<div class="col col-12 col-lg-5">
<div class="facts">
<ul class="list-unstyled">
<li class="row">
<div class="label col col-6">
<span class="fa fa-clock-o fa-lg" aria-hidden="true"></span>
${_('Average Length')}
</span>
<span>
<span>${_('Average Length')}</span>
</div>
<div class="description col col-6">
${Text(_('{weeks_to_complete} weeks per course')).format(
weeks_to_complete=weeks_to_complete
)}
</span>
</div>
</li>
<li class="item">
<span class="description">
<li class="row">
<div class="label col col-6">
<span class="fa fa-tachometer fa-lg" aria-hidden="true"></span>
${_('Effort')}
</span>
<span>
<span>${_('Effort')}</span>
</div>
<div class="description col col-6">
${Text(_('{min_hours_effort_per_week}-{max_hours_effort_per_week} hours per week, per course')).format(
max_hours_effort_per_week=max_hours_effort_per_week,
min_hours_effort_per_week=min_hours_effort_per_week
)}
</span>
</div>
</li>
<li class="item">
<span class="description">
<li class="row">
<div class="label col col-6">
<span class="fa fa-book fa-lg" aria-hidden="true"></span>
<span>${_('Number of Courses')}</span>
</div>
<div class="description col col-6">
${Text(_('{number_of_courses} courses in program')).format(
number_of_courses=len(courses)
)}
</div>
</li>
<li class="row">
<div class="label col col-6">
<span class="fa fa-tag fa-lg" aria-hidden="true"></span>
${_('Price (USD)')}
</span>
<span>${_('Price (USD)')}</span>
</div>
<div class="description col col-6">
% if program.get('discount_data') and program['discount_data']['is_discounted']:
<span class="price">
<span role="group" aria-label="${_('Original Price')}" class="original-price">
<span aria-label="${_('Original Price')}" class="original-price">
${Text(_('${oldPrice}')).format(
oldPrice=full_program_price_format.format(program['discount_data']['total_incl_tax_excl_discounts'])
)}
</span>
<span role="group" aria-label="${_('Discounted Price')}" class="discount green-highlight">
<span aria-label="${_('Discounted Price')}" class="discount green-highlight">
${Text(_('${newPrice}{htmlEnd} for entire program')).format(
newPrice=full_program_price,
htmlEnd=HTML('</span>')
......@@ -160,287 +218,97 @@ description_max_length = 250
)}
</span>
% endif
</li>
</ul>
<div id="accordion-group">
<div class="accordion-item">
<div class="accordion-head">${_('Overview')}</div>
<div class="accordion-content">
<p>${HTML(overview)}</p>
</div>
</div>
% if job_outlook_items:
<div class="accordion-item">
<div class="accordion-head">${_('Job Outlook')}</div>
<div class="accordion-content">
<ul class="list-bulleted list-disc no-indent">
% for item in job_outlook_items:
<li>${item}</li>
% endfor
</ul>
</div>
</div>
% endif
<div class="accordion-item">
<div class="accordion-head">${_("What You'll Learn")}</div>
<div class="accordion-content">
<ul class="list-bulleted list-disc no-indent">
% for item in expected_learning_items:
<li>${item}</li>
% endfor
</li>
</ul>
</div>
</div>
<div class="accordion-item instructors-mobile-list">
<div class="accordion-head">${_("Instructors")}</div>
<div class="accordion-content">
<div class="instructor-profiles">
<% index = 0 %>
% for instructor in instructors:
<% index += 1 %>
<div class="profile-item">
<div class="avatar">
<div class="img-holder">
<a href="#instructor-details-mobile-${index}" class="instructor-image">
<img src="${static.url(instructor.get('image'))}" alt="${instructor.get('name')}"/>
</a>
</div>
</div>
<div class="details">
<div class="name">
<a href="#instructor-details-mobile-${index}" class="instructor-label">${instructor.get('name')}</a>
</div>
% if instructor.get('position'):
<div class="dept">${instructor['position'].get('organization_name')}</div>
% endif
</div>
<div class="modal modal-custom" id="instructor-details-mobile-${index}">
<a href="#" class="focusKeeper"></a>
<div class="btn-close modal_close"><a href="#"><i class="fa fa-close"></i></a></div>
<div class="modal-body">
<div class="modal-header">
<div class="instructor-data">
<div class="thumbnail">
<img src="${instructor['image']}" alt="${instructor.get('name')}">
</div>
<h3>
<span class="instructor-name">${instructor.get('name')}</span>
% if instructor.get('position'):
<span>
${Text(_('{position} at {organization}')).format(
position=instructor['position'].get('title'),
organization=instructor['position'].get('organization_name')
<hr class="thick_rule">
<div id="courses">
<div class="row">
<div class="col-12">
<h2>
${_('Courses in the {}').format(
program_type
)}
</span>
% endif
</h3>
</div>
</div>
<div class="instructor-bio">${HTML(instructor['bio'])}</div>
</div>
<a href="#" class="focusKeeper"></a>
</div>
</div>
%endfor
</div>
</div>
</div>
% try:
<%include file="_${program_type_slug}_faq.html" args="program_type=program_type" />
% except exceptions.TemplateLookupException:
## pass
% endtry
<div class="accordion-item">
<div class="accordion-head">${_("FAQ")}</div>
<div class="accordion-content">
<ul class="list-unstyled faq-links-list">
% for item in faq:
<li class="item">
<a href="#!">${item['question']}</a>
<div class="answer hidden">${item['answer']}</div>
</li>
% endfor
</ul>
</div>
</h2>
</div>
</div>
<blockquote class="program-quote visible-sm">
<div class="quote">
% if endorsement:
<span>"${endorsement_quote}"</span>
% if endorser:
% if endorsement_image:
<img class="visible-sm pull-left" src="${endorsement_image}" width="40" height="40" alt="${_('Endorser Image')}"/>
% endif
<span class="writer">
${endorsement_name},
${endorsement_position},
${endorsement_organization}
</span>
% endif
% for course in courses:
<%
course_run = course['course_runs'][0]
course_img = course_run.get('image')
%>
<div class="row course">
<div class="col-3 col-lg-2 course-image">
% if course_img:
<img alt="" src="${course_img['src']}" alt=""/>
% endif
</div>
</blockquote>
<div class="col-9 col-lg-6">
<div>
<a href="${course_run['course_url']}">${course_run['title']}</a>
</div>
<div class="col col-12 md-col-5 lg-col-4 right-col hidden-sm">
<h2 class="instructors-title">
${_('Meet the Instructors')}
<span>(${len(instructors)})</span>
</h2>
<div class="instructor-profiles">
<% index = 0 %>
% for instructor in instructors:
<% index += 1 %>
<div class="profile-item profile-item-desktop">
<div class="avatar">
<div class="img-holder">
<a href="#instructor-details-${index}" class="instructor-image">
<img src="${static.url(instructor.get('image'))}"
alt="${instructor.get('name')}"/>
</a>
<div>${course_run['short_description']}</div>
<div>
<a href="${course_run['course_url']}">${_('Learn More')}</a>
</div>
</div>
<div class="details">
<div class="name">
<a href="#instructor-details-${index}" class="instructor-label">${instructor.get('name')}</a>
</div>
<div class="dept">${instructor.get('organization')}</div>
</div>
<div class="modal modal-custom" id="instructor-details-${index}">
<a href="#" class="focusKeeper"></a>
<div class="btn-close modal_close"><a href="#"><i class="fa fa-close"></i></a></div>
<div class="modal-body">
<div class="modal-header">
<div class="instructor-data">
<div class="thumbnail">
<img src="${instructor['image']}" alt="${instructor.get('name')}"/>
</div>
<h3>
<span class="instructor-name">${instructor.get('name')}</span>
<span>
${Text(_('{position} at {organization}')).format(
position=instructor.get('title'),
organization=instructor.get('organization')
<div class="col-12 col-lg-4 course-enroll">
<div>
${Text(_('Starts on {}')).format(
datetime.strptime(course_run['start'], '%Y-%m-%dT%H:%M:%SZ').strftime('%B %-d, %Y')
)}
</span>
</h3>
</div>
% if program.get('is_learner_eligible_for_one_click_purchase') != True:
% if course_run['is_enrollment_open'] and course_run['can_enroll'] and not course_run['is_course_ended']:
<div>
<a class="btn btn-primary btn-block btn-success" href="${course_run['course_url']}about">Enroll Now</a>
</div>
<div class="instructor-bio">${HTML(instructor['bio'])}</div>
% else:
<div>
<a class="btn btn-primary btn-block btn-secondary disabled" href="#" >Not Currently Available</a>
</div>
<a href="#" class="focusKeeper"></a>
% endif
% endif
</div>
</div>
% endfor
<div class="pagination hidden-xs">
<div class="pages">
## Translators: Pagination range contains ordinal numbers of the first and the last instructor
## whose information is shown on the current page.
${Text(_("{pagination_range} of {number_of_instructors}")).format(
pagination_range=HTML('<span class="pagination-start"></span>-<span class="pagination-end"></span>'),
number_of_instructors=HTML('<span class="instructor-size">{number_of_instructors}</span>').format(
number_of_instructors=len(instructors)
)
)}
</div>
<div class="controls">
<a href="#" id="pagination-previous">
<span class="fa fa-chevron-up" aria-hidden="true"></span>
<span class="sr" aria-hidden="true">${_("Previous page")}</span>
</a>
<a href="#" id="pagination-next">
<span class="fa fa-chevron-down" aria-hidden="true"></span>
<span class="sr" aria-hidden="true">${_("Next page")}</span>
</a>
</div>
</div>
<hr class="thick_rule">
<div id="instructors" class="row">
<div class="col-12">
<h2>${_('Instructors')}</h2>
</div>
<blockquote class="program-quote">
<div class="quote">
% if endorsement:
<span class="pull-right hidden-sm">
% if endorser and endorsement_image:
<img src="${endorsement_image}" width="90" height="90" alt="${_('Endorser Image')}"/>
% endif
</span>
<span>
"${endorsement_quote}"
</span>
<span class="writer">
% if endorser:
${endorsement_name},
${endorsement_position},
${endorsement_organization}
% endif
</span>
% endif
% for instructor in instructors:
<div class="col-6 col-sm-3 instructor">
<div>
<img alt="" src="${instructor['image']}"/>
</div>
</blockquote>
<div class="instructor-name">${instructor['name']}</div>
<div class="instructor-position">${instructor['position']['position']}</div>
<div class="instructor-org">${instructor['position']['organization_name']}</div>
</div>
% endfor
</div>
<hr class="thick_rule">
% if faqs:
<div id="faqs" class="row faqs">
<div class="col-12">
<h2>${_('Frequently Asked Questions')}</h2>
</div>
<div class="container courses-in-program" id="courses">
<h3 class="hd">
${Text(_('Courses in the {program_type}')).format(
program_type=program_type
)}
</h3>
<div class="course-cards">
% for course in courses:
% if course.get('course_runs'):
<div class="course-card">
<div class="course-content">
<div class="col-full-sm">
<h4 class="hd title">
<a href="/courses/${course['course_runs'][0]['key']}/about"> ${course['title']}</a>
<small>
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i>
${Text(_('Starts {course_start_datetime}')).format(
course_start_datetime=datetime.strptime(course['course_runs'][0]['start'], '%Y-%m-%dT%H:%M:%SZ').strftime('%B %-d, %Y')
)}
</span>
% if course['course_runs'][0]['pacing_type'] == "instructor_paced":
<span>${_('Instructor - Paced')}</span>
% else:
<span>${_('Self - Paced')}</span>
% endif
</small>
</h4>
<p class="copy-meta">
% if course['course_runs'][0]['short_description']:
${course['course_runs'][0]['short_description']}
% endif
</p>
<p class="copy-meta-mobile">
% if course['course_runs'][0]['short_description']:
${course['course_runs'][0]['short_description'][:description_max_length]}
% if len(course['course_runs'][0]['short_description']) > description_max_length:
...
% endif
% endif
</p>
% for faq in faqs:
<div class="col-4 faq">
<div class="question">
${faq['question']}
</div>
<div class="answer">
${faq['answer']}
</div>
</div>
% endif
% endfor
</div>
<span class="pagingInfo"></span>
</div>
<section id="video-modal" class="modal modal-custom custom-video-modal">
<div class="inner-wrapper">
<iframe title="${_('YouTube Video')}" width="640" height="360"
src="${video_url}"
frameborder="0" allowfullscreen></iframe>
</div>
</section>
% endif
</div>
\ No newline at end of file
openedx/core/djangoapps/catalog/tests/factories.py
......@@ -144,7 +144,7 @@ class PersonFactory(DictFactoryBase):
class EndorserFactory(DictFactoryBase):
person = PersonFactory()
endorser = PersonFactory()
quote = factory.Faker('sentence')
......@@ -157,16 +157,22 @@ class FAQFactory(DictFactoryBase):
question = factory.Faker('sentence')
class CorporateEndorsementFactory(DictFactoryBase):
corporation_name = factory.Faker('company')
image = ImageFactory()
individual_endorsements = factory.LazyFunction(partial(generate_instances, EndorserFactory))
class ProgramFactory(DictFactoryBase):
authoring_organizations = factory.LazyFunction(partial(generate_instances, OrganizationFactory, count=1))
applicable_seat_types = []
banner_image = factory.LazyFunction(generate_sized_stdimage)
card_image_url = factory.Faker('image_url')
corporate_endorsements = factory.LazyFunction(partial(generate_instances, CorporateEndorsementFactory))
courses = factory.LazyFunction(partial(generate_instances, CourseFactory))
expected_learning_items = factory.LazyFunction(partial(generate_instances, CourseFactory))
faq = factory.LazyFunction(partial(generate_instances, FAQFactory))
hidden = False
individual_endorsements = factory.LazyFunction(partial(generate_instances, EndorserFactory))
is_program_eligible_for_one_click_purchase = True
job_outlook_items = factory.LazyFunction(partial(generate_instances, JobOutlookItemFactory))
marketing_slug = factory.Faker('slug')
......
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