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 366 additions and 2427 deletions
lms/djangoapps/courseware/views/views.py
...@@ -864,6 +864,8 @@ def program_marketing(request, program_uuid): ...@@ -864,6 +864,8 @@ def program_marketing(request, program_uuid):
if program.get('is_learner_eligible_for_one_click_purchase') and skus: if program.get('is_learner_eligible_for_one_click_purchase') and skus:
context['buy_button_href'] = ecommerce_service.get_checkout_page_url(*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) return render_to_response('courseware/program_marketing.html', context)
......
lms/static/js/program_marketing.js
function initializeCourseSlider() { function playVideo(src) {
'use strict'; 'use strict';
var isMobileResolution = $(window).width() <= 767, document.querySelector('#program_video button').style = 'display:none;';
sliderExists = $('.course-slider-xs').hasClass('slick-slider'); document.querySelector('#program_video iframe').style = 'display:block;';
$('.course-card').toggleClass('slidable', isMobileResolution); document.querySelector('#program_video iframe').src = src;
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();
}
}
} }
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 @@ ...@@ -36,6 +36,3 @@
@import 'features/course-search'; @import 'features/course-search';
@import 'features/course-sock'; @import 'features/course-sock';
@import 'features/course-upgrade-message'; @import 'features/course-upgrade-message';
// Views
@import "views/program-marketing-page";
lms/static/sass/bootstrap/lms-main.scss
...@@ -27,3 +27,6 @@ ...@@ -27,3 +27,6 @@
@import 'features/course-search'; @import 'features/course-search';
@import 'features/course-sock'; @import 'features/course-sock';
@import 'features/course-upgrade-message'; @import 'features/course-upgrade-message';
// Individual Pages
@import "views/program-marketing-page";
lms/static/sass/views/_program-marketing-page.scss
/* Box shadow mixin */ #program-details-page {
// example: @include box-shadow(2px, 3px, 6px, rgba(0, 0, 0, 0.3)); font-size: 16px;
@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;
}
&:last-child{ .program_title {
border-bottom: 0 !important; font-weight: bold;
}
}
}
} }
.program-quote { .logo {
margin-left: 0; height: 100px;
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;
}
span {
display: block;
margin-bottom: 10px;
@media (min-width: 768px) {
display: inline;
}
&.writer {
font-weight: 600;
padding-left: 50px;
@media (min-width: 768px) {
padding-left: 0;
}
&::before {
@media (min-width: 768px) {
//content: '&#8212;';
content: '\2014';
margin-right: 3px;
margin-left: 5px;
}
}
}
img{
height: auto;
margin-left: 6px;
width: 100%;
}
}
&.visible-mobile {
font-size: 1em;
line-height: 1.5;
}
} }
.faq-links-list { .section_title {
li { margin-bottom: $baseline;
margin-bottom: 15px; color: theme-color("dark");
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";
}
}
}
} }
.ui-state-default .ui-icon { .thick_rule {
display: none; height: 4px;
border: 0;
background-color: theme-color('secondary');
} }
//Modals .main-banner {
.modal { color: white;
border-radius: 0 !important; margin-bottom: 1px;
background: #fff !important;
.inner-wrapper { .authoring-org-logo {
padding: 0 !important; background-color: $white;
border: none !important; margin-bottom: $baseline;
} }
}
.modal-custom { .btn {
width: 320px; font-size: 20px;
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 { .btn,
padding: 10px; .authoring-org-logo,
max-height: 360px; h1,
h2,
.inner-wrapper, iframe { a {
height: 100%; margin-bottom: $baseline;
width: 100%;
}
} }
.modal-body{ #program_video {
overflow: hidden !important; display: flex;
position: relative !important; align-items: center;
width: 100%; height: 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{ button {
display: block; background-color: transparent;
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 { iframe {
line-height: 1.5rem; width: 100%;
margin-bottom: 2rem; max-width: 400px;
color: black; height: 100%;
margin: 0 !important; max-height: 200px;
font-size: 1rem;
} }
.links{ @include media-breakpoint-down(md) {
a{ iframe {
margin-right: 0; margin: 50px 0;
display: block;
margin-bottom: 0.5rem;
} }
} }
} }
} }
//Media Queries .quick-nav {
background-color: theme-color('light');
@media screen and (min-width: 30em) { margin-bottom: $baseline/2;
.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{ .nav-item {
margin-bottom: 0; font-size: 18px;
} color: $white;
} }
} }
@media screen and (min-width: 48em){ .program-info {
.btn-enroll-mobile{ .quote {
display: none; font-style: italic;
}
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;
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%;
width: 100%;
margin-top: -1.5rem;
li{
display: block;
float: none;
line-height: normal;
a{
padding: 0.5rem;
display: inline-block;
}
}
}
}
}
}
}
} }
.footer-main{ .section {
.footer-logo{ margin-bottom: $baseline;
text-align: left;
}
.open-edx-logo{
ul{
li{
text-align: right;
img{
max-width: 80%;
}
}
}
}
} }
.hero { .facts {
.tint-dark { border: 1px solid theme-color('dark');
max-height: 350px;
.grid-manual {
.text-tint {
p {
font-size: 40px;
span {
display: block;
font-size: 1.5rem;
}
}
}
}
}
&.hero-video{
background: rgba(0,0,0,0.6);
.hero-image { li {
display: block; margin: 0 $baseline;
background-size: cover !important; padding: 15px 0;
} border-bottom: 1px solid theme-color('light');
.tint-dark { .label {
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */ color: theme-color('dark');
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 { .description {
padding: 0 1rem; .original-price {
text-decoration: line-through;
.row{
height: 22rem;
.description{
.data{
padding: 11.5% 2% 0 0;
h1{
color: $white;
font-size: 2.2rem;
}
p{
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{ .green-highlight {
display: table-cell; font-size: 18px;
width: 65%; color: theme-color('success');
padding: 1rem; font-weight: $font-weight-bold;
}
} }
} }
.links{ .label,
a{ .description {
margin-right: 1.5rem; vertical-align: top;
display: inline-block;
margin-bottom: 0;
}
} }
}
}
.rtl .hero.hero-video .tint-dark .grid-container .row .description{
padding-right: 1.04167%;
}
.course-card{ &:last-child {
.title{ border-bottom: 0;
small{
> span{
font-size: 0.8rem !important;
}
} }
} }
} }
} }
@media screen and (min-width: 64em){ /* 980px */ #courses {
header.header-main { h2 {
.nav-collapse { margin-bottom: $baseline;
ul {
li {
padding: 0 0.9rem;
}
}
}
}
.hero{
&.hero-video .grid-container .row .description .data h1 {
font-size: 2.5rem;
}
} }
.footer-main { .course {
.footer-logo { margin: 50px 0;
text-align: left;
}
}
.course-card{ .course-image {
.title{ img {
small{ max-width: 100%;
> span{
font-size: 1rem !important;
}
} }
} }
}
}
@media screen and (min-width: 80em){
.footer-main {
.footer-logo {
text-align: left;
}
}
}
// For RTL .course-enroll {
.rtl { margin-top: 50px;
header {
&.header-main{
.list-inline li{
float: left;
}
.nav-collapse .collapsed-button{ div {
left: 20px; text-align: center;
right: auto; font-weight: bold;
} }
}
}
.hero.hero-video .grid-container .row {
.description{
padding-right: 2%;
.data { a {
h1 { font-size: 20px;
text-align: right;
}
} }
} }
.video{ @include media-breakpoint-up(lg) {
float: left; .course-enroll {
} margin-top: 0;
}
.footer-main ul li:last-child{
text-align: right;
}
.course-index .accordion .course-navigation .button-chapter .group-heading {
padding: 15px 40px 15px 20px;
}
.ui-state-default.slick-header-column {
float: right !important;
left: inherit !important;
width: 84px !important;
height: 25px;
padding: 5px;
}
.grid-canvas {
width: 1097px !important;
}
.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;
} }
} }
.content-history-table-inner .slickgrid .slick-cell {
width: 219px;
}
.report-downloads-table .slickgrid .slick-cell {
width: 100%;
}
}
.slick-header-columns {
right: 0 !important;
left: inherit !important;
width: 1097px !important;
}
.content-history-table-inner .ui-state-default.slick-header-column {
width: 219px !important;
} }
} }
@media (min-width: 768px) { #instructors {
header.header-main .list-inline li.user-account ul::before { .instructor {
right: 0.4rem; margin: $baseline 0;
}
.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; text-align: center;
margin: auto;
} }
.title{ img {
a{ height: 100px;
height: auto; width: 100px;
max-height: 50px; border-radius: 100px;
overflow: hidden;
display: block;
color: #005686;
text-decoration: underline;
}
small{
margin-top: 10px;
> span{
font-size: 0.9rem;
}
}
} }
p{ .instructor-name {
margin-bottom: 30px; font-weight: bold;
min-height: 75px;
max-height: 75px;
overflow: hidden;
position: absolute;
bottom: 66px;
left: 20px;
right: 20px;
} }
.btn-enroll{ .instructor-position {
display: inline-block; font-weight: bold;
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;
} }
} }
} }
img{ .faqs {
max-width: 100%; margin-bottom: $baseline * 2;
}
@media (min-width: 1024px) { .question {
header.header-main .list-inline li.user-account ul::before { font-weight: bold;
right: 0.72rem; margin-top: $baseline;
} }
} }
} }
lms/templates/courseware/program_marketing.html
## mako
<%page expression_filter="h"/> <%page expression_filter="h"/>
<%inherit file="../main.html"/>
<%inherit file="/main.html" />
<%! <%!
from datetime import datetime from datetime import datetime
...@@ -9,11 +11,14 @@ from mako import exceptions ...@@ -9,11 +11,14 @@ from mako import exceptions
from openedx.core.djangolib.markup import HTML, Text from openedx.core.djangolib.markup import HTML, Text
%> %>
<%namespace name='static' file='../static_content.html'/> <%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 = program['type']
program_type_slug = program['type_slug'] program_type_slug = program['type_slug']
title = program['title'] title = program['title']
...@@ -26,13 +31,16 @@ job_outlook_items = program['job_outlook_items'] ...@@ -26,13 +31,16 @@ job_outlook_items = program['job_outlook_items']
weeks_to_complete = program['weeks_to_complete'] 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_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']) full_program_price = full_program_price_format.format(program['full_program_price'])
endorsement = program['individual_endorsements'][0] if program['individual_endorsements'] else {} corporate_endorsement = program['corporate_endorsements'][0] if program['corporate_endorsements'] else {}
endorsement_quote = endorsement.get('quote', '') corporate_endorsement_name = corporate_endorsement.get('corporation_name')
endorser = endorsement.get('endorser', {}) corporate_endorsement_image = corporate_endorsement.get('image')['src']
endorsement_image = endorser.get('profile_image', {}).get('medium', {}).get('url', '') endorsement = corporate_endorsement['individual_endorsements'][0]
endorsement_name = endorser.get('given_name', '') endorsement_quote = endorsement.get('quote')
endorsement_position = (endorser.get('position') or {}).get('title', '') endorser = endorsement.get('endorser')
endorsement_organization = (endorser.get('position') or {}).get('organization_name', '') 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'] expected_learning_items = program['expected_learning_items']
authoring_organizations = program['authoring_organizations'] 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']
...@@ -42,405 +50,265 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '') ...@@ -42,405 +50,265 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
description_max_length = 250 description_max_length = 250
%> %>
<%static:css group='style-main-v2'/>
<%static:css group='style-learner-dashboard'/>
<%block name="js_extra"> <%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> <script src="${static.url('js/program_marketing.js')}"></script>
</%block> </%block>
<%block name="pagetitle">${program['title']}</%block> <%block name="pagetitle">${program['title']}</%block>
<div id="program-details-page" class="container">
<div id="program-details-page"> <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="main-banner" style="background: #000 url(${banner_image}) no-repeat center center / cover;"> <div class="col col-12 col-md-8">
<div class="grid-manual"> % if authoring_organizations and authoring_organizations[0]['logo_image_url']:
<div class="row"> <div>
<div class="col col-12 md-col-8 lg-col-9"> <img class="authoring-org-logo logo" alt="${authoring_organizations[0]['name']}" src="${authoring_organizations[0]['logo_image_url']}"/>
<div class="org-logo"> </div>
% if authoring_organizations and authoring_organizations[0]['logo_image_url']: % endif
<img src="${authoring_organizations[0]['logo_image_url']}" alt="${authoring_organizations[0]['name']}"> <div>
% endif <h1 class="program_title">${program['title']}</h1>
</div> </div>
<h1 class="banner-title">${title}</h1> <div>
<p class="banner-description">${subtitle}</p> <h2>${program['subtitle']}</h2>
% if program.get('is_learner_eligible_for_one_click_purchase'): </div>
<a href="${buy_button_href}" class="btn-brand btn-large btn-start"> <div>
${_('Purchase the Program')} % if program.get('is_learner_eligible_for_one_click_purchase'):
</a> <a href="${buy_button_href}" class="btn btn-success">
% else: ${_('Purchase the Program')}
<a href="#courses" class="btn-brand btn-large btn-start">
${_('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> </a>
<div class="hidden-sm"> % else:
<button href="#video-modal" class="media btn-play" rel="leanModal"> <a href="#courses" class="btn btn-success">
<span class="sr">Play the ${title} program video</span> ${_('Start Learning')}
<i class="icon fa fa-2x fa-play" alt="${_('Play')}"></i> </a>
</button> % endif
</div> </div>
</div> </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>
</div> </div>
<div class="row quick-nav">
<div class="grid-manual data-table"> <ul class="nav nav-fill col-lg-12">
<div class="row"> <li class="nav-item">
<div class="col col-12 md-col-7 lg-col-8 left-col"> <a class="nav-link" href="#courses">${_('View Courses')}</a>
<ul class="list-divided program-desc-tbl"> </li>
<li class="item"> <li class="nav-item">
<span class="description"> <a class="nav-link" href="#instructors">${_('Meet the Instructors')}</a>
<span class="fa fa-book fa-lg" aria-hidden="true"></span> </li>
${_('Number of Courses')} <li class="nav-item">
</span> <a class="nav-link" href="#faqs">${_('Frequenty Asked Questions')}</a>
<a href="#courses"> </li>
${Text(_('{number_of_courses} courses in program')).format( </ul>
number_of_courses=len(courses) </div>
)} <div class="row program-info">
</a> <div class="col col-12 col-lg-7">
</li> <div class="section">
<li class="item"> <p>${HTML(program['overview'])}</p>
<span class="description"> </div>
<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> <span class="fa fa-clock-o fa-lg" aria-hidden="true"></span>
${_('Average Length')} <span>${_('Average Length')}</span>
</span> </div>
<span> <div class="description col col-6">
${Text(_('{weeks_to_complete} weeks per course')).format( ${Text(_('{weeks_to_complete} weeks per course')).format(
weeks_to_complete=weeks_to_complete weeks_to_complete=weeks_to_complete
)} )}
</span> </div>
</li> </li>
<li class="item"> <li class="row">
<span class="description"> <div class="label col col-6">
<span class="fa fa-tachometer fa-lg" aria-hidden="true"></span> <span class="fa fa-tachometer fa-lg" aria-hidden="true"></span>
${_('Effort')} <span>${_('Effort')}</span>
</span> </div>
<span> <div class="description col col-6">
${Text(_('{min_hours_effort_per_week}-{max_hours_effort_per_week} hours per week, per course')).format( ${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, max_hours_effort_per_week=max_hours_effort_per_week,
min_hours_effort_per_week=min_hours_effort_per_week min_hours_effort_per_week=min_hours_effort_per_week
)} )}
</span> </div>
</li> </li>
<li class="item"> <li class="row">
<span class="description"> <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> <span class="fa fa-tag fa-lg" aria-hidden="true"></span>
${_('Price (USD)')} <span>${_('Price (USD)')}</span>
</span> </div>
% if program.get('discount_data') and program['discount_data']['is_discounted']: <div class="description col col-6">
<span class="price"> % if program.get('discount_data') and program['discount_data']['is_discounted']:
<span role="group" aria-label="${_('Original Price')}" class="original-price"> <span class="price">
${Text(_('${oldPrice}')).format( <span aria-label="${_('Original Price')}" class="original-price">
oldPrice=full_program_price_format.format(program['discount_data']['total_incl_tax_excl_discounts']) ${Text(_('${oldPrice}')).format(
)} oldPrice=full_program_price_format.format(program['discount_data']['total_incl_tax_excl_discounts'])
)}
</span>
<span aria-label="${_('Discounted Price')}" class="discount green-highlight">
${Text(_('${newPrice}{htmlEnd} for entire program')).format(
newPrice=full_program_price,
htmlEnd=HTML('</span>')
)}
<span class="savings green-highlight">
${Text(_('You save ${discount_value} {currency}')).format(
discount_value=full_program_price_format.format(program['discount_data']['discount_value']),
currency=program['discount_data']['currency']
)}
</span>
</span> </span>
<span role="group" aria-label="${_('Discounted Price')}" class="discount green-highlight"> % else:
${Text(_('${newPrice}{htmlEnd} for entire program')).format( <span>
newPrice=full_program_price, ${Text(_('${full_program_price} for entire program')).format(
htmlEnd=HTML('</span>') full_program_price=full_program_price
)}
<span class="savings green-highlight">
${Text(_('You save ${discount_value} {currency}')).format(
discount_value=full_program_price_format.format(program['discount_data']['discount_value']),
currency=program['discount_data']['currency']
)} )}
</span> </span>
</span> % endif
% else: </div>
<span>
${Text(_('${full_program_price} for entire program')).format(
full_program_price=full_program_price
)}
</span>
% endif
</li> </li>
</ul> </ul>
<div id="accordion-group"> </div>
<div class="accordion-item"> </div>
<div class="accordion-head">${_('Overview')}</div> </div>
<div class="accordion-content"> <hr class="thick_rule">
<p>${HTML(overview)}</p> <div id="courses">
</div> <div class="row">
</div> <div class="col-12">
% if job_outlook_items: <h2>
<div class="accordion-item"> ${_('Courses in the {}').format(
<div class="accordion-head">${_('Job Outlook')}</div> program_type
<div class="accordion-content"> )}
<ul class="list-bulleted list-disc no-indent"> </h2>
% for item in job_outlook_items: </div>
<li>${item}</li> </div>
% endfor % for course in courses:
</ul> <%
</div> course_run = course['course_runs'][0]
</div> 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 % endif
<div class="accordion-item"> </div>
<div class="accordion-head">${_("What You'll Learn")}</div> <div class="col-9 col-lg-6">
<div class="accordion-content"> <div>
<ul class="list-bulleted list-disc no-indent"> <a href="${course_run['course_url']}">${course_run['title']}</a>
% for item in expected_learning_items:
<li>${item}</li>
% endfor
</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')
)}
</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> </div>
<div>${course_run['short_description']}</div>
% try: <div>
<%include file="_${program_type_slug}_faq.html" args="program_type=program_type" /> <a href="${course_run['course_url']}">${_('Learn More')}</a>
% 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>
</div> </div>
</div> </div>
<blockquote class="program-quote visible-sm"> <div class="col-12 col-lg-4 course-enroll">
<div class="quote"> <div>
% if endorsement: ${Text(_('Starts on {}')).format(
<span>"${endorsement_quote}"</span> datetime.strptime(course_run['start'], '%Y-%m-%dT%H:%M:%SZ').strftime('%B %-d, %Y')
% 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
% endif
</div> </div>
</blockquote> % if program.get('is_learner_eligible_for_one_click_purchase') != True:
</div> % if course_run['is_enrollment_open'] and course_run['can_enroll'] and not course_run['is_course_ended']:
<div>
<div class="col col-12 md-col-5 lg-col-4 right-col hidden-sm"> <a class="btn btn-primary btn-block btn-success" href="${course_run['course_url']}about">Enroll Now</a>
<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>
</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>
% else:
<div class="modal modal-custom" id="instructor-details-${index}"> <div>
<a href="#" class="focusKeeper"></a> <a class="btn btn-primary btn-block btn-secondary disabled" href="#" >Not Currently Available</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')
)}
</span>
</h3>
</div>
</div>
<div class="instructor-bio">${HTML(instructor['bio'])}</div>
</div>
<a href="#" class="focusKeeper"></a>
</div> </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>
</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 % endif
</div> % endif
</blockquote> </div>
</div> </div>
% endfor
</div>
<hr class="thick_rule">
<div id="instructors" class="row">
<div class="col-12">
<h2>${_('Instructors')}</h2>
</div> </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>
<div class="instructor-position">${instructor['position']['position']}</div>
<div class="instructor-org">${instructor['position']['organization_name']}</div>
</div>
% endfor
</div> </div>
<hr class="thick_rule">
<div class="container courses-in-program" id="courses"> % if faqs:
<h3 class="hd"> <div id="faqs" class="row faqs">
${Text(_('Courses in the {program_type}')).format( <div class="col-12">
program_type=program_type <h2>${_('Frequently Asked Questions')}</h2>
)} </div>
</h3> % for faq in faqs:
<div class="course-cards"> <div class="col-4 faq">
% for course in courses: <div class="question">
% if course.get('course_runs'): ${faq['question']}
<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>
</div>
</div>
</div> </div>
% endif <div class="answer">
${faq['answer']}
</div>
</div>
% endfor % 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> </div>
</section> % endif
</div> </div>
\ No newline at end of file
openedx/core/djangoapps/catalog/tests/factories.py
...@@ -144,7 +144,7 @@ class PersonFactory(DictFactoryBase): ...@@ -144,7 +144,7 @@ class PersonFactory(DictFactoryBase):
class EndorserFactory(DictFactoryBase): class EndorserFactory(DictFactoryBase):
person = PersonFactory() endorser = PersonFactory()
quote = factory.Faker('sentence') quote = factory.Faker('sentence')
...@@ -157,16 +157,22 @@ class FAQFactory(DictFactoryBase): ...@@ -157,16 +157,22 @@ class FAQFactory(DictFactoryBase):
question = factory.Faker('sentence') 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): class ProgramFactory(DictFactoryBase):
authoring_organizations = factory.LazyFunction(partial(generate_instances, OrganizationFactory, count=1)) authoring_organizations = factory.LazyFunction(partial(generate_instances, OrganizationFactory, count=1))
applicable_seat_types = [] applicable_seat_types = []
banner_image = factory.LazyFunction(generate_sized_stdimage) banner_image = factory.LazyFunction(generate_sized_stdimage)
card_image_url = factory.Faker('image_url') card_image_url = factory.Faker('image_url')
corporate_endorsements = factory.LazyFunction(partial(generate_instances, CorporateEndorsementFactory))
courses = factory.LazyFunction(partial(generate_instances, CourseFactory)) courses = factory.LazyFunction(partial(generate_instances, CourseFactory))
expected_learning_items = factory.LazyFunction(partial(generate_instances, CourseFactory)) expected_learning_items = factory.LazyFunction(partial(generate_instances, CourseFactory))
faq = factory.LazyFunction(partial(generate_instances, FAQFactory)) faq = factory.LazyFunction(partial(generate_instances, FAQFactory))
hidden = False hidden = False
individual_endorsements = factory.LazyFunction(partial(generate_instances, EndorserFactory))
is_program_eligible_for_one_click_purchase = True is_program_eligible_for_one_click_purchase = True
job_outlook_items = factory.LazyFunction(partial(generate_instances, JobOutlookItemFactory)) job_outlook_items = factory.LazyFunction(partial(generate_instances, JobOutlookItemFactory))
marketing_slug = factory.Faker('slug') 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