Verification: adds in verified/enrollment status into dashboard course listings

lms/static/sass/multicourse/_dashboard.scss

+// lms - views - user/student dashboard
+// ====================
+
 .dashboard {
   @include clearfix;
   padding: 60px 0 0 0;
@@ -224,6 +227,7 @@
     }
   }
 
+  // course listings
   .my-courses {
     float: left;
     margin: 0px;
@@ -268,21 +272,30 @@
       }
     }
 
-    .my-course {
-      clear: both;
-      @include clearfix;
-      margin-right: flex-gutter();
-      margin-bottom: 50px;
-      padding-bottom: 50px;
-      border-bottom: 1px solid $border-color-1;
-      position: relative;
-      width: flex-grid(12);
-      z-index: 20;
-      @include transition(all 0.15s linear 0s);
+    // UI: course list
+    .listing-courses {
+      @extend .ui-no-list;
+
+      .course-item {
+        margin-bottom: ($baseline*2.5);
+        border-bottom: 4px solid $border-color-l4;
+        padding-bottom: ($baseline*2.5);
 
         &:last-child {
-        margin-bottom: none;
+          margin-bottom: 0;
+          border-bottom: none;
+          padding-bottom: 0;
         }
+      }
+    }
+
+    // UI: individual course item
+    .course {
+      @include box-sizing(box);
+      @include transition(all 0.15s linear 0s);
+      @include clearfix();
+      @extend .ui-depth2;
+      position: relative;
 
       .cover {
         @include box-sizing(border-box);
@@ -402,6 +415,51 @@
           }
         }
       }
+
+      // STATE: course mode - verified
+      &.verified {
+        @extend .ui-depth2;
+        margin-top: ($baseline*2.5);
+        border-top: 1px solid $verified-color-lvl3;
+        padding-top: ($baseline*1.25);
+        background: $white;
+
+        // FIXME: bad, but needed selector!
+        .info > hgroup .date-block {
+          top: ($baseline*1.25);
+        }
+
+        // course enrollment status message
+        .sts-enrollment {
+          display: inline-block;
+          position: absolute;
+          top: -28px;
+          right: 0;
+          text-align: center;
+
+          .label {
+            @extend .text-sr;
+          }
+
+          .deco-graphic {
+            @extend .ui-depth3;
+            width: 40px;
+            position: absolute;
+            left: -30px;
+            top: -10px;
+          }
+
+          .sts-enrollment-value {
+            @extend .ui-depth1;
+            @extend .copy-badge;
+            border-radius: 0;
+            padding: ($baseline/4) ($baseline/2) ($baseline/4) $baseline;
+            color: $white;
+            background: $verified-color-lvl3;
+          }
+        }
+      }
+
     }
 
     .message-status {

lms/templates/dashboard.html

@@ -13,6 +13,7 @@
 <%namespace name='static' file='static_content.html'/>
 
 <%block name="title"><title>${_("Dashboard")}</title></%block>
+<%block name="bodyclass">view-dashboard is-authenticated</%block>
 
 <%block name="js_extra">
   <script type="text/javascript">
@@ -157,15 +158,14 @@
     </header>
 
     % if len(courses) > 0:
+      <ul class="listing-courses">
         % for course, enrollment in courses:
-
-      <article class="my-course ${enrollment.mode}">
+        <li class="course-item">
+          <article class="course ${enrollment.mode}">
             <%
               course_target = reverse('info', args=[course.id])
             %>
 
-
-
             % if course.id in show_courseware_links_for:
               <a href="${course_target}" class="cover">
                 <img src="${course_image_url(course)}" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) |h}" />
@@ -176,6 +176,14 @@
               </div>
             % endif
 
+            % if enrollment.mode == "verified":
+            <span class="sts-enrollment">
+              <span class="label">${_("Enrolled as: ")}</span>
+              <img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="ID Verified Ribbon/Badge">
+              <span class="sts-enrollment-value">${_("ID Verified")}</span>
+            </span>
+            % endif
+
             <section class="info">
               <hgroup>
                 <p class="date-block">
@@ -307,17 +315,21 @@
                   <a href="${course_target}" class="enter-course">${_('View Course')}</a>
                 % endif
               % endif
+
+
+
               <a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">${_('Unregister')}</a>
+
   	    % if settings.MITX_FEATURES['ENABLE_INSTRUCTOR_EMAIL'] and modulestore().get_modulestore_type(course.id) == MONGO_MODULESTORE_TYPE:
   	      <!-- Only show the Email Settings link/modal if this course has bulk email feature enabled -->
                 <a href="#email-settings-modal" class="email-settings" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}" data-optout="${course.id in course_optouts}">${_('Email Settings')}</a>
   	    % endif
           </section>
         </article>
-
-
-
+      </li>
       % endfor
+
+      </ul>
     % else:
       <section class="empty-dashboard-message">
         <p>${_("Looks like you haven't registered for any courses yet.")}</p>