Skip to content

E
edx-platform
Commit 3f7d8bc9 by Matt Tuchfarber Committed by GitHub
Options

Merge pull request #16187 from edx/tuchfarber/program_marketing 

Rewrite program marketing page to use Bootstrap and change design to look more like other marketing design
parents 12e1af27 946421c4
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