From 946421c43846bed1304eaf7940afe454e2425378 Mon Sep 17 00:00:00 2001 From: Matt Tuchfarber Date: Tue, 19 Sep 2017 14:02:13 -0400 Subject: [PATCH] Rebuild program marketing page in Bootstrap and make it look similar to the Micromasters page --- lms/djangoapps/courseware/views/views.py | 2 + lms/static/js/program_marketing.js | 174 +- lms/static/sass/_build-lms-v2.scss | 3 - lms/static/sass/bootstrap/lms-main.scss | 3 + .../sass/views/_program-marketing-page.scss | 2026 ++--------------- .../courseware/program_marketing.html | 632 ++--- .../djangoapps/catalog/tests/factories.py | 10 +- 7 files changed, 394 insertions(+), 2456 deletions(-) diff --git a/lms/djangoapps/courseware/views/views.py b/lms/djangoapps/courseware/views/views.py index 6ed25fd022..57b29386a0 100644 --- a/lms/djangoapps/courseware/views/views.py +++ b/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) diff --git a/lms/static/js/program_marketing.js b/lms/static/js/program_marketing.js index 955fb51a71..c01a5717f6 100644 --- a/lms/static/js/program_marketing.js +++ b/lms/static/js/program_marketing.js @@ -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 elements, one before the instructor modal and one after. - // When reaching the first , we focus the last element in the dialog. - // If there is no focusable element, we focus the close button. - // When focusing the last , 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' - }); -}); diff --git a/lms/static/sass/_build-lms-v2.scss b/lms/static/sass/_build-lms-v2.scss index 100e4b6637..26516c983b 100644 --- a/lms/static/sass/_build-lms-v2.scss +++ b/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"; diff --git a/lms/static/sass/bootstrap/lms-main.scss b/lms/static/sass/bootstrap/lms-main.scss index 9f2b7a6230..d7f7107c87 100644 --- a/lms/static/sass/bootstrap/lms-main.scss +++ b/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"; diff --git a/lms/static/sass/views/_program-marketing-page.scss b/lms/static/sass/views/_program-marketing-page.scss index d3c56ab9ab..b60cf3fd50 100644 --- a/lms/static/sass/views/_program-marketing-page.scss +++ b/lms/static/sass/views/_program-marketing-page.scss @@ -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; } } } diff --git a/lms/templates/courseware/program_marketing.html b/lms/templates/courseware/program_marketing.html index a02e8ef7cd..592e3e4d7c 100644 --- a/lms/templates/courseware/program_marketing.html +++ b/lms/templates/courseware/program_marketing.html @@ -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"> - - <%block name="pagetitle">${program['title']} - -
-
-
-
-
- -

${title}

- - % if program.get('is_learner_eligible_for_one_click_purchase'): - - ${_('Purchase the Program')} - - % else: - - ${_('Start Learning')} - - % endif -
-
- - - ${_('View Program Trailer')} +
+
+
+ % if authoring_organizations and authoring_organizations[0]['logo_image_url']: +
+ +
+ % endif +
+

${program['title']}

+
+
+

${program['subtitle']}

