Skip to content

E
edx-platform
Commit 946421c4 by Matt Tuchfarber
Options

Rebuild program marketing page in Bootstrap and make it look similar 

to the Micromasters page
parent 12e1af27
Showing with 17 additions and 175 deletions
lms/djangoapps/courseware/views/views.py
......@@ -864,6 +864,8 @@ def program_marketing(request, program_uuid):
if program.get('is_learner_eligible_for_one_click_purchase') and skus:
context['buy_button_href'] = ecommerce_service.get_checkout_page_url(*skus)
context['uses_bootstrap'] = True
return render_to_response('courseware/program_marketing.html', context)
......
lms/static/js/program_marketing.js
function initializeCourseSlider() {
function playVideo(src) {
'use strict';
var isMobileResolution = $(window).width() <= 767,
sliderExists = $('.course-slider-xs').hasClass('slick-slider');
$('.course-card').toggleClass('slidable', isMobileResolution);
if (isMobileResolution) { // Second condition will avoid the multiple calls from resize
$('.copy-meta-mobile').show();
$('.copy-meta').hide();
if (!sliderExists) {
$('.course-slider-xs').slick({
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
});
}
} else {
$('.copy-meta').show();
$('.copy-meta-mobile').hide();
if (sliderExists) {
$('.course-slider-xs').slick('unslick');
$('.course-slider-xs').html();
$('.slick-arrow, .pageInfo').hide();
}
}
document.querySelector('#program_video button').style = 'display:none;';
document.querySelector('#program_video iframe').style = 'display:block;';
document.querySelector('#program_video iframe').src = src;
}
function paginate(page, size, total) {
'use strict';
var start = size * page,
end = (start + size - 1) >= total ? total - 1 : (start + size - 1);
$('.profile-item-desktop').each(function(index, item) {
if (index >= start && index <= end) {
$(item).css('display', 'block');
} else {
$(item).css('display', 'none');
}
});
$('.pagination-start').text(start + 1);
$('.pagination-end').text(end + 1);
}
$.fn.getFocusableChildren = function() {
'use strict';
return $(this)
/* eslint max-len: 0 */
.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object:not([disabled]), embed, *[tabindex], *[contenteditable]')
.filter(':visible');
};
$(document).ready(function() {
'use strict';
// Create MutationObserver which prevents the body of
// the page from scrolling when a modal window is displayed
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if ($(mutation.target).css('display') === 'block') {
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'auto');
}
});
});
// Custom function showing current slide
var $status = $('.pagingInfo');
var $slickElement = $('.course-slider-xs');
// Instructor pagination
var page = 0,
size = 4,
total = parseInt($('.instructor-size').text(), 10),
maxPages = Math.ceil(total / size) - 1;
paginate(page, size, total);
initializeCourseSlider();
// In order to restrict focus, we added two pseudo <a> elements, one before the instructor modal and one after.
// When reaching the first <a>, we focus the last element in the dialog.
// If there is no focusable element, we focus the close button.
// When focusing the last <a>, we focus the first control in the dialog.
$('.focusKeeper:even').on('focus', function(event) {
event.preventDefault();
if ($(this).parent().find('.modal-body')
.getFocusableChildren().length) {
$(this).parent().find('.modal-body')
.getFocusableChildren()
.filter(':last')
.focus();
} else {
$(this).parent().find('.modal_close a')
.focus();
}
});
$('.focusKeeper:odd').on('focus', function(event) {
event.preventDefault();
$(this).parent().find('.modal_close a')
.focus();
});
$(window).resize(function() {
initializeCourseSlider();
});
// Initialize instructor bio modals
$('.instructor-image, .instructor-label').leanModal({closeButton: '.modal_close', top: '10%'});
$('.modal').each(function(index, element) {
observer.observe(element, {attributes: true, attributeFilter: ['style']});
});
$slickElement.on('init reInit afterChange', function(event, slick, currentSlide) {
// currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = currentSlide || 1;
$status.text(i + ' of ' + slick.slideCount);
});
// Initialize FAQ
$('ul.faq-links-list li.item').click(function() {
if ($(this).find('.answer').hasClass('hidden')) {
$(this).find('.answer').removeClass('hidden');
$(this).addClass('expanded');
} else {
$(this).find('.answer').addClass('hidden');
$(this).removeClass('expanded');
}
});
if (page < maxPages) {
$('#pagination-next').addClass('active');
$('#pagination-next > span.sr').attr('aria-hidden', 'false');
}
$('#pagination-next').click(function() {
if (page === maxPages) {
return false;
}
if (page + 1 === maxPages) {
$(this).removeClass('active');
$(this).children('span.sr').attr('aria-hidden', 'true');
}
page = page + 1;
paginate(page, size, total);
$('#pagination-previous').addClass('active');
$('#pagination-previous > span.sr').attr('aria-hidden', 'false');
return false;
});
$('#pagination-previous').click(function() {
if (page === 0) {
return false;
}
if (page - 1 === 0) {
$(this).removeClass('active');
$(this).children('span.sr').attr('aria-hidden', 'true');
}
page = page - 1;
paginate(page, size, total);
$('#pagination-next').addClass('active');
$('#pagination-next > span.sr').attr('aria-hidden', 'false');
return false;
});
$('#accordion-group').accordion({
header: '> .accordion-item > .accordion-head',
collapsible: true,
active: false,
heightStyle: 'content'
});
});
lms/static/sass/_build-lms-v2.scss
......@@ -36,6 +36,3 @@
@import 'features/course-search';
@import 'features/course-sock';
@import 'features/course-upgrade-message';
// Views
@import "views/program-marketing-page";
lms/static/sass/bootstrap/lms-main.scss
......@@ -27,3 +27,6 @@
@import 'features/course-search';
@import 'features/course-sock';
@import 'features/course-upgrade-message';
// Individual Pages
@import "views/program-marketing-page";
openedx/core/djangoapps/catalog/tests/factories.py
......@@ -144,7 +144,7 @@ class PersonFactory(DictFactoryBase):
class EndorserFactory(DictFactoryBase):
person = PersonFactory()
endorser = PersonFactory()
quote = factory.Faker('sentence')
......@@ -157,16 +157,22 @@ class FAQFactory(DictFactoryBase):
question = factory.Faker('sentence')
class CorporateEndorsementFactory(DictFactoryBase):
corporation_name = factory.Faker('company')
image = ImageFactory()
individual_endorsements = factory.LazyFunction(partial(generate_instances, EndorserFactory))
class ProgramFactory(DictFactoryBase):
authoring_organizations = factory.LazyFunction(partial(generate_instances, OrganizationFactory, count=1))
applicable_seat_types = []
banner_image = factory.LazyFunction(generate_sized_stdimage)
card_image_url = factory.Faker('image_url')
corporate_endorsements = factory.LazyFunction(partial(generate_instances, CorporateEndorsementFactory))
courses = factory.LazyFunction(partial(generate_instances, CourseFactory))
expected_learning_items = factory.LazyFunction(partial(generate_instances, CourseFactory))
faq = factory.LazyFunction(partial(generate_instances, FAQFactory))
hidden = False
individual_endorsements = factory.LazyFunction(partial(generate_instances, EndorserFactory))
is_program_eligible_for_one_click_purchase = True
job_outlook_items = factory.LazyFunction(partial(generate_instances, JobOutlookItemFactory))
marketing_slug = factory.Faker('slug')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment