Rebuild program marketing page in Bootstrap and make it look similar
to the Micromasters page
This commit is contained in:
Matt Tuchfarber
@@ -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)
|
||||
|
||||
|
||||
|
||||
@@ -1,172 +1,6 @@
|
||||
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'
|
||||
});
|
||||
});
|
||||
|
||||
@@ -36,6 +36,3 @@
|
||||
@import 'features/course-search';
|
||||
@import 'features/course-sock';
|
||||
@import 'features/course-upgrade-message';
|
||||
|
||||
// Views
|
||||
@import "views/program-marketing-page";
|
||||
|
||||
@@ -27,3 +27,6 @@
|
||||
@import 'features/course-search';
|
||||
@import 'features/course-sock';
|
||||
@import 'features/course-upgrade-message';
|
||||
|
||||
// Individual Pages
|
||||
@import "views/program-marketing-page";
|
||||
|
||||
@@ -1,1963 +1,191 @@
|
||||
/* 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 {
|
||||
font-size: 16px;
|
||||
|
||||
.program_title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.section_title {
|
||||
margin-bottom: $baseline;
|
||||
color: theme-color("dark");
|
||||
}
|
||||
|
||||
.thick_rule {
|
||||
height: 4px;
|
||||
border: 0;
|
||||
background-color: theme-color('secondary');
|
||||
}
|
||||
|
||||
.main-banner {
|
||||
height: 260px;
|
||||
background: palette(primary, dark);
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
color: white;
|
||||
margin-bottom: 1px;
|
||||
|
||||
@media (max-width: 767px){
|
||||
padding: 0 12px 25px;
|
||||
height: auto;
|
||||
.authoring-org-logo {
|
||||
background-color: $white;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 333px;
|
||||
margin-bottom: 20px;
|
||||
.btn {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin-bottom: 50px
|
||||
.btn,
|
||||
.authoring-org-logo,
|
||||
h1,
|
||||
h2,
|
||||
a {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.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%;
|
||||
#program_video {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.icon {
|
||||
padding-left: 8px;
|
||||
button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&: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;
|
||||
iframe {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: 100%;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
@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%);
|
||||
@include media-breakpoint-down(md) {
|
||||
iframe {
|
||||
margin: 50px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-col,
|
||||
.right-col {
|
||||
@media (min-width: 768px) {
|
||||
padding: 0 0 15px;
|
||||
}
|
||||
.quick-nav {
|
||||
background-color: theme-color('light');
|
||||
margin-bottom: $baseline/2;
|
||||
|
||||
@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;
|
||||
.nav-item {
|
||||
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;
|
||||
.program-info {
|
||||
.quote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.grid-manual {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
.section {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
color: #fff !important;
|
||||
text-transform: none;
|
||||
.facts {
|
||||
border: 1px solid theme-color('dark');
|
||||
|
||||
li {
|
||||
margin: 0 $baseline;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid theme-color('light');
|
||||
|
||||
.label {
|
||||
color: theme-color('dark');
|
||||
}
|
||||
|
||||
.description {
|
||||
.original-price {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.green-highlight {
|
||||
font-size: 18px;
|
||||
color: theme-color('success');
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.label,
|
||||
.description {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
h2 {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
}
|
||||
.course {
|
||||
margin: 50px 0;
|
||||
|
||||
.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%;
|
||||
}
|
||||
.course-image {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
padding-left: 15px;
|
||||
.course-enroll {
|
||||
margin-top: 50px;
|
||||
|
||||
.name {
|
||||
color: palette(primary, dark);
|
||||
font-size: 1em;
|
||||
margin-bottom: 0;
|
||||
|
||||
a{
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
div {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dept {
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
a {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&: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{
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
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: '—';
|
||||
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 {
|
||||
li {
|
||||
margin-bottom: 15px;
|
||||
|
||||
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 {
|
||||
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 {
|
||||
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;
|
||||
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{
|
||||
.footer-logo{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.open-edx-logo{
|
||||
ul{
|
||||
li{
|
||||
text-align: right;
|
||||
|
||||
img{
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
.tint-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 {
|
||||
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;
|
||||
|
||||
.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{
|
||||
@include media-breakpoint-up(lg) {
|
||||
.course-enroll {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.description-container {
|
||||
.expandable{
|
||||
max-height: 224px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-custom{
|
||||
display:none;
|
||||
width: 540px;
|
||||
padding: 30px 30px;
|
||||
left: calc(50% - 270px) !important;
|
||||
#instructors {
|
||||
.instructor {
|
||||
margin: $baseline 0;
|
||||
|
||||
.focusKeeper {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
* {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.rtl .hero.hero-video .tint-dark .grid-container .row .description{
|
||||
padding-right: 1.04167%;
|
||||
}
|
||||
.instructor-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.course-card{
|
||||
.title{
|
||||
small{
|
||||
> span{
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
}
|
||||
.instructor-position {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em){ /* 980px */
|
||||
header.header-main {
|
||||
.nav-collapse {
|
||||
ul {
|
||||
li {
|
||||
padding: 0 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.faqs {
|
||||
margin-bottom: $baseline * 2;
|
||||
|
||||
.hero{
|
||||
&.hero-video .grid-container .row .description .data h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
.footer-logo {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card{
|
||||
.title{
|
||||
small{
|
||||
> span{
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 80em){
|
||||
.footer-main {
|
||||
.footer-logo {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For RTL
|
||||
.rtl {
|
||||
header {
|
||||
&.header-main{
|
||||
.list-inline li{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav-collapse .collapsed-button{
|
||||
left: 20px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero.hero-video .grid-container .row {
|
||||
.description{
|
||||
padding-right: 2%;
|
||||
|
||||
.data {
|
||||
h1 {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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) {
|
||||
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;
|
||||
}
|
||||
|
||||
.title{
|
||||
a{
|
||||
height: auto;
|
||||
max-height: 50px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
color: #005686;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
small{
|
||||
margin-top: 10px;
|
||||
|
||||
> span{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
margin-bottom: 30px;
|
||||
min-height: 75px;
|
||||
max-height: 75px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 66px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header.header-main .list-inline li.user-account ul::before {
|
||||
right: 0.72rem;
|
||||
.question {
|
||||
font-weight: bold;
|
||||
margin-top: $baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
## 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,405 +50,265 @@ 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">
|
||||
% if authoring_organizations and authoring_organizations[0]['logo_image_url']:
|
||||
<img src="${authoring_organizations[0]['logo_image_url']}" alt="${authoring_organizations[0]['name']}">
|
||||
% endif
|
||||
</div>
|
||||
<h1 class="banner-title">${title}</h1>
|
||||
<p class="banner-description">${subtitle}</p>
|
||||
% if program.get('is_learner_eligible_for_one_click_purchase'):
|
||||
<a href="${buy_button_href}" class="btn-brand btn-large btn-start">
|
||||
${_('Purchase the Program')}
|
||||
</a>
|
||||
% else:
|
||||
<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>
|
||||
<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']:
|
||||
<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>
|
||||
<div>
|
||||
<h2>${program['subtitle']}</h2>
|
||||
</div>
|
||||
<div>
|
||||
% if program.get('is_learner_eligible_for_one_click_purchase'):
|
||||
<a href="${buy_button_href}" class="btn btn-success">
|
||||
${_('Purchase the Program')}
|
||||
</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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
% else:
|
||||
<a href="#courses" class="btn btn-success">
|
||||
${_('Start Learning')}
|
||||
</a>
|
||||
% endif
|
||||
</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 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="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="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">
|
||||
<span class="fa fa-tag fa-lg" aria-hidden="true"></span>
|
||||
${_('Price (USD)')}
|
||||
</span>
|
||||
% if program.get('discount_data') and program['discount_data']['is_discounted']:
|
||||
<span class="price">
|
||||
<span role="group" 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">
|
||||
${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>
|
||||
% else:
|
||||
<span>
|
||||
${Text(_('${full_program_price} for entire program')).format(
|
||||
full_program_price=full_program_price
|
||||
)}
|
||||
</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>
|
||||
<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>
|
||||
% 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
|
||||
</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>
|
||||
|
||||
% 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>
|
||||
</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
|
||||
% endif
|
||||
</div>
|
||||
</blockquote>
|
||||
</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>
|
||||
</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')
|
||||
)}
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="instructor-bio">${HTML(instructor['bio'])}</div>
|
||||
</div>
|
||||
<a href="#" class="focusKeeper"></a>
|
||||
</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 class="description col col-6">
|
||||
${Text(_('{number_of_courses} courses in program')).format(
|
||||
number_of_courses=len(courses)
|
||||
)}
|
||||
</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>
|
||||
</li>
|
||||
<li class="row">
|
||||
<div class="label col col-6">
|
||||
<span class="fa fa-tag fa-lg" aria-hidden="true"></span>
|
||||
<span>${_('Price (USD)')}</span>
|
||||
</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
|
||||
</div>
|
||||
</blockquote>
|
||||
<div class="description col col-6">
|
||||
% if program.get('discount_data') and program['discount_data']['is_discounted']:
|
||||
<span class="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 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>
|
||||
% else:
|
||||
<span>
|
||||
${Text(_('${full_program_price} for entire program')).format(
|
||||
full_program_price=full_program_price
|
||||
)}
|
||||
</span>
|
||||
% endif
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="thick_rule">
|
||||
<div id="courses">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2>
|
||||
${_('Courses in the {}').format(
|
||||
program_type
|
||||
)}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
% 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>
|
||||
<div class="col-9 col-lg-6">
|
||||
<div>
|
||||
<a href="${course_run['course_url']}">${course_run['title']}</a>
|
||||
</div>
|
||||
% endif
|
||||
% endfor
|
||||
</div>
|
||||
<span class="pagingInfo"></span>
|
||||
<div>${course_run['short_description']}</div>
|
||||
<div>
|
||||
<a href="${course_run['course_url']}">${_('Learn More')}</a>
|
||||
</div>
|
||||
</div>
|
||||
<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')
|
||||
)}
|
||||
</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>
|
||||
% else:
|
||||
<div>
|
||||
<a class="btn btn-primary btn-block btn-secondary disabled" href="#" >Not Currently Available</a>
|
||||
</div>
|
||||
% endif
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
% endfor
|
||||
</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>
|
||||
<hr class="thick_rule">
|
||||
<div id="instructors" class="row">
|
||||
<div class="col-12">
|
||||
<h2>${_('Instructors')}</h2>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<hr class="thick_rule">
|
||||
% if faqs:
|
||||
<div id="faqs" class="row faqs">
|
||||
<div class="col-12">
|
||||
<h2>${_('Frequently Asked Questions')}</h2>
|
||||
</div>
|
||||
% for faq in faqs:
|
||||
<div class="col-4 faq">
|
||||
<div class="question">
|
||||
${faq['question']}
|
||||
</div>
|
||||
<div class="answer">
|
||||
${faq['answer']}
|
||||
</div>
|
||||
</div>
|
||||
% endfor
|
||||
|
||||
</div>
|
||||
% endif
|
||||
</div>
|
||||
@@ -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')
|
||||
|
||||
Reference in New Issue
Block a user