Merge pull request #9910 from edx/frances/invalid-cert-styles

Styles and content adjustments for invalid cert view

lms/djangoapps/certificates/tests/test_webview_views.py

@@ -350,7 +350,7 @@ class CertificatesViewsTests(ModuleStoreTestCase, EventTrackingTestCase):
         response = self.client.get(test_url + '?preview=honor')
         #accessing certificate web view in preview mode without
         # staff or instructor access should show invalid certificate
-        self.assertIn('This is an invalid certificate number', response.content)
+        self.assertIn('Cannot Find Certificate', response.content)
 
         CourseStaffRole(self.course.id).add_users(self.user)
 

lms/static/certificates/sass/_views.scss

@@ -11,3 +11,30 @@
 // #DISTINCTION CERT
 // ------------------------------
 
+
+// ------------------------------
+// #INVALID
+// ------------------------------
+
+.wrapper-content.status-invalid {
+    @extend %layout-wrapper;
+
+    .wrapper-content-grid {
+        @extend %layout;
+    }
+
+  .content-main {
+    margin-bottom: spacing-vertical(base);
+
+    @include susy-breakpoint($bp-medium, $susy) {
+      @include span(9 of 12 first);
+    }
+  }
+
+  .content-secondary {
+
+    @include susy-breakpoint($bp-medium, $susy) {
+      @include span(3 of 12 last);
+    }
+  }
+}

lms/templates/certificates/invalid.html

 <%inherit file="accomplishment-base.html" />
 <%! from django.utils.translation import ugettext as _ %>
 
-<div class="wrapper-content">
+<div class="wrapper-content status status-invalid">
     <div class="wrapper-content-grid">
-
-        <section class="content content-main" role="main">
-            <div class="status status-invalid" id="validation-status">
-                <h2 class="title title-lvl2">${_("This is an invalid certificate number")}</h2>
-            </div>
-
-            <div class="feedback">
-                <div class="feedback-lead">
-                    <h3 class="title">${_("This Certificate Does Not Exist")}</h3>
-                    <div class="copy">
-                        <p>${_("We cannot find a certificate on file that matches this URL or ID number.")}</p>
-                    </div>
-                </div>
-
-                <div class="feedback-support">
-                    <h3 class="title">${_("Looking for a Particular Certificate?")}</h3>
-
+        <main class="content content-main">
+            <section class="">
+                <h2 class="title">${_("Cannot Find Certificate")}</h2>
                 <div class="copy">
-                        <p>${_("Ensure that the ID number is an exact match of the ID number on the PDF or print certificate you are referencing.")}</p>
-                    </div>
-                </div>
-
-                <div class="feedback-warning">
-                    <h3 class="title">Please Note</h3>
-                    <div class="copy">
-                        <p>${_("If you are trying to validate a certificate with this ID number, it may be a forgery.")}</p>
-                    </div>
-                </div>
+                    <p>${_("We cannot find a certificate with this URL or ID number. If you are trying to validate a certificate, make sure that the URL or ID number is correct. If you are sure that the URL or ID number is correct, contact support.")}</p>
                 </div>
             </section>
-
+        </main>
+        <aside role="complementary" class="content-secondary about" aria-label="About ${platform_name} Certificates">
+        </aside>
     </div>
 </div>