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,8 +50,16 @@ 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});">
+<%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>
@@ -90,7 +95,10 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
             % endif
           </div>
         </div>
+      </div>
+    </div>
     <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>
@@ -103,6 +111,11 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
           </li>
         </ul>
       </div>
+    </div>
+  </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

@@ -157,6 +157,8 @@ from pipeline_mako import render_require_js_path_overrides
 
     <%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()}
       <%block name="bodyextra"/>