added certificate button; reworked dashboard page to accommodate

lms/static/sass/multicourse/_dashboard.scss

@@ -288,12 +288,13 @@
             white-space: nowrap;
 
             a {
+              font-family: $serif;
               color: $base-font-color;
-              font-weight: 700;
               text-shadow: 0 1px rgba(255,255,255, 0.6);
 
               &:hover {
-                text-decoration: underline;
+                color: $pink;
+                text-decoration: none;
               }
             }
           }
@@ -316,6 +317,26 @@
             letter-spacing: 1px;
             text-align: center;
           }
+
+          &.ended {
+            width: flex-grid(4);
+            background: #ddd;
+          }
+        }
+
+        .download-certificate {
+          @include button(shiny, lighten($pink, 15%));
+          @include box-sizing(border-box);
+          @include border-radius(3px);
+          display: block;
+          float: left;
+          font: normal .9rem/1.6rem $sans-serif;
+          padding: 6px 0px;
+          text-transform: uppercase;
+          text-align: center;
+          margin-top: 16px;
+          margin-right: flex-gutter();
+          width: flex-grid(4);
         }
 
         .enter-course {
@@ -324,8 +345,7 @@
           @include border-radius(3px);
           display: block;
           float: left;
-          font: normal 1rem/1.6rem $sans-serif;
-          letter-spacing: 1px;
+          font: normal .9rem/1.6rem $sans-serif;
           padding: 6px 0px;
           text-transform: uppercase;
           text-align: center;

lms/templates/dashboard.html

@@ -73,25 +73,32 @@
             course_target = reverse('about_course', args=[course.id])
           %>
 
-          <a href="${course_target}">
-            <section class="cover" style="background-image: url('${course_image_url(course)}')">
-              <div class="shade"></div>
-              <div class="arrow">&#10095;</div>
-            </section>
+            <a href="${course_target}">
+              <section class="cover" style="background-image: url('${course_image_url(course)}')">
+                <div class="shade"></div>
+                <div class="arrow">&#10095;</div>
+              </section>
+            </a>
 
             <section class="info">
               <hgroup>
                 <h2 class="university">${get_course_about_section(course, 'university')}</h2>
-                <h3>${course.number} ${course.title}</h3>
+                <h3><a href="${course_target}">${course.number} ${course.title}</a></h3>
               </hgroup>
-              <section class="course-status">
-                <p>Class Starts - <span>${course.start_date_text}</span></p>
+              
+              <!-- add the "ended" class if the course has ended -->
+              <section class="course-status ended">
+                <p>Class Ended</p>
               </section>
+
+              <!-- insert the certificate button if the course has ended -->
+              <a href="#" class="download-certificate">Download Certificate</a>
+              
               % if course.id in show_courseware_links_for:
-                <p class="enter-course">View Courseware</p>
+                <a href="${course_target}" class="enter-course">View Courseware</a>
               % endif
             </section>
-          </a>
+          
         </article>
         <a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">Unregister</a>