Skip to content
Snippets Groups Projects
Commit 946421c4 authored by Matt Tuchfarber's avatar Matt Tuchfarber
Browse files

Rebuild program marketing page in Bootstrap and make it look similar 

to the Micromasters page
parent 12e1af27
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 365 additions and 2427 deletions
lms/djangoapps/courseware/views/views.py
+ 2
− 0
View file @ 946421c4
......@@ -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
+ 4
− 170
View file @ 946421c4
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
+ 0
− 3
View file @ 946421c4
......@@ -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
+ 3
− 0
View file @ 946421c4
......@@ -27,3 +27,6 @@
@import 'features/course-search';
@import 'features/course-sock';
@import 'features/course-upgrade-message';
// Individual Pages
@import "views/program-marketing-page";
lms/static/sass/views/_program-marketing-page.scss
+ 109
− 1881
View file @ 946421c4
This diff is collapsed.
lms/templates/courseware/program_marketing.html
+ 239
− 371
View file @ 946421c4
This diff is collapsed.
openedx/core/djangoapps/catalog/tests/factories.py
+ 8
− 2
View file @ 946421c4
......@@ -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')
......
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