added in completed course status to dashboard and certificate availability states

lms/static/sass/base/_variables.scss

@@ -26,7 +26,6 @@ $sidebar-color: #f6f6f6;
 $outer-border-color: #aaa;
 
 // old variables
-
 $light-gray: #ddd;
 $dark-gray: #333;
 $text-color: $dark-gray;

lms/static/sass/multicourse/_dashboard.scss

@@ -179,6 +179,7 @@
       overflow: hidden;
       position: relative;
       width: flex-grid(12);
+      z-index: 20;
       @include transition(all, 0.15s, linear);
 
       &:last-child {
@@ -318,6 +319,19 @@
           }
         }
 
+        .course-status-completed {
+          background: #ccc;
+          color: #fff;
+
+          p {
+            color: #222;
+          
+            span {
+              font-weight: bold;
+            }
+          }
+        }
+
         .enter-course {
           @include button(shiny, $blue);
           @include box-sizing(border-box);
@@ -357,10 +371,113 @@
             border-color: darken(rgb(200,200,200), 3%);
             @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
           }
+
+          .course-status-completed {
+            background: #888;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .message-status {
+      @include border-radius(3px);
+      @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
+      display: none;
+      position: relative;
+      top: -15px;
+      z-index: 10;
+      margin: 0 0 20px 0;
+      padding: 15px 20px;
+      font-family: "Open Sans", Verdana, Geneva, sans-serif;
+      background: #fffcf0;
+      border: 1px solid #ccc;
+      
+      .message-copy {
+        margin: 0;
+
+        .grade-value {
+          font-size: 1.4rem;
+          font-weight: bold;
+        }
+      }
+
+      .actions {
+         @include clearfix;
+        list-style: none;
+        margin: 15px 0 0 0;
+        padding: 0;
+
+        .action {
+          float: left;
+          margin:0 15px 10px 0;
+
+          .btn, .cta {
+            display: inline-block;
+          }
+
+          .btn {
+            @include button(shiny, $blue);
+            @include box-sizing(border-box);
+            @include border-radius(3px);
+            float: left;
+            font: normal 0.8rem/1.2rem $sans-serif;
+            letter-spacing: 1px;
+            padding: 6px 12px;
+            text-align: center;
+
+            &.disabled {
+              @include button(shiny, #eee);
+              cursor: default !important;
+
+              &:hover {
+                background: #eee;
+                background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
+                background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
+                background-image: -ms-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
+                background-image: -o-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
+                background-image: linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
+              }
+            }
+          }
+
+          .cta {
+            @include button(shiny, #666);
+            float: left;
+            font: normal 0.8rem/1.2rem $sans-serif;
+            letter-spacing: 1px;
+            padding: 6px 12px;
+            text-align: center;
+          }
+        }
+      }
+
+      &.is-shown {
+        display: block;
+      }
+
+      &.course-status-processing {
+
+      }
+
+      &.course-status-certnotavailable {
+        // background: #fee8d6;
+      }
+
+      &.course-status-certrendering {
+        // background: #d9e7db;
+
+        .cta {
+          margin-top: 2px;
         }
       }
+
+      &.course-status-certavailable {
+        // background: #d9e7db;
+      }
     }
 
+
     a.unenroll {
       float: right;
       font-style: italic;

lms/templates/dashboard.html

@@ -135,8 +135,8 @@
                 <h2 class="university">${get_course_about_section(course, 'university')}</h2>
                 <h3>${course.number} ${course.title}</h3>
               </hgroup>
-              <section class="course-status">
-                <p>Class Starts - <span>${course.start_date_text}</span></p>
+              <section class="course-status course-status-completed">
+                <p><!-- Class Starts - <span>${course.start_date_text}</span> --> Course Completed - <span>Nov 6, 2012</span></p>
               </section>
               % if course.id in show_courseware_links_for:
                 <p class="enter-course">View Courseware</p>
@@ -144,6 +144,38 @@
             </section>
           </a>
         </article>
+
+        <div class="message message-status course-status-processing is-shown">
+          <p class="message-copy">Final course details are being wrapped up at this time. Your final standing will be available shortly.</p>
+        </div>
+
+        <div class="message message-status course-status-certrendering is-shown">
+          <p class="message-copy">You have received a grade of <span class="grade-value">B</span> in this course.</p>
+
+          <ul class="actions">
+            <li class="action"><span class="btn disabled" href="">Your Certificate is Generating</span></li>
+            <li class="action"><a class="cta" href="">Complete our course feedback survey</a></li>
+          </ul>
+        </div>
+
+        <div class="message message-status course-status-certavailable is-shown">
+          <p class="message-copy">You have received a grade of <span class="grade-value">B</span> in this course.</p>
+
+          <ul class="actions">
+            <li class="action"><a class="btn" href="" title="This link will open/download a PDF document">Download Your PDF Certificate</a></li>
+            <li class="action"><a class="cta" href="">Complete our course feedback survey</a></li>
+          </ul>
+        </div>
+
+        <div class="message message-status course-status-certnotavailable is-shown">
+          <p class="message-copy">You did not complete the necessary requirements for completion of this course.</p>
+
+          <ul class="actions">
+            <li class="action"><a class="btn" href="">Contact Faculty</a></li>
+            <li class="action"><a class="cta" href="">Complete our course feedback survey</a></li>
+          </ul>
+        </div>
+
         <a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">Unregister</a>
 
       % endfor