ECOM-7386 Added a program progress circle to program details page

lms/templates/learner_dashboard/certificate_list.underscore

@@ -0,0 +1,13 @@
+<div class="certificate-container">
+  <% if (title) { %>
+    <h2 class="course-list-heading"><%- title %></h2>
+  <% } %>
+    <ul class="certificate-list">
+      <% _.each(certificateList, function(certificate){ %>
+        <li class="certificate">
+            <a class="image-link" href="<%- certificate.url %>" aria-hidden="true" tabindex="-1"><img src="/static/images/programs/sample-cert.png" class="sample-cert" alt=""></a>
+            <a class="certificate-link" href="<%- certificate.url %>"><%- certificate.title %></a>
+        </li>
+      <% }); %>
+    </ul>
+</div>

lms/templates/learner_dashboard/course_card_2017.underscore

@@ -20,7 +20,7 @@
             </div>
         </div>
         <div class="course-actions col-12 md-col-4 sm-col-12"></div>
-        <div class="certificate-status"></div>
+        <div class="course-certificate certificate-status"></div>
     </div>
 </div>
 <div class="section action-msg-view"></div>

lms/templates/learner_dashboard/program_details_sidebar.underscore

@@ -0,0 +1,10 @@
+<aside class="aside js-program-progress program-progress">
+    <% if (programCertificate) { %>
+        <h2 class="progress-heading certificate-heading"><%- StringUtils.interpolate(gettext('Your {program} Certificate'), {program: type}, true) %></h2>
+
+        <a href="<%- programCertificate.url %>" class="program-cert-link">
+            <img src="<%- programCertificate.img %>" class="program-cert" alt="<%- interpolate(gettext('Open the certificate you earned for the %(title)s program.'), {title: programCertificate.title}, true) %>" />
+        </a>
+    <% } %>
+</aside>
+<aside class="aside js-course-certificates"></aside>

lms/templates/learner_dashboard/program_details_view_2017.underscore

@@ -1,6 +1,5 @@
 <header class="js-program-header program-header full-width-banner"></header>
-<div class="program-details-content">
-    <div class="js-program-progress-view"></div>
+<section class="program-details-content">
     <div class="program-heading">
             <% if (inProgressCount === totalCount) { %>
                 <h3 class="program-heading-title"><%- gettext('Congratulations!') %></h3>
@@ -29,7 +28,6 @@
                     <span class="status"><%- gettext('COURSES IN PROGRESS') %></span>
                     <span class="count"><%- inProgressCount %></span>
                 </h4>
-                <div class="divider"></div>
                 <div class="course-list js-course-list-in-progress row"></div>
             </div>
         <% } %>
@@ -39,7 +37,6 @@
                     <span class="status"><%- gettext('REMAINING COURSES') %></span>
                     <span class="count"><%- remainingCount %></span>
                 </h4>
-                <div class="divider"></div>
                 <div class="course-list js-course-list-remaining row"></div>
             </div>
         <% } %>
@@ -48,7 +45,6 @@
                 <span class="status"><%- gettext('COMPLETED COURSES') %></span>
                 <span class="count"><%- completedCount %></span>
             </h4>
-            <div class="divider"></div>
             <% if (completedCount) { %>
                 <div class="course-list js-course-list-completed row"></div>
             <% } else { %>
@@ -59,6 +55,5 @@
             <% } %>
         </div>  
     </div>
-    
-    <aside class="js-course-sidebar"></aside>
-</div>
+</section>  
+<aside class="js-program-sidebar program-sidebar"></aside>