added in course-wide completion message static states and styling

lms/static/sass/course/base/_base.scss

@@ -132,7 +132,81 @@ img {
 }
 
 .site-status {
+  display: block;
+}
+
+.course-status {
+  display: none;
+  padding: 20px 10px;
+  background: #fffcf0;
+  border-bottom: 1px solid #999;
+  @include linear-gradient(#f2dfbe, #fffcf0);
+  @include box-shadow(0 -2px 0 #fff inset);
+
+  .inner-wrapper {
+    margin: auto;
+    max-width: 1180px;
+    @include clearfix();
+
+    .message-copy {
+      display: inline-block;
+      margin-right: 20px;
+
+      .grade-value {
+        font-size: 1.4rem;
+        font-weight: bold;
+      }
+    }
+
+    .actions {
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      .action {
+        display: inline-block;
+        margin-right: 10px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        .btn {
+          padding: 6px 12px;
+          @include box-sizing(border-box);
+          @include button(shiny, $blue);
+          @include border-radius(3px);
+          font: normal 0.8rem/1.2rem $sans-serif;
+          letter-spacing: 1px;
+          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 {
+          font-size: 0.8rem;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  &.is-shown {
     display: block;
+  }
 }
 
 .toast-notification {

lms/templates/navigation.html

@@ -91,6 +91,47 @@ site_status_msg = get_site_status_msg(course_id)
 <div class="ie-banner"><strong>Warning:</strong> Your browser is not fully supported. We strongly recommend using <a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">Chrome</a> or <a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>.</div>
 % endif
 
+% if course: 
+<div class="message message-status course-status course-status-certavailable is-shown">
+  <div class="inner-wrapper">
+    <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>
+
+<div class="message message-status course-status course-status-certnotavailable is-shown">
+  <div class="inner-wrapper">
+    <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>
+</div>
+
+<div class="message message-status course-status course-status-certnotavailable is-shown">
+  <div class="inner-wrapper">
+    <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>
+
+<div class="message message-status course-status course-status-certnotavailable is-shown">
+  <div class="inner-wrapper">
+    <p class="message-copy">Final course details are being wrapped up at this time. Your final standing will be available shortly.</p>
+  </div>
+</div>
+% endif
+
 %if not user.is_authenticated():
   <%include file="login_modal.html" />
   <%include file="signup_modal.html" />