From a93832aabe087b0a673f7f221af3274590b0bd28 Mon Sep 17 00:00:00 2001
From: Matt Tuchfarber <mtuchfarber@edx.org>
Date: Thu, 26 Oct 2017 15:41:59 -0400
Subject: [PATCH] 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.
---
 .../sass/views/_program-marketing-page.scss   |  42 ++++---
 .../courseware/program_marketing.html         | 117 ++++++++++--------
 lms/templates/main.html                       |   2 +
 3 files changed, 91 insertions(+), 70 deletions(-)

diff --git a/lms/static/sass/views/_program-marketing-page.scss b/lms/static/sass/views/_program-marketing-page.scss
index 6e8149d151..c89abf4852 100644
--- a/lms/static/sass/views/_program-marketing-page.scss
+++ b/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 {
diff --git a/lms/templates/courseware/program_marketing.html b/lms/templates/courseware/program_marketing.html
index 7fbc53dd39..d6de91f064 100644
--- a/lms/templates/courseware/program_marketing.html
+++ b/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">
diff --git a/lms/templates/main.html b/lms/templates/main.html
index 0b22f14958..9e740e325d 100644
--- a/lms/templates/main.html
+++ b/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()}