From 6028cc7d729dd15b41e52afe444fc504ef9693b3 Mon Sep 17 00:00:00 2001 From: Matt Tuchfarber Date: Mon, 12 Feb 2018 14:16:19 -0500 Subject: [PATCH 1/2] Add instructor modal to program marketing page The Paragon+Bootstrap work wasn't ready yet, so this is using leanModal. This also cleans up some of the instructor formatting. --- lms/static/js/program_marketing.js | 15 ++++ .../sass/views/_program-marketing-page.scss | 61 +++++++++++-- .../courseware/program_marketing.html | 86 +++++++++++++------ 3 files changed, 131 insertions(+), 31 deletions(-) diff --git a/lms/static/js/program_marketing.js b/lms/static/js/program_marketing.js index c01a5717f6..87cceee687 100644 --- a/lms/static/js/program_marketing.js +++ b/lms/static/js/program_marketing.js @@ -4,3 +4,18 @@ function playVideo(src) { document.querySelector('#program_video iframe').style = 'display:block;'; document.querySelector('#program_video iframe').src = src; } +$(".instructor-image, .instructor-label").leanModal({closeButton: ".modal_close", top: '10%'}); +// Create MutationObserver which prevents the body of +// the page from scrolling when a modal window is displayed +var observer = new MutationObserver(function(mutations, obv){ + mutations.forEach(function(mutation) { + if ($(mutation.target).css('display') === 'block') { + $('body').css('overflow','hidden'); + } else { + $('body').css('overflow', 'auto'); + } + }); +}); +$('.modal').each(function(index, element){ + observer.observe(element, {attributes: true, attributeFilter:['style']}); +}); \ No newline at end of file diff --git a/lms/static/sass/views/_program-marketing-page.scss b/lms/static/sass/views/_program-marketing-page.scss index 19d09e0679..e7d807cee7 100644 --- a/lms/static/sass/views/_program-marketing-page.scss +++ b/lms/static/sass/views/_program-marketing-page.scss @@ -1,3 +1,7 @@ +.content-wrapper{ + margin-left: auto; + margin-right: auto; +} #program-details-hero { .program_title { font-weight: bold; @@ -172,25 +176,33 @@ #instructors { .instructor { margin: $baseline 0; - - * { - text-align: center; - margin: auto; - } + display: flex; + flex-direction: column; + align-items: center; img { + display: block; height: 100px; width: 100px; border-radius: 100px; + margin: auto; } .instructor-name { font-weight: bold; } - .instructor-position { + .instructor-org { font-weight: bold; } + + .instructor-bio-toggle { + margin-top: 5px; + } + + .hidden { + display: none; + } } } @@ -202,4 +214,41 @@ margin-top: $baseline; } } + + a:focus, a:active { + text-decoration: none; + outline: 0; + } + .modal-custom { + max-width: 500px; + max-height: 80%; + width: 90%; + top: 10%; + bottom: unset; + right: 0 !important; + left: 0 !important; + margin-left: auto !important; + margin-right: auto !important; + background-color: #fff; + overflow: auto; + + .modal-header{ + padding-top: 0px; + justify-content: center; + text-align: center; + } + + .instructor-bio { + padding: 10px 0; + } + .btn-close.modal_close { + text-align: right; + + i{ + font-size: 28px; + cursor: pointer; + padding: 5px; + } + } + } } diff --git a/lms/templates/courseware/program_marketing.html b/lms/templates/courseware/program_marketing.html index 2b7f1133d3..a2e1b8c069 100644 --- a/lms/templates/courseware/program_marketing.html +++ b/lms/templates/courseware/program_marketing.html @@ -50,6 +50,7 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme %> <%block name="js_extra"> + @@ -130,31 +131,33 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme -
+
- +
+ +
-
+
@@ -341,14 +344,47 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme

${_('Instructors')}

% for instructor in instructors: -
-
+ <% + instructor_hash = hash(instructor['name']) + %> +
+ + + +
${instructor['name']}
+ + % if instructor.get('title'): +
${instructor['title']}
+ % endif + % if instructor.get('organization'): +
${instructor['organization']}
+ % endif + % if instructor.get('bio'): +
+
+ +
-
${instructor['name']}
- % if instructor.get('position'): -
${instructor['position'].get('position')}
-
${instructor['position'].get('organization_name')}
% endif
% endfor From a20e797f9428b765bdb7045d323a4a3c170f3e26 Mon Sep 17 00:00:00 2001 From: Matt Tuchfarber Date: Thu, 15 Feb 2018 15:34:46 -0500 Subject: [PATCH 2/2] Fix Stylelint errors --- .../sass/views/_program-marketing-page.scss | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/lms/static/sass/views/_program-marketing-page.scss b/lms/static/sass/views/_program-marketing-page.scss index e7d807cee7..f5fb5b3109 100644 --- a/lms/static/sass/views/_program-marketing-page.scss +++ b/lms/static/sass/views/_program-marketing-page.scss @@ -1,7 +1,8 @@ -.content-wrapper{ +.content-wrapper { margin-left: auto; margin-right: auto; } + #program-details-hero { .program_title { font-weight: bold; @@ -26,6 +27,7 @@ .btn { font-size: 20px; font-weight: $font-weight-bold; + .original-price { text-decoration: line-through; font-weight: $font-weight-normal; @@ -215,10 +217,12 @@ } } - a:focus, a:active { + a:focus, + a:active { text-decoration: none; outline: 0; } + .modal-custom { max-width: 500px; max-height: 80%; @@ -231,9 +235,9 @@ margin-right: auto !important; background-color: #fff; overflow: auto; - - .modal-header{ - padding-top: 0px; + + .modal-header { + padding-top: 0; justify-content: center; text-align: center; } @@ -241,14 +245,15 @@ .instructor-bio { padding: 10px 0; } + .btn-close.modal_close { text-align: right; - i{ + i { font-size: 28px; cursor: pointer; padding: 5px; } } - } + } }