Verification: moves common page elements/copy into central templates w/ supportive styling

common/templates/course_modes/_contribution.html

@@ -1,32 +1,32 @@
-              <ul class="list-fields contribution-options">
-                % for price in suggested_prices:
-                <li class="field contribution-option">
-                  <input type="radio" name="contribution" value="${price|h}" ${'checked' if price == chosen_price else ''} id="contribution-${price|h}" />
-                  <label for="contribution-${price|h}">
-                    <span class="deco-denomination">$</span>
-                    <span class="label-value">${price}</span>
-                    <span class="denomination-name">${currency}</span>
-                  </label>
-                </li>
-                % endfor
+<ul class="list-fields contribution-options">
+  % for price in suggested_prices:
+  <li class="field contribution-option">
+    <input type="radio" name="contribution" value="${price|h}" ${'checked' if price == chosen_price else ''} id="contribution-${price|h}" />
+    <label for="contribution-${price|h}">
+      <span class="deco-denomination">$</span>
+      <span class="label-value">${price}</span>
+      <span class="denomination-name">${currency}</span>
+    </label>
+  </li>
+  % endfor
 
-                <li class="field">
-                  <ul class="field-group field-group-other">
-                    <li class="contribution-option contribution-option-other1">
-                      <input type="radio" id="contribution-other" name="contribution" value="" ${'checked' if (chosen_price and chosen_price not in suggested_prices) else ''} />
-                      <label for=" contribution-other"><span class="sr">Other</span></label>
-                    </li>
+  <li class="field">
+    <ul class="field-group field-group-other">
+      <li class="contribution-option contribution-option-other1">
+        <input type="radio" id="contribution-other" name="contribution" value="" ${'checked' if (chosen_price and chosen_price not in suggested_prices) else ''} />
+        <label for=" contribution-other"><span class="sr">Other</span></label>
+      </li>
 
-                    <li class="contribution-option contribution-option-other2">
-                      <label for="contribution-other-amt">
-                        <span class="sr">Other Amount</span>
-                      </label>
-                      <div class="wrapper">
-                        <span class="deco-denomination">$</span>
-                        <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" value="${chosen_price if (chosen_price and chosen_price not in suggested_prices) else ''}"/>
-                        <span class="denomination-name">${currency}</span>
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
+      <li class="contribution-option contribution-option-other2">
+        <label for="contribution-other-amt">
+          <span class="sr">Other Amount</span>
+        </label>
+        <div class="wrapper">
+          <span class="deco-denomination">$</span>
+          <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" value="${chosen_price if (chosen_price and chosen_price not in suggested_prices) else ''}"/>
+          <span class="denomination-name">${currency}</span>
+        </div>
+      </li>
+    </ul>
+  </li>
+</ul>

common/templates/course_modes/choose.html

