Merge pull request #16683 from edx/tuchfarber/add_intructor_bio_program_marketing

Add intructor bio program marketing

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']});
+});

lms/static/sass/views/_program-marketing-page.scss

@@ -1,3 +1,8 @@
+.content-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 #program-details-hero {
   .program_title {
     font-weight: bold;
@@ -22,6 +27,7 @@
     .btn {
       font-size: 20px;
       font-weight: $font-weight-bold;
+
       .original-price {
         text-decoration: line-through;
         font-weight: $font-weight-normal;
@@ -172,25 +178,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 +216,44 @@
       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: 0;
+      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;
+      }
+    }
+  }
 }

lms/templates/courseware/program_marketing.html

@@ -50,6 +50,7 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
 %>
 
 <%block name="js_extra">
+  <script src="${static.url('js/leanModal.js')}"></script>
   <script src="${static.url('js/program_marketing.js')}"></script>
 </%block>
 
@@ -130,31 +131,33 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
         </div>
       </div>
     </div>
-    <div class="row quick-nav">
+    <div class="quick-nav">
       <div class="container">
-        <ul class="nav nav-fill col-lg-12">
-          % if courses:
-          <li class="nav-item">
-            <a class="nav-link" href="#courses">${_('View Courses')}</a>
-          </li>
-          % endif
-          % if instructors:
-          <li class="nav-item">
-            <a class="nav-link" href="#instructors">${_('Meet the Instructors')}</a>
-          </li>
-          % endif
-          % if faqs:
-          <li class="nav-item">
-            <a class="nav-link" href="#faqs">${_('Frequently Asked Questions')}</a>
-          </li>
-          % endif
-        </ul>
+        <div class="row">
+            <ul class="nav nav-fill col-lg-12">
+                % if courses:
+                <li class="nav-item">
+                  <a class="nav-link" href="#courses">${_('View Courses')}</a>
+                </li>
+                % endif
+                % if instructors:
+                <li class="nav-item">
+                  <a class="nav-link" href="#instructors">${_('Meet the Instructors')}</a>
+                </li>
+                % endif
+                % if faqs:
+                <li class="nav-item">
+                  <a class="nav-link" href="#faqs">${_('Frequently Asked Questions')}</a>
+                </li>
+                % endif
+              </ul>
+        </div>
       </div>
     </div>
   </div>
 </%block>
 
-<div id="program-details-page" class="container">  
+<div id="program-details-page" class="container">
   <div class="row program-info">
     <div class="col col-12 col-lg-7">
       <div class="section">
@@ -341,14 +344,47 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
         <h2>${_('Instructors')}</h2>
       </div>
       % for instructor in instructors:
-        <div class="col-6 col-sm-3 instructor">
-          <div>
+        <%
+          instructor_hash = hash(instructor['name'])
+        %>
+        <div class="col-12 col-sm-6 col-md-4 instructor">
+          <a href="#instructor-details-${instructor_hash}" class="instructor-label">
             <img alt="" src="${instructor['image']}"/>
+          </a>
+          <a href="#instructor-details-${instructor_hash}" class="instructor-label">
+            <div class="instructor-name">${instructor['name']}</div>
+          </a>
+          % if instructor.get('title'):
+            <div class="instructor-position">${instructor['title']}</div>
+          % endif
+          % if instructor.get('organization'):
+            <div class="instructor-org">${instructor['organization']}</div>
+          % endif
+          % if instructor.get('bio'):
+          <div class="instructor-modal">
+              <div class="col col-12 sm-col-12 md-col-6 lg-col-6 xl-col-6">
+                  <div class="modal modal-custom" id="instructor-details-${instructor_hash}">
+                     <div class="btn-close modal_close"><i class="fa fa-close"></i></div>
+                     <div class="modal-body">
+                       <div class="modal-header">
+                         <div>
+                            <img alt="" src="${instructor['image']}"/>
+                            <div class="instructor-name">${instructor['name']}</div>
+                            <div>
+                              % if instructor.get('title'):
+                                <span>${instructor['title']}</span>,
+                              % endif
+                              % if instructor.get('organization'):
+                                <span>${instructor['organization']}</span>
+                              % endif
+                            </div>
+                         </div>
+                       </div>
+                       <div class="instructor-bio">${HTML(instructor['bio'])}</div>
+                     </div>
+                   </div>
+                </div>
           </div>
-          <div class="instructor-name">${instructor['name']}</div>
-          % if instructor.get('position'):
-            <div class="instructor-position">${instructor['position'].get('position')}</div>
-            <div class="instructor-org">${instructor['position'].get('organization_name')}</div>
           % endif
         </div>
       % endfor