Make page more dynamic and less 500-prone. Also fix image sizing. Makes

nav links dynamic based on content.

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

@@ -4,19 +4,18 @@
     margin-top: $baseline;
   }
 
-  .logo {
-    height: 100px;
-  }
-
   .main-banner {
     color: $white;
     margin-bottom: 1px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+    background-size:100% 100% !important;
+    background-repeat:no-repeat !important;
 
     .authoring-org-logo {
       background-color: $white;
+      height: 100px;
+    }
+    .logo-space{
+      height: 50px;
     }
 
     .btn {
@@ -81,7 +80,7 @@
   .thick_rule {
     height: 4px;
     border: 0;
-    background-color: theme-color('secondary');
+    background-color: theme-color('primary');
   }
 
   .program-info {

lms/templates/courseware/program_marketing.html

@@ -19,9 +19,8 @@ from openedx.core.djangolib.markup import HTML, Text
 
 <%
 faqs = program['faq']
-program_type = program['type']
+program_type = program['type'] if program['type'] else 'Program'
 title = program['title']
-status = program['status']
 courses = program['courses']
 subtitle = program['subtitle']
 overview = program['overview']
@@ -30,19 +29,24 @@ 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'])
-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',{}).get('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']
 min_hours_effort_per_week = program['min_hours_effort_per_week']
 max_hours_effort_per_week = program['max_hours_effort_per_week']
+
+## Start Endorsement
+corporate_endorsement = program['corporate_endorsements'][0] if program['corporate_endorsements'] else {}
+corporate_endorsement_name = corporate_endorsement.get('corporation_name')
+corporate_endorsement_image = corporate_endorsement['image']['src'] if corporate_endorsement.get('image') else ''
+endorsements = corporate_endorsement.get('individual_endorsements')
+endorsement = endorsements[0] if endorsements else {}
+endorsement_quote = endorsement.get('quote')
+endorser = endorsement.get('endorser', {})
+endorser_given_name = endorser.get('given_name') if endorser.get('given_name') else ''
+endorser_family_name = endorser.get('family_name') if endorser.get('family_name') else ''
+endorser_name = (endorser_given_name + ' ' + endorser_family_name).strip()
+endorser_position = endorser.get('position') if endorser.get('position') else {}
+endorser_title = endorser_position.get('title', '')
+endorser_org = endorser_position.get('organization_name') or corporate_endorsement_name
 %>
 
 <%block name="js_extra">
@@ -55,16 +59,22 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
     banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
     authoring_organizations = program['authoring_organizations']
     video_url = program['video'].get('src') if program['video'] else ''
+    faqs = program['faq']
+    courses = program['courses']
+    instructors = program['instructors']
   %>
   <div id="program-details-hero">
-    <div class="main-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image}); background-size:100%;">
+    <div class="main-banner" 
+      style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image});">
       <div class="container" >
         <div class="row">
           <div class="col col-12 col-md-8">
             % if authoring_organizations and authoring_organizations[0]['logo_image_url']:
             <div>
-              <img class="authoring-org-logo logo" alt="${authoring_organizations[0]['name']}" src="${authoring_organizations[0]['logo_image_url']}"/>
+              <img class="authoring-org-logo" alt="${authoring_organizations[0]['name']}" src="${authoring_organizations[0]['logo_image_url']}"/>
             </div>
+            % else:
+            <div class="logo-space"></div>
             % endif
             <div>
               <h1 class="program_title">${program['title']}</h1>
@@ -100,15 +110,21 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
     <div class="row 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">${_('Frequenty Asked Questions')}</a>
           </li>
+          % endif
         </ul>
       </div>
     </div>
@@ -137,7 +153,9 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
         % if endorsement:
          <h3 class="section_title">${_('Real Career Impact')}</h3>
         <p>
-          <img class="logo" alt="${corporate_endorsement_name}" src="${corporate_endorsement_image}"/>
+          % if corporate_endorsement_image:
+            <img class="logo" alt="${corporate_endorsement_name}" src="${corporate_endorsement_image}"/>
+          % endif
           <blockquote class="blockquote">
             <p class="quote">"${endorsement_quote}"</p>
             <footer class="blockquote-footer">
@@ -237,6 +255,7 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
       </div>
     </div>
   </div>
+  % if courses:
   <hr class="thick_rule">
   <div id="courses">
     <div class="row">
@@ -289,26 +308,29 @@ max_hours_effort_per_week = program['max_hours_effort_per_week']
       </div>
     % endfor
   </div>
-  <hr class="thick_rule">
-  <div id="instructors" class="row">
-    <div class="col-12">
-      <h2>${_('Instructors')}</h2>
-    </div>
-    % for instructor in instructors:
-      <div class="col-6 col-sm-3 instructor">
-        <div>
-          <img alt="" src="${instructor['image']}"/>
-        </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
+  % endif
+  % if instructors:
+    <hr class="thick_rule">
+    <div id="instructors" class="row">
+      <div class="col-12">
+        <h2>${_('Instructors')}</h2>
       </div>
-    % endfor
-  </div>
-  <hr class="thick_rule">
+      % for instructor in instructors:
+        <div class="col-6 col-sm-3 instructor">
+          <div>
+            <img alt="" src="${instructor['image']}"/>
+          </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
+    </div>
+  % endif
   % if faqs:
+  <hr class="thick_rule">
     <div id="faqs" class="row faqs">
       <div class="col-12">
         <h2>${_('Frequently Asked Questions')}</h2>