Merge pull request #15295 from edx/mjevtic/LEARNER-1367
[LEARNER-1367] Move Program Marketing page from private themes repo to edx platform repo
This commit is contained in:
Marko Jevtić
@@ -1001,7 +1001,11 @@ class TestProgramMarketingView(SharedModuleStoreTestCase):
|
||||
course_run = CourseRunFactory(key=unicode(modulestore_course.id)) # pylint: disable=no-member
|
||||
course = CatalogCourseFactory(course_runs=[course_run])
|
||||
|
||||
cls.data = ProgramFactory(uuid=cls.program_uuid, courses=[course])
|
||||
cls.data = ProgramFactory(
|
||||
courses=[course],
|
||||
is_program_eligible_for_one_click_purchase=False,
|
||||
uuid=cls.program_uuid,
|
||||
)
|
||||
|
||||
def test_404_if_no_data(self, mock_cache):
|
||||
"""
|
||||
|
||||
@@ -20,6 +20,7 @@ from django.db.models import Q
|
||||
from django.http import Http404, HttpResponse, HttpResponseBadRequest, HttpResponseForbidden, QueryDict
|
||||
from django.shortcuts import redirect
|
||||
from django.utils.decorators import method_decorator
|
||||
from django.utils.text import slugify
|
||||
from django.utils.timezone import UTC
|
||||
from django.utils.translation import ugettext as _
|
||||
from django.views.decorators.cache import cache_control
|
||||
@@ -832,13 +833,16 @@ def program_marketing(request, program_uuid):
|
||||
raise Http404
|
||||
|
||||
program = ProgramMarketingDataExtender(program_data, request.user).extend()
|
||||
program['type_slug'] = slugify(program['type'])
|
||||
skus = program.get('skus')
|
||||
ecommerce_service = EcommerceService()
|
||||
|
||||
return render_to_response('courseware/program_marketing.html', {
|
||||
'buy_button_href': ecommerce_service.get_checkout_page_url(*skus) if skus else '#courses',
|
||||
'program': program,
|
||||
})
|
||||
context = {'program': program}
|
||||
|
||||
if program.get('is_learner_eligible_for_one_click_purchase') and skus:
|
||||
context['buy_button_href'] = ecommerce_service.get_checkout_page_url(*skus)
|
||||
|
||||
return render_to_response('courseware/program_marketing.html', context)
|
||||
|
||||
|
||||
@transaction.non_atomic_requests
|
||||
|
||||
136
lms/static/js/leanModal.js
Normal file
136
lms/static/js/leanModal.js
Normal file
@@ -0,0 +1,136 @@
|
||||
(function($) { // eslint-disable-line wrap-iife
|
||||
'use strict';
|
||||
$.fn.extend({
|
||||
/*
|
||||
* leanModal prepares an element to be a modal dialog. Call it once on the
|
||||
* element that launches the dialog, when the page is ready. This function
|
||||
* will add a .click() handler that properly opens the dialog.
|
||||
*
|
||||
* The launching element must:
|
||||
* - be an <a> element, not a button,
|
||||
* - have an href= attribute identifying the id of the dialog element,
|
||||
* - have rel='leanModal'.
|
||||
*/
|
||||
leanModal: function(options) {
|
||||
var defaults = {
|
||||
top: 100,
|
||||
overlay: 0.5,
|
||||
closeButton: null,
|
||||
position: 'fixed'
|
||||
};
|
||||
|
||||
options = $.extend(defaults, options); // eslint-disable-line no-param-reassign
|
||||
|
||||
function closeModal(modalId, e) {
|
||||
$('#lean_overlay').fadeOut(200);
|
||||
$('iframe', modalId).attr('src', '');
|
||||
$(modalId).css({display: 'none'});
|
||||
if (modalId === '#modal_clone') {
|
||||
$(modalId).remove();
|
||||
}
|
||||
e.preventDefault();
|
||||
$(document).off('keydown.leanModal');
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
var o = options;
|
||||
|
||||
$(this).click(function(e) {
|
||||
var modalId = $(this).attr('href'),
|
||||
modalClone, modalCloneHtml, notice, $notice;
|
||||
|
||||
$('.modal').hide();
|
||||
|
||||
if ($(modalId).hasClass('video-modal')) {
|
||||
// Video modals need to be cloned before being presented as a modal
|
||||
// This is because actions on the video get recorded in the history.
|
||||
// Deleting the video (clone) prevents the odd back button behavior.
|
||||
modalClone = $(modalId).clone(true, true);
|
||||
modalClone.attr('id', 'modal_clone');
|
||||
modalCloneHtml = edx.HtmlUtils.template(modalClone);
|
||||
$(modalId).after(
|
||||
edx.HtmlUtils.ensureHtml(modalCloneHtml).toString()
|
||||
);
|
||||
modalId = '#modal_clone';
|
||||
}
|
||||
|
||||
$(document).on('keydown.leanModal', function(event) {
|
||||
if (event.which === 27) {
|
||||
closeModal(modalId, event);
|
||||
}
|
||||
});
|
||||
|
||||
$('#lean_overlay').click(function(ev) {
|
||||
closeModal(modalId, ev);
|
||||
});
|
||||
|
||||
$(o.closeButton).click(function(ev) {
|
||||
closeModal(modalId, ev);
|
||||
});
|
||||
|
||||
// To enable closing of email modal when copy button hit
|
||||
$(o.copyEmailButton).click(function(ev) {
|
||||
closeModal(modalId, ev);
|
||||
});
|
||||
|
||||
$('#lean_overlay').css({display: 'block', opacity: 0});
|
||||
$('#lean_overlay').fadeTo(200, o.overlay);
|
||||
|
||||
$('iframe', modalId).attr('src', $('iframe', modalId).data('src'));
|
||||
if ($(modalId).hasClass('email-modal')) {
|
||||
$(modalId).css({
|
||||
width: 80 + '%',
|
||||
height: 80 + '%',
|
||||
position: o.position,
|
||||
opacity: 0,
|
||||
'z-index': 11000,
|
||||
left: 10 + '%',
|
||||
top: 10 + '%'
|
||||
});
|
||||
} else {
|
||||
$(modalId).css({
|
||||
position: o.position,
|
||||
opacity: 0,
|
||||
'z-index': 11000,
|
||||
left: 50 + '%',
|
||||
'margin-left': -($(modalId).outerWidth() / 2) + 'px',
|
||||
top: o.top + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
$(modalId).show().fadeTo(200, 1);
|
||||
$(modalId).find('.notice').hide()
|
||||
.html('');
|
||||
notice = $(this).data('notice');
|
||||
if (notice !== undefined) {
|
||||
$notice = $(modalId).find('.notice');
|
||||
$notice.show().text(notice);
|
||||
// This is for activating leanModal links that were in the notice.
|
||||
// We should have a cleaner way of allowing all dynamically added leanmodal links to work.
|
||||
$notice.find('a[rel*=leanModal]').leanModal({
|
||||
top: 120,
|
||||
overlay: 1,
|
||||
closeButton: '.close-modal',
|
||||
position: 'absolute'
|
||||
});
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function($) { // eslint-disable-line no-shadow
|
||||
$('button[rel*=leanModal]').each(function() {
|
||||
var sep, embed;
|
||||
|
||||
$(this).leanModal({top: 120, overlay: 1, closeButton: '.close-modal', position: 'absolute'});
|
||||
embed = $($(this).attr('href')).find('iframe');
|
||||
if (embed.length > 0 && embed.attr('src')) {
|
||||
sep = (embed.attr('src').indexOf('?') > 0) ? '&' : '?';
|
||||
embed.data('src', embed.attr('src') + sep + 'autoplay=1&rel=0');
|
||||
embed.attr('src', '');
|
||||
}
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
172
lms/static/js/program_marketing.js
Normal file
172
lms/static/js/program_marketing.js
Normal file
@@ -0,0 +1,172 @@
|
||||
function initializeCourseSlider() {
|
||||
'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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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'
|
||||
});
|
||||
});
|
||||
18
lms/static/js/slick.min.js
vendored
Normal file
18
lms/static/js/slick.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -28,3 +28,6 @@
|
||||
@import 'features/course-experience';
|
||||
@import 'features/course-search';
|
||||
@import 'features/course-sock';
|
||||
|
||||
// Views
|
||||
@import "views/program-marketing-page";
|
||||
|
||||
1739
lms/static/sass/views/_program-marketing-page.scss
Normal file
1739
lms/static/sass/views/_program-marketing-page.scss
Normal file
@@ -0,0 +1,1739 @@
|
||||
/* Box shadow mixin */
|
||||
// example: @include box-shadow( 2px, 3px, 6px, rgba(0, 0, 0, 0.3) );
|
||||
@mixin box-shadow($x, $y, $blur, $color, $inset: false) {
|
||||
@if $inset {
|
||||
-webkit-box-shadow: inset $x $y $blur $color;
|
||||
-moz-box-shadow: inset $x $y $blur $color;
|
||||
box-shadow: inset $x $y $blur $color;
|
||||
} @else {
|
||||
-webkit-box-shadow: $x $y $blur $color;
|
||||
-moz-box-shadow: $x $y $blur $color;
|
||||
box-shadow: $x $y $blur $color;
|
||||
}
|
||||
}
|
||||
|
||||
#program-details-page {
|
||||
.main-banner {
|
||||
height: 260px;
|
||||
background: palette(primary, dark);
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
@media(max-width: 767px){
|
||||
padding: 0 12px 25px;
|
||||
height: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
height: 333px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
margin-bottom: 50px
|
||||
}
|
||||
|
||||
.btn-play {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin-left: -moz-calc((100% - 74px) / 2);
|
||||
margin-left: -webkit-calc((100% - 74px) / 2);
|
||||
margin-left: calc((100% - 74px) / 2);
|
||||
margin-top: 125px;
|
||||
margin-bottom: 94px;
|
||||
height: 74px;
|
||||
width: 74px;
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: 4px solid #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
.icon {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.org-logo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
background: rgba(255, 255, 255, .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: 0px 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: #4a4a4a;
|
||||
font-size: .85em;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
li {
|
||||
padding-left: 0 !important;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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: .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: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#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: 0px;
|
||||
@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: palette(primary, dark);
|
||||
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: palette(primary, dark);
|
||||
margin-bottom: 5px;
|
||||
@media (max-width: 767px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
font-size: .85em;
|
||||
@media (max-width: 767px) {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
width: 48%;
|
||||
color: palette(primary, dark);
|
||||
margin-bottom: 0;
|
||||
font-size: 1.024em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 0px 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: .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: $black;
|
||||
}
|
||||
}
|
||||
&.expanded {
|
||||
a:before {
|
||||
content: "\f107";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ui-state-default .ui-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//Modals
|
||||
.modal {
|
||||
border-radius: 0px !important;
|
||||
background: #FFFFFF !important;
|
||||
|
||||
.inner-wrapper {
|
||||
padding: 0px !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: .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{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.description-container{
|
||||
.expandable{
|
||||
max-height: 224px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-custom{
|
||||
display:none;
|
||||
width: 540px;
|
||||
padding: 30px 30px;
|
||||
left: calc(50% - 270px) !important;
|
||||
.focusKeeper {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal-body{
|
||||
.modal-header{
|
||||
display: table;
|
||||
width: 100%;
|
||||
.instructor-data{
|
||||
display: table-row;
|
||||
.thumbnail{
|
||||
display: table-cell;
|
||||
width: 25%;
|
||||
padding-bottom: 0;
|
||||
img{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
h3{
|
||||
display: table-cell;
|
||||
width: 65%;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links{
|
||||
a{
|
||||
margin-right: 1.5rem;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rtl .hero.hero-video .tint-dark .grid-container .row .description{
|
||||
padding-right: 1.04167%;
|
||||
}
|
||||
.course-card{
|
||||
.title{
|
||||
small{
|
||||
> span{
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em){ /* 980px */
|
||||
header.header-main {
|
||||
.nav-collapse {
|
||||
ul {
|
||||
li {
|
||||
padding: 0 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hero{
|
||||
&.hero-video .grid-container .row .description .data h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,424 @@
|
||||
<%page expression_filter="h"/>
|
||||
<%inherit file="../main.html"/>
|
||||
<%!
|
||||
from datetime import datetime
|
||||
|
||||
## This page is intentionally left blank. You can add your own program marketing page using comprehensive theming (http://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/changing_appearance/theming/enable_themes.html?highlight=theming).
|
||||
from django.core.urlresolvers import reverse
|
||||
from django.utils.translation import ugettext as _
|
||||
from mako import exceptions
|
||||
|
||||
from openedx.core.djangolib.markup import HTML, Text
|
||||
%>
|
||||
|
||||
<%namespace name='static' file='../static_content.html'/>
|
||||
|
||||
<%
|
||||
faq = program['faq']
|
||||
program_type = program['type']
|
||||
program_type_slug = program['type_slug']
|
||||
title = program['title']
|
||||
status = program['status']
|
||||
courses = program['courses']
|
||||
subtitle = program['subtitle']
|
||||
overview = program['overview']
|
||||
instructors = program['instructors']
|
||||
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', '')
|
||||
expected_learning_items = program['expected_learning_items']
|
||||
authoring_organizations = program['authoring_organizations']
|
||||
min_hours_effort_per_week = program['min_hours_effort_per_week']
|
||||
max_hours_effort_per_week = program['max_hours_effort_per_week']
|
||||
video_url = (program.get('video', {}) or {}).get('src', '')
|
||||
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 hidden-sm btn-start">
|
||||
${Text(_('Buy the {program_name} (${price} USD)')).format(
|
||||
program_name=title,
|
||||
price=program['price_ranges'][0]['total']
|
||||
)}
|
||||
</a>
|
||||
% else:
|
||||
<a href="#courses" class="btn-brand btn-large hidden-sm 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 Course Trailer')}</span>
|
||||
</a>
|
||||
<div class="hidden-sm">
|
||||
<button href="#video-modal" class="media btn-play" rel="leanModal">
|
||||
<span class="sr">Play the ${title} program video</span>
|
||||
<i class="icon fa fa-2x fa-play" alt="${_('Play')}"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
<span class="fa fa-clock-o fa-lg" aria-hidden="true"></span>
|
||||
${_('Average Length')}
|
||||
</span>
|
||||
<span>
|
||||
${Text(_('{weeks_to_complete} weeks per course')).format(
|
||||
weeks_to_complete=weeks_to_complete
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
<li class="item">
|
||||
<span>
|
||||
<span class="fa fa-tachometer fa-lg" aria-hidden="true"></span>
|
||||
${_('Effort')}
|
||||
</span>
|
||||
<span>
|
||||
${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>
|
||||
</li>
|
||||
<li class="item">
|
||||
<span>
|
||||
<span class="fa fa-tag fa-lg" aria-hidden="true"></span>
|
||||
${_('Price (USD)')}
|
||||
</span>
|
||||
<span>
|
||||
${Text(_('${full_program_price} for entire program')).format(
|
||||
full_program_price=full_program_price
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="accordion-group">
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-head">${_('Overview')}</div>
|
||||
<div class="accordion-content">
|
||||
<p>${overview}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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">${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 and endorsement_image:
|
||||
<img class="visible-sm pull-left" src="${endorsement_image}" width="40" height="40" alt="${_('Endorser Image')}"/>
|
||||
<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">${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>
|
||||
<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
|
||||
</div>
|
||||
</blockquote>
|
||||
</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>
|
||||
</div>
|
||||
% endif
|
||||
% endfor
|
||||
</div>
|
||||
<span class="pagingInfo"></span>
|
||||
</div>
|
||||
|
||||
<section id="video-modal" class="modal modal-custom custom-video-modal">
|
||||
<div class="inner-wrapper">
|
||||
<iframe title="${_('YouTube Video')}" width="640" height="360"
|
||||
src="${video_url}"
|
||||
frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -886,6 +886,18 @@ class TestProgramMarketingDataExtender(ModuleStoreTestCase):
|
||||
self.assertEqual(data['full_program_price'], program_full_price)
|
||||
self.assertEqual(data['avg_price_per_course'], program_full_price / self.number_of_courses)
|
||||
|
||||
def test_course_pricing_when_all_course_runs_have_no_seats(self):
|
||||
course = ModuleStoreCourseFactory()
|
||||
course = self.update_course(course, self.user.id)
|
||||
course_run = CourseRunFactory(key=unicode(course.id), seats=[])
|
||||
program = ProgramFactory(courses=[CourseFactory(course_runs=[course_run])])
|
||||
|
||||
data = ProgramMarketingDataExtender(program, self.user).extend()
|
||||
|
||||
self.assertEqual(data['number_of_courses'], len(program['courses']))
|
||||
self.assertEqual(data['full_program_price'], 0.0)
|
||||
self.assertEqual(data['avg_price_per_course'], 0.0)
|
||||
|
||||
@ddt.data(True, False)
|
||||
@mock.patch(UTILS_MODULE + '.has_access')
|
||||
def test_can_enroll(self, can_enroll, mock_has_access):
|
||||
|
||||
@@ -504,9 +504,9 @@ class ProgramMarketingDataExtender(ProgramDataExtender):
|
||||
self.instructors = {}
|
||||
|
||||
# Values for programs' price calculation.
|
||||
self.data['avg_price_per_course'] = 0
|
||||
self.data['avg_price_per_course'] = 0.0
|
||||
self.data['number_of_courses'] = 0
|
||||
self.data['full_program_price'] = 0
|
||||
self.data['full_program_price'] = 0.0
|
||||
|
||||
def _extend_program(self):
|
||||
"""Aggregates data from the program data structure."""
|
||||
|
||||
Reference in New Issue
Block a user