From 7a3a228c69dedf57b2063aa25132c150603afef0 Mon Sep 17 00:00:00 2001
From: Brandon Baker <bbaker@edx.org>
Date: Tue, 24 Jul 2018 16:53:41 -0400
Subject: [PATCH] Add program record section to program detail sidebar
 LEARNER-5923

---
 lms/static/sass/views/_program-details.scss   | 81 ++++++++++++++++---
 .../program_details_sidebar.underscore        | 15 +++-
 2 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss
index d4f4843e18..c178f133f8 100644
--- a/lms/static/sass/views/_program-details.scss
+++ b/lms/static/sass/views/_program-details.scss
@@ -1,3 +1,11 @@
+// +notes:
+// ---------------------
+// * Styling for the program details main view and sidebar view
+
+// +local variables/utilities:
+// ----------------------
+$btn-color-primary: palette(primary, dark);
+
 .program-details {
   .content-wrapper {
     max-width: 100%;
@@ -316,8 +324,8 @@
 
   .course-enroll-view {
     .view-course-button {
-      background: palette(primary, dark);
-      border-color: palette(primary, dark);
+      background: $btn-color-primary;
+      border-color: $btn-color-primary;
       height: 37px;
       padding: 7px 18.5px 0 18.5px;
       width: auto;
@@ -352,7 +360,7 @@
       }
 
       button, .enroll-course-button {
-        background-color: palette(primary, dark);
+        background-color: $btn-color-primary;
         height: 37px;
         width: 128px;
         padding: 0;
@@ -361,7 +369,7 @@
         font-size: 0.9375em;
 
         &:hover {
-          color: palette(primary, dark);
+          color: $btn-color-primary;
           background-color: theme-color("inverse");
         }
 
@@ -626,27 +634,80 @@
   }
 }
 
+// CSS for the program sidebar
 .program-sidebar {
-  padding: 30px 10px;
+  padding: $baseline*1.5 $baseline*0.5;
 
   .program-record {
-    text-align: center;
+    text-align: left;
     padding-bottom: 2em;
   }
 
+  .motivating-section {
+    @include margin-left($baseline*0.75);
+
+    font-size: 0.9375em;
+    width: $baseline*15.5;
+
+    @media (min-width: $bp-screen-sm) {
+      width: auto;
+    }
+
+    .motivating-message {
+      color: #414141;
+    }
+  }
+
+  .record-heading {
+    font-family: $font-family-sans-serif;
+    font-weight: bold;
+    color: palette(primary, dark);
+    font-size: 0.9375em;
+    line-height: normal;
+    padding-bottom: $baseline*0.25;
+    border-bottom: $baseline*0.15 solid $divider-color;
+    margin: $baseline*0.5 0 $baseline 0;
+  }
+
+  .view-record-wrapper {
+    text-align: right;
+
+    .view-record-button {
+      background: $btn-color-primary;
+      border-color: $btn-color-primary;
+      height: $baseline*1.85;
+      padding: $baseline*0.35 $baseline*0.925 $baseline*0.35 $baseline*0.925;
+      width: auto;
+      border-radius: 0;
+      text-align: center;
+      font-size: 0.9375em;
+      //margin-top: 5px;
+      margin-top: $baseline*0.25;
+
+      /* IE11 CSS styles */
+      @media (min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        @include float(right);
+      }
+
+      @media (min-width: $bp-screen-lg) {
+        margin-top: 0;
+      }
+    }
+  }
+
   @media (min-width: $bp-screen-md) {
     @include float(right);
 
-    width: 300px;
-    padding-right: 30px;
+    width: $baseline*15;
+    padding-right: $baseline*1.5;
     position: relative;
   }
 
   @media (min-width: $bp-screen-lg) {
-    width: 450px;
+    width: $baseline*22.5;
 
     .program-progress {
-      @include margin-left(50px);
+      @include margin-left($baseline*2.5);
     }
   }
 
diff --git a/lms/templates/learner_dashboard/program_details_sidebar.underscore b/lms/templates/learner_dashboard/program_details_sidebar.underscore
index 3f3e1ea736..caff093f18 100644
--- a/lms/templates/learner_dashboard/program_details_sidebar.underscore
+++ b/lms/templates/learner_dashboard/program_details_sidebar.underscore
@@ -7,11 +7,18 @@
         </a>
     <% } %>
 </aside>
+<aside class="aside js-course-certificates"></aside>
 <% if (programRecordUrl) { %>
     <aside class="aside js-program-record program-record">
-        <a href="<%- programRecordUrl %>" class="program-record-link">
-            <button class="btn program-record-button"><%- gettext('View Program Record') %></button>
-        </a>
+        <h2 class="record-heading"><%- gettext('Program Record') %></h2>
+        
+        <div class="motivating-section">
+            <p class="motivating-message"><%- gettext('Once you complete one of the program requirements you have a program record. This record is marked complete once you meet all program requirements. A program record can be used to continue your learning journey and demonstrate your learning to others.') %></p>
+        </div>
+        <div class="view-record-wrapper">
+            <a href="<%- programRecordUrl %>" class="program-record-link">
+                <button class="btn view-record-button btn-brand btn cta-primary"><%- gettext('View Program Record') %></button>
+            </a>
+        </div>
     </aside>
 <% } %>
-<aside class="aside js-course-certificates"></aside>