@@ -37,14 +37,7 @@ $(document).ready(function() {
 <div class="container">
   <section class="wrapper">
 
-    <header class="page-header">
-      <h2 class="title">
-        <span class="wrapper-sts">
-          <span class="sts">${_("You are registering for")}</span>
-          <span class="sts-course">${course_id} </span>
-        </span>
-      </h2>
-    </header>
+    <%include file="/verify_student/_verification_header.html" />
 
     <div class="wrapper-register-choose wrapper-content-main">
       <article class="register-choose content-main">
@@ -153,10 +146,14 @@ $(document).ready(function() {
 
           <div class="help help-register">
             <h3 class="title">${_("Verified Registration Requirements")}</h3>
-
             <div class="copy">
               <p>${_("To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID.")} <a href="">${_("View requirements")}</a></p>
             </div>
+
+            <h3 class="title">${_("What is an ID Verified Certificate?")}</h3>
+            <div class="copy">
+              <p>${_("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.")}</p>
+            </div>
           </div>
           % endif
 
@@ -165,32 +162,7 @@ $(document).ready(function() {
       </article>
     </div> <!-- /wrapper-content-main -->
 
-    <div class="wrapper-content-supplementary">
-      <aside class="content-supplementary">
-        <ul class="list-help">
-          <li class="help-item">
-            <h3 class="title">${_("What is an ID Verified Certificate?")}</h3>
-            <div class="copy">
-              <p>${_("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.")}</p>
-            </div>
-          </li>
-
-          <li class="help-item">
-            <h3 class="title">${_("Have questions?")}</h3>
-            <div class="copy">
-              <p>${_("Please read ")}<a rel="external" href="">${_("our FAQs to view common questions about our certificates")}</a>${_(".")}</p>
-            </div>
-          </li>
-
-          <li class="help-item">
-            <h3 class="title">${_("Not the course you wanted?")}</h3>
-            <div class="copy">
-                <p><a href="${marketing_link('COURSES')}">${_("Return to our course listings to find another course")}</a></p>
-            </div>
-          </li>
-        </ul>
-      </aside>
-    </div> <!-- /wrapper-content-supplementary -->
+    <%include file="/verify_student/_verification_support.html" />
   </section>
 </div>
 </%block>

lms/static/sass/views/_verification.scss

@@ -1080,6 +1080,10 @@
   // VIEW: select a track
   &.step-select-track {
 
+    .sts-track {
+      @extend .text-sr;
+    }
+
     .form-register-choose {
       @include clearfix();
       width: flex-grid(12,12);
@@ -1214,6 +1218,7 @@
       .title {
         @extend .hd-lv4;
         @extend .t-weight4;
+        margin-top: $baseline;
         margin-bottom: ($baseline/2);
       }
 

lms/templates/verify_student/_modal_editname.html

@@ -0,0 +1,27 @@
+<%! from django.utils.translation import ugettext as _ %>
+
+<section id="edit-name" class="modal">
+<header>
+  <h4>${_("Edit Your Full Name")}</h4>
+</header>
+  <form id="course-checklists" class="course-checklists" method="post" action="">
+    <div role="alert" class="status message submission-error" tabindex="-1">
+      <p class="message-title">${_("The following error occured while editing your name:")}
+        <span class="message-copy"> </span>
+      </p>
+    </div>
+    <p>
+      <label for="name">${_('Full Name')}</label>
+      <input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
+    </p>
+
+    <div class="actions">
+      <button class="action action-primary" type="submit">${_("Save")}</button>
+      <button class="action action-secondary action-cancel">${_("Cancel")}</button>
+    </div>
+  </form>
+  <a href="#" data-dismiss="modal" rel="view" class="action action-close action-editname-close">
+    <i class="icon-remove-sign"></i>
+    <span class="label">close</span>
+  </a>
+</section>

lms/templates/verify_student/_verification_header.html

@@ -0,0 +1,15 @@
+<%! from django.utils.translation import ugettext as _ %>
+
+<header class="page-header">
+  <h2 class="title">
+    <span class="wrapper-sts">
+      <span class="sts">${_("You are registering for")}</span>
+      <span class="sts-course">${course_id}</span>
+    </span>
+    <span class="sts-track">
+      <span class="sts-track-value">
+        <span class="context">${_("Registering as: ")}</span> ${_("ID Verified")}
+      </span>
+    </span>
+  </h2>
+</header>

lms/templates/verify_student/_verification_support.html

@@ -0,0 +1,21 @@
+<%! from django.utils.translation import ugettext as _ %>
+
+<div class="wrapper-content-supplementary">
+  <aside class="content-supplementary">
+    <ul class="list-help">
+      <li class="help-item">
+        <h3 class="title">${_("Have questions?")}</h3>
+        <div class="copy">
+          <p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
+        </div>
+      </li>
+
+      <li class="help-item">
+        <h3 class="title">${_("Change your mind?")}</h3>
+        <div class="copy">
+          <p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
+        </div>
+      </li>
+    </ul>
+  </aside>
+</div> <!-- /wrapper-content-supplementary -->

lms/templates/verify_student/photo_verification.html

@@ -16,19 +16,7 @@
 <div class="container">
   <section class="wrapper">
 
-    <header class="page-header">
-      <h2 class="title">
-        <span class="wrapper-sts">
-          <span class="sts">${_("You are registering for")}</span>
-          <span class="sts-course">${course_id}</span>
-        </span>
-        <span class="sts-track">
-          <span class="sts-track-value">
-            <span class="context">${_("Registering as:")}</span> ${_("ID Verified")}
-          </span>
-        </span>
-      </h2>
-    </header>
+    <%include file="_verification_header.html" />
 
     <div class="wrapper-progress">
       <section class="progress">
@@ -359,51 +347,9 @@
       </article>
     </div> <!-- /wrapper-content-main -->
 
-    <div class="wrapper-content-supplementary">
-      <aside class="content-supplementary">
-        <ul class="list-help">
-          <li class="help-item">
-            <h3 class="title">${_("Have questions?")}</h3>
-            <div class="copy">
-              <p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
-            </div>
-          </li>
-
-          <li class="help-item">
-            <h3 class="title">${_("Change your mind?")}</h3>
-            <div class="copy">
-              <p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
-            </div>
-          </li>
-        </ul>
-      </aside>
-    </div> <!-- /wrapper-content-supplementary -->
+     <%include file="_verification_support.html" />
   </section>
 </div>
 
-<section id="edit-name" class="modal">
-<header>
-  <h4>${_("Edit Your Full Name")}</h4>
-</header>
-  <form id="course-checklists" class="course-checklists" method="post" action="">
-    <div role="alert" class="status message submission-error" tabindex="-1">
-      <p class="message-title">${_("The following error occured while editing your name:")}
-        <span class="message-copy"> </span>
-      </p>
-    </div>
-    <p>
-      <label for="name">${_('Full Name')}</label>
-      <input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
-    </p>
-
-    <div class="actions">
-      <button class="action action-primary" type="submit">${_("Save")}</button>
-      <button class="action action-secondary action-cancel">${_("Cancel")}</button>
-    </div>
-  </form>
-  <a href="#" data-dismiss="modal" rel="view" class="action action-close action-editname-close">
-    <i class="icon-remove-sign"></i>
-    <span class="label">close</span>
-  </a>
-</section>
+<%include file="_modal_editname.html" />
 </%block>

lms/templates/verify_student/show_requirements.html

@@ -22,19 +22,7 @@
 <div class="container">
   <section class="wrapper">
 
-    <header class="page-header">
-      <h2 class="title">
-        <span class="wrapper-sts">
-          <span class="sts">${_("You are registering for")}</span>
-          <span class="sts-course">${course_id}</span>
-        </span>
-        <span class="sts-track">
-          <span class="sts-track-value">
-            <span class="context">${_("Registering as: ")}</span> ${_("ID Verified")}
-          </span>
-        </span>
-      </h2>
-    </header>
+    <%include file="_verification_header.html" />
 
     <div class="wrapper-progress">
       <section class="progress">
@@ -162,25 +150,7 @@
       </article>
     </div> <!-- /wrapper-content-main -->
 
-    <div class="wrapper-content-supplementary">
-      <aside class="content-supplementary">
-        <ul class="list-help">
-          <li class="help-item">
-            <h3 class="title">${_("Have questions?")}</h3>
-            <div class="copy">
-              <p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
-            </div>
-          </li>
-
-          <li class="help-item">
-            <h3 class="title">${_("Change your mind?")}</h3>
-            <div class="copy">
-              <p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
-            </div>
-          </li>
-        </ul>
-      </aside>
-    </div> <!-- /wrapper-content-supplementary -->
+    <%include file="_verification_support.html" />
   </section>
 </div>
 </%block>

lms/templates/verify_student/verified.html

@@ -40,19 +40,7 @@ $(document).ready(function() {
 <div class="container">
   <section class="wrapper">
 
-    <header class="page-header">
-      <h2 class="title">
-        <span class="wrapper-sts">
-          <span class="sts">${_("You are registering for")}</span>
-          <span class="sts-course">${course_id}</span>
-        </span>
-        <span class="sts-track">
-          <span class="sts-track-value">
-            <span class="context">${_("Registering as:")}</span> ${_("ID Verified")}
-          </span>
-        </span>
-      </h2>
-    </header>
+    <%include file="_verification_header.html" />
 
     <div class="wrapper-progress">
       <section class="progress">
@@ -112,25 +100,7 @@ $(document).ready(function() {
       </article>
     </div> <!-- /wrapper-content-main -->
 
-    <div class="wrapper-content-supplementary">
-      <aside class="content-supplementary">
-        <ul class="list-help">
-          <li class="help-item">
-            <h3 class="title">${_("Have questions?")}</h3>
-            <div class="copy">
-              <p>${_("Please read {a_start} our FAQs to view common questions about our certificates {a_end}.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
-            </div>
-          </li>
-
-          <li class="help-item">
-            <h3 class="title">${_("Change your mind?")}</h3>
-            <div class="copy">
-              <p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
-            </div>
-          </li>
-        </ul>
-      </aside>
-    </div> <!-- /wrapper-content-supplementary -->
+    <%include file="_verification_support.html" />
   </section>
 </div>
 </%block>