+
+ + % else: + + ${_('Start Learning')} + + % endif +
+
+
+
+ +
- -
-
-
-
    -
  • - - - ${_('Number of Courses')} - - - ${Text(_('{number_of_courses} courses in program')).format( - number_of_courses=len(courses) - )} - -
    • -
  • - +
    + +
    +
    +
    +
    +

    ${HTML(program['overview'])}

    +
    +
    + % if job_outlook_items: +

    ${_('Job Outlook')}

    +

    +

      + % for item in job_outlook_items: +
    • ${item}
      • + % endfor +
    +

    + % endif +
    +
    + % if endorsement: +

    ${_('Real Career Impact')}

    +

    + +

    +

    "${endorsement_quote}"

    +
    + ${endorser_name}, ${endorser_title}, ${endorser_org} +
    +
    +

    + %endif +
    +
    +
    +
    + % if expected_learning_items: +

    +

    ${_('What You\'ll Learn')}

    +
      + % for item in expected_learning_items: +
    • ${item}
      • + % endfor +
    +

    + %endif +
    +
    +
    +
    +
      +
    • +
      - ${_('Average Length')} - - + ${_('Average Length')} +
      +
      ${Text(_('{weeks_to_complete} weeks per course')).format( weeks_to_complete=weeks_to_complete )} - +
      • -
    • - +
    • +
      - ${_('Effort')} - - + ${_('Effort')} +
      +
      ${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 )} - +
      • -
    • - - - ${_('Price (USD)')} - - % if program.get('discount_data') and program['discount_data']['is_discounted']: - - - ${Text(_('${oldPrice}')).format( - oldPrice=full_program_price_format.format(program['discount_data']['total_incl_tax_excl_discounts']) - )} - - - ${Text(_('${newPrice}{htmlEnd} for entire program')).format( - newPrice=full_program_price, - htmlEnd=HTML('') - )} - - ${Text(_('You save ${discount_value} {currency}')).format( - discount_value=full_program_price_format.format(program['discount_data']['discount_value']), - currency=program['discount_data']['currency'] - )} - - - % else: - - ${Text(_('${full_program_price} for entire program')).format( - full_program_price=full_program_price - )} - - % endif -
      • -
    -
    -
    -
    ${_('Overview')}
    -
    -

    ${HTML(overview)}

    +
  • +
    + + ${_('Number of Courses')}
    -
- % if job_outlook_items: -
-
${_('Job Outlook')}
-
-
    - % for item in job_outlook_items: -
  • ${item}
    • - % endfor -
-
-
- % endif -
-
${_("What You'll Learn")}
-
-
    - % for item in expected_learning_items: -
  • ${item}
    • - % endfor -
-
-
-
-
${_("Instructors")}
-
-
- <% index = 0 %> - % for instructor in instructors: - <% index += 1 %> -
-
-
- - ${instructor.get('name')} - -
-
-
-
- ${instructor.get('name')} -
- % if instructor.get('position'): -
${instructor['position'].get('organization_name')}
- % endif -
- -
- %endfor -
-
-
- - % try: - <%include file="_${program_type_slug}_faq.html" args="program_type=program_type" /> - % except exceptions.TemplateLookupException: - ## pass - % endtry - -
-
${_("FAQ")}
-
- -
-
-
-
-
- % if endorsement: - "${endorsement_quote}" - % if endorser: - % if endorsement_image: - ${_('Endorser Image')} - % endif - - ${endorsement_name}, - ${endorsement_position}, - ${endorsement_organization} - - % endif - % endif -
-
-
- - - -
-

- ${Text(_('Courses in the {program_type}')).format( - program_type=program_type - )} -

-
- % for course in courses: - % if course.get('course_runs'): -
-
-
-

- ${course['title']} - - - - ${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') - )} - - - % if course['course_runs'][0]['pacing_type'] == "instructor_paced": - ${_('Instructor - Paced')} - % else: - ${_('Self - Paced')} - % endif - -

-

- % if course['course_runs'][0]['short_description']: - ${course['course_runs'][0]['short_description']} - % endif -

-

- % 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 -

-
-
+
+
+
+
+

+ ${_('Courses in the {}').format( + program_type + )} +

+
+
+ % for course in courses: + <% + course_run = course['course_runs'][0] + course_img = course_run.get('image') + %> +
+
+ % if course_img: + + % endif +
+
+ - % endif - % endfor -
- +
${course_run['short_description']}
+ +
+
+
+ ${Text(_('Starts on {}')).format( + datetime.strptime(course_run['start'], '%Y-%m-%dT%H:%M:%SZ').strftime('%B %-d, %Y') + )} +
+ % 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']: + + % else: + + % endif + % endif +
+
+ % endfor
- - -
+ % for instructor in instructors: +
+
+ +
+
${instructor['name']}
+
${instructor['position']['position']}
+
${instructor['position']['organization_name']}
+
+ % endfor +
+
+ % if faqs: +
+
+

${_('Frequently Asked Questions')}

+
+ % for faq in faqs: +
+
+ ${faq['question']} +
+
+ ${faq['answer']} +
+
+ % endfor + +
+ % endif +
\ No newline at end of file diff --git a/openedx/core/djangoapps/catalog/tests/factories.py b/openedx/core/djangoapps/catalog/tests/factories.py index 82156f157d..945f56b3ec 100644 --- a/openedx/core/djangoapps/catalog/tests/factories.py +++ b/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')