Add hero to main.html and use for program page

Adding hero to main.html allows for full width marketing images to be
used. This commit includes the addition of the hero block into
main.html along with the program marketing page's use of that new
hero block.

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

@@ -1,28 +1,15 @@
-#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>
+<%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="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>
+    </div>
+  </div>
+</%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
-      </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 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>
   <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()}