Basic bio showing

lms/static/js/program_marketing.js

@@ -4,3 +4,17 @@ function playVideo(src) {
     document.querySelector('#program_video iframe').style = 'display:block;';
     document.querySelector('#program_video iframe').src = src;
 }
+function toggleBio(currentEl, bioHash) {
+    'use strict';
+    var button = currentEl;
+    var bioId = 'instructor-bio-' + bioHash;
+    var bio = document.getElementById(bioId);
+    var hidden = bio.classList.contains('hidden');
+    if (hidden) {
+        bio.classList.remove('hidden');
+        button.innerHTML = 'Hide Bio';
+    } else {
+        bio.classList.add('hidden');
+        button.innerHTML = 'View Bio';
+    }
+}

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

@@ -7,14 +7,15 @@
   .main-banner {
     color: $white;
     margin-bottom: 1px;
-    background-size:cover !important;
-    background-repeat:no-repeat !important;
+    background-size: cover !important;
+    background-repeat: no-repeat !important;
 
     .authoring-org-logo {
       background-color: $white;
       height: 100px;
     }
-    .logo-space{
+
+    .logo-space {
       height: 50px;
     }
 
@@ -190,6 +191,14 @@
       .instructor-position {
         font-weight: bold;
       }
+
+      .instructor-bio-toggle {
+        margin-top: 5px;
+      }
+
+      .hidden {
+        display: none;
+      }
     }
   }
 

lms/templates/courseware/program_marketing.html

@@ -154,7 +154,7 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
   </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,7 +341,7 @@ 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 class="col-12 col-sm-6 col-md-4 instructor">
           <div>
             <img alt="" src="${instructor['image']}"/>
           </div>
@@ -350,6 +350,16 @@ endorser_org = endorser_position.get('organization_name') or corporate_endorseme
             <div class="instructor-position">${instructor['position'].get('position')}</div>
             <div class="instructor-org">${instructor['position'].get('organization_name')}</div>
           % endif
+          % if instructor.get('bio'):
+          <div>
+            <div class="instructor-bio">
+              ${HTML(instructor.get('bio'))}
+            </div>
+            <button class="btn btn-primary">
+                ${_('View Bio')}
+            </button>
+          </div>
+          % endif
         </div>
       % endfor
     </div>