LMS: adds in UI and styling for verified track upgrade to dashboard view

lms/static/sass/base/_extends.scss

@@ -100,3 +100,16 @@
     // outline: thin dotted !important;
   }
 }
+
+// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
+%ui-no-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}

lms/static/sass/multicourse/_dashboard.scss

@@ -227,6 +227,8 @@
     }
   }
 
+  // ====================
+
   // course listings
   .my-courses {
     float: left;
@@ -272,6 +274,8 @@
       }
     }
 
+    // ====================
+
     // UI: course list
     .listing-courses {
       @extend %ui-no-list;
@@ -289,6 +293,8 @@
       }
     }
 
+    // ====================
+
     // UI: individual course item
     .course {
       @include box-sizing(box);
@@ -416,6 +422,8 @@
         }
       }
 
+      // ====================
+
       // STATE: course mode - verified
       &.verified {
         @extend %ui-depth2;
@@ -459,40 +467,111 @@
           }
         }
       }
-
     }
 
-    .message-status {
+    // ====================
+
+    // UI: message
+    .message {
       @include clearfix;
       border-radius: 3px;
       display: none;
       z-index: 10;
-      margin: 20px 0 10px;
-      padding: 15px 20px;
+      margin: $baseline 0 ($baseline/2) 0;
+      padding: ($baseline*0.75) $baseline;
       font-family: $sans-serif;
       background: tint($yellow,70%);
       border: 1px solid #ccc;
 
-      .message-copy {
+      // STATE: shown
+      &.is-shown {
+        display: block;
+      }
+
+      a {
         font-family: $sans-serif;
-        font-size: 13px;
-        margin: 0;
+      }
+
+      strong {
+        font-weight: 700;
 
         a {
-          font-family: $sans-serif;
+          font-weight: 700;
         }
+      }
 
-        .grade-value {
-          font-size: 1.2rem;
-          font-weight: bold;
+      .message-title,
+      .message-copy .title {
+        @extend %t-title5;
+        @extend %t-weight4;
+        margin-bottom: ($baseline/4);
+      }
+
+      .message-copy,
+      .message-copy .copy {
+        @extend %t-copy-sub1;
+        margin: 0;
+      }
+
+      // CASE: has actions
+      &.has-actions {
+        @include clearfix();
+
+        .message-copy {
+          float: left;
+          width: 50%;
+          margin-right: 5%;
         }
 
-        strong {
-          font-weight: 700;
+        .message-actions {
+          @extend %ui-no-list;
+          float: right;
+          width: 40%;
+          text-align: right;
+        }
+      }
+    }
 
-          a {
-            font-weight: 700;
-          }
+    // TYPE: upsell
+    .message-upsell {
+      background: $verified-color-lvl5;
+
+      .action-upgrade {
+        @extend %btn-verify-primary;
+        @include clearfix();
+
+        span {
+          color: $white; // nasty but needed override for poor <span> styling
+        }
+
+        .copy {
+          @extend %t-action3;
+          @extend %t-weight4;
+          display: block;
+          margin-bottom: ($baseline/4);
+        }
+
+        .copy-sub {
+          @extend %t-action4;
+          display: block;
+          opacity: 0.875;
+        }
+      }
+    }
+
+    // TYPE: status
+    .message-status {
+      background: tint($yellow,70%);
+      border-color: #ccc;
+
+      .message-copy {
+        font-family: $sans-serif;
+        font-size: 13px;
+        margin: 0;
+
+        .grade-value {
+          font-size: 1.2rem;
+          font-weight: bold;
         }
       }
 
@@ -589,10 +668,6 @@
         }
       }
 
-      &.is-shown {
-        display: block;
-      }
-
       &.course-status-processing {
 
       }
@@ -614,7 +689,6 @@
       }
     }
 
-
     a.unenroll {
       float: right;
       display: block;

lms/templates/dashboard/dashboard_course_listing.html

@@ -96,12 +96,12 @@
                 <li class="action">
                 <a class="btn" href="${cert_status['download_url']}"
                    title="${_('This link will open/download a PDF document')}">
-                   Download Your PDF Certificate</a></li>
+                   ${_("Download Your PDF Certificate")}</a></li>
               % endif
 
               % if cert_status['show_survey_button']:
                 <li class="action"><a class="cta" href="${cert_status['survey_url']}">
-                       ${_('Complete our course feedback survey')}</a></li>
+                       ${_("Complete our course feedback survey")}</a></li>
               % endif
             </ul>
           % endif
@@ -109,6 +109,33 @@
 
       % endif
 
+      %if enrollment.mode != 'verified' and 'verified' in course_modes:
+        <div class="message message-upsell has-actions is-shown">
+            <!-- <img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="ID Verified Ribbon/Badge" /> -->
+            <div class="message-copy">
+              <h4 class="title">${_("Challenge Yourself!")}</h4>
+              <p class="copy">${_("Register for the {a_start} verified certificate {a_end} track").format(a_start='<a href="/verified-certificate">', a_end="</a>")}</p>
+            </div>
+
+            <ul class="message-actions">
+              <li class="action-item">
+                <a class="action action-upgrade" href="${reverse('course_modes_choose', kwargs={'course_id': course.id})}?upgrade=True">
+                  <span class="wrapper-copy">
+                    <span class="copy">${_("Upgrade to Verified Track")}</span>
+
+                    %if course_modes['verified'].expiration_date:
+                      <% days_left = (course_modes['verified'].expiration_date - date.today()).days %>
+                      <span class="copy-sub">
+                        ${_('{days} days left!').format(days=days_left)}
+                      </span>
+                    %endif
+                  </span>
+                </a>
+              </li>
+            </ul>
+        </div>
+      %endif
+
       % if show_courseware_link:
         % if course.has_ended():
           <a href="${course_target}" class="enter-course archived">${_('View Archived Course')}</a>
@@ -124,18 +151,5 @@
 % endif
 
   </section>
-      %if enrollment.mode != 'verified' and 'verified' in course_modes:
-        <div class='verified-upsell'>
-            <a href="${reverse('course_modes_choose', kwargs={'course_id': course.id})}?upgrade=True">${_("Get a verified certificate for this course!")}</a>
-            %if course_modes['verified'].expiration_date:
-                <% days_left = (course_modes['verified'].expiration_date - date.today()).days %>
-                <p>
-                    ${_('Only {days} days left!').format(days=days_left)}
-                </p>
-            %endif
-
-        </div>
-      %endif
-
 </article>
 </li>