Merge pull request #16360 from edx/tuchfarber/marketing_hero

Add hero to main.html and use it in program page

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

-#program-details-page {
-  font-size: 16px;
-
+#program-details-hero {
   .program_title {
     font-weight: bold;
-    margin-top: $baseline
+    margin-top: $baseline;
   }
 
   .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 {
-    color: white;
+    color: $white;
     margin-bottom: 1px;
     background-size: cover;
     background-repeat: no-repeat;
@@ -50,7 +37,7 @@
 
       button {
         background-color: transparent;
-        color: $white
+        color: $white;
       }
 
       iframe {
@@ -70,13 +57,32 @@
 
   .quick-nav {
     background-color: theme-color('light');
-    margin-bottom: $baseline/2;
 
     .nav-item {
       font-size: 18px;
       color: $white;
     }
   }
+}
+
+#program-details-page {
+  margin-top: $baseline;
+  font-size: $font-size-base;
+
+  .logo {
+    height: 100px;
+  }
+
+  .section_title {
+    margin-bottom: $baseline;
+    color: theme-color("dark");
+  }
+
+  .thick_rule {
+    height: 4px;
+    border: 0;
+    background-color: theme-color('secondary');
+  }
 
   .program-info {
     .quote {

lms/templates/courseware/program_marketing.html

@@ -41,11 +41,8 @@ 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']
 max_hours_effort_per_week = program['max_hours_effort_per_week']
-video_url = program['video'].get('src') if program['video'] else ''
-banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
 %>
 
 <%block name="js_extra">
@@ -53,56 +50,72 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
 </%block>
 
 <%block name="pagetitle">${program['title']}</%block>
-<div id="program-details-page" class="container">  
-  <div class="row main-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image});">
-    <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']}"/>
-      </div>
-      % endif
-      <div>
-        <h1 class="program_title">${program['title']}</h1>
-      </div>
-      <div>
-        <h2>${program['subtitle']}</h2>
-      </div>
-      <div>
-        % if program.get('is_learner_eligible_for_one_click_purchase'):
-          <a href="${buy_button_href}" class="btn btn-success">
-            ${_('Purchase the Program')}
-          </a>
-        % else:
-          <a href="#courses" class="btn btn-success">
-            ${_('Start Learning')}
-          </a>
-        % endif
+<%block name="marketing_hero">
+  <%
+    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 ''
+  %>
+  <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="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']}"/>
+            </div>
+            % endif
+            <div>
+              <h1 class="program_title">${program['title']}</h1>
+            </div>
+            <div>
+              <h2>${program['subtitle']}</h2>
+            </div>
+            <div>
+              % if program.get('is_learner_eligible_for_one_click_purchase'):
+                <a href="${buy_button_href}" class="btn btn-success">
+                  ${_('Purchase the Program')}
+                </a>
+              % else:
+                <a href="#courses" class="btn btn-success">
+                  ${_('Start Learning')}
+                </a>
+              % endif
+            </div>
+          </div>
+          <div class="col col-12 col-md-4">
+            % if video_url:
+            <div id="program_video">
+              <button type="button" class="btn" aria-label="${_('Play')}" onclick="playVideo('${video_url}')">
+                <span class="icon fa fa-4x fa-play-circle" aria-hidden="true"></span>
+              </button>
+              <iframe class="align-middle" title="${_('YouTube Video')}" src="" frameborder="0" allowfullscreen style="display:none;"></iframe>
+            </div>
+            % endif
+          </div>
+        </div>
       </div>
     </div>
-    <div class="col col-12 col-md-4">
-      % if video_url:
-      <div id="program_video">
-        <button type="button" class="btn" aria-label="${_('Play')}" onclick="playVideo('${video_url}')">
-          <span class="icon fa fa-4x fa-play-circle" aria-hidden="true"></span>
-        </button>
-        <iframe class="align-middle" title="${_('YouTube Video')}" src="" frameborder="0" allowfullscreen style="display:none;"></iframe>
+    <div class="row quick-nav">
+      <div class="container">
+        <ul class="nav nav-fill col-lg-12">
+          <li class="nav-item">
+            <a class="nav-link" href="#courses">${_('View Courses')}</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#instructors">${_('Meet the Instructors')}</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#faqs">${_('Frequenty Asked Questions')}</a>
+          </li>
+        </ul>
       </div>
-      % endif
     </div>
   </div>
-  <div class="row quick-nav">
-    <ul class="nav nav-fill col-lg-12">
-      <li class="nav-item">
-        <a class="nav-link" href="#courses">${_('View Courses')}</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#instructors">${_('Meet the Instructors')}</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#faqs">${_('Frequenty Asked Questions')}</a>
-      </li>
-    </ul>
-  </div>
+</%block>
+
+<div id="program-details-page" class="container">  
   <div class="row program-info">
     <div class="col col-12 col-lg-7">
       <div class="section">

lms/templates/main.html

@@ -156,6 +156,8 @@ from pipeline_mako import render_require_js_path_overrides
     % endif
 
     <%include file="/page_banner.html" />
+    
+    <div class="marketing-hero"><%block name="marketing_hero"></%block></div>
 
     <div class="content-wrapper ${"container-fluid" if uses_bootstrap else "" } main-container" id="content">
       ${self.body()}