Verified: revising template UI, styling, and infrastructure

common/templates/course_modes/choose.html

@@ -3,15 +3,16 @@
 <%inherit file="../main.html" />
 
 <%block name="bodyclass">register verification-process step-select-track</%block>
+<%block name="title"><title>${("Register for [Course Name] | Choose Your Track")}</title></%block>
 
 <%block name="js_extra">
 <script type="text/javascript">
 
 $(document).ready(function() {
-  $( ".more" ).hide();
-  $( ".expand" ).click(function(e) {
+  $('.is-expandable .expandable-more').addClass('is-hidden');
+  $('.is-expandable .title-expand').click(function(e) {
       e.preventDefault();
-      $(this).next().slideToggle();
+      $(this).parent().find('.expandable-more').toggleClass('is-hidden');
   });
 });
 </script>
@@ -23,9 +24,14 @@ $(document).ready(function() {
 
     <header class="page-header">
       <h2 class="title">
-        <span class="status-track">(ID Verified)</span>
-        <span class="status">You are registering for</span>
-        <span class="status-course">${course_id} </span>
+        <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-label">Registering as: </span>
+          <span class="sts-track-value">ID Verified</span>
+        </span>
       </h2>
     </header>
 
@@ -33,7 +39,7 @@ $(document).ready(function() {
       <article class="register-choose content-main">
         <h3 class="title">Select your track:</h3>
 
-        <form cass="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
+        <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
 
           % if "audit" in modes:
           <div class="register-choice register-choice-audit">
@@ -44,7 +50,7 @@ $(document).ready(function() {
               </div>
             </div>
 
-            <ul class="actions">
+            <ul class="list-actions">
               <li class="action action-select">
                 <input type="submit" name="mode" value="Select Audit" />
               </li>
@@ -69,18 +75,19 @@ $(document).ready(function() {
             <div class="field field-certificate-contribution">
               <h5 class="label">Select your contribution for this course:</h5>
 
-              <ul class="contribution-options">
+              <ul class="list-fields contribution-options">
                 % for price in modes["verified"].suggested_prices.split(","):
-                <li class="contribution-option">
+                <li class="field contribution-option">
                   <input type="radio" name="contribution" value="${price|h}" />
                   <label for="contribution-${price|h}" />
                     <span class="deco-denomination">$</span>
                     <span class="label-value">${price} ${modes["verified"].currency.upper()}</span>
-                    <span class="denomination-name">USD</span>
+                    <span class="denomination-name"><abbr title="United States Dollars"><abbr title="United States Dollars">USD</abbr></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=""/>
                       <label for=" contribution-other"><span class="sr">Other</span></label>
@@ -93,15 +100,17 @@ $(document).ready(function() {
                       <div class="wrapper">
                         <span class="deco-denomination">$</span>
                         <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" />
-                    <span class="denomination-name">USD</span>
+                        <span class="denomination-name"><abbr title="United States Dollars"><abbr title="United States Dollars">USD</abbr></span>
                       </div>
                     </li>
                   </ul>
+                </li>
+              </ul>
 
               <div class="help-tip is-expandable">
-                <h5 class="title">Why do I have to pay? What if I don't meet all the requirements?</h5>
+                <h5 class="title title-expand">Why do I have to pay? What if I don't meet all the requirements?</h5>
 
-                <div class="copy more">
+                <div class="copy expandable-more">
                   <dl class="list-faq">
                     <dt class="faq-question">Why do I have to pay?</dt>
                     <dd class="faq-answer">
@@ -146,12 +155,23 @@ $(document).ready(function() {
               </div>
             </div>
 
-            <ul class="actions">
+            <ul class="list-actions">
+              <li class="action action-intro">
+                <a href="">What is an ID Verified Certificate?</a>
+              </li>
               <li class="action action-select">
                 <input type="submit" name="mode" value="Select Certificate" />
               </li>
             </ul>
           </div>
+
+          <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>
+          </div>
           % endif
 
           <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
@@ -177,7 +197,7 @@ $(document).ready(function() {
           </li>
 
           <li class="help-item">
-            <h3 class="title"><i class="icon-question-sign"></i> Have questions?</h3>
+            <h3 class="title">Have questions?</h3>
             <div class="copy">
               <p>Please read <a href="">our FAQs to view common questions about our certificates</a>.</p>
             </div>

lms/static/sass/elements/_controls.scss

@@ -56,6 +56,34 @@
   }
 }
 
+// blue primary gray
+.btn-primary-gray {
+  @extend .btn-primary;
+  box-shadow: 0 2px 1px 0 $m-gray-d2;
+  background: $m-gray;
+  color: $white;
+
+  &:hover, &:active {
+    background: $m-gray-l1;
+    color: $white;
+  }
+
+  &.current, &.active {
+    box-shadow: inset 0 2px 1px 1px $m-gray-d2;
+    background: $m-gray;
+    color: $m-gray-l1;
+
+    &:hover, &:active {
+      box-shadow: inset 0 2px 1px 1px $m-gray-d3;
+      color: $m-gray-d3;
+    }
+  }
+
+  &.disabled, &[disabled] {
+    box-shadow: none;
+  }
+}
+
 // blue primary button
 .btn-primary-blue {
   @extend .btn-primary;

lms/templates/verify_student/show_requirements.html

@@ -2,6 +2,7 @@
 <%! from django.core.urlresolvers import reverse %>
 <%inherit file="../main.html" />
 <%block name="bodyclass">register verification-process step-requirements</%block>
+<%block name="title"><title>${("Register for [Course Name]")}</title></%block>
 
 <%block name="content">
 <div class="container">
@@ -9,9 +10,14 @@
 
     <header class="page-header">
       <h2 class="title">
-        <span class="status-track">(ID Verified)</span>
-        <span class="status">You are registering for</span>
-        <span class="status-course">${course_id} </span>
+        <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-label">Registering as: </span>
+          <span class="sts-track-value">ID Verified</span>
+        </span>
       </h2>
     </header>
 
@@ -19,41 +25,43 @@
       <section class="progress">
         <h3 class="sr title">Your Progress</h3>
 
-        <span class="progress-status">
-          <span class="progress-status-value"></span>
-        </span>
-
         <ol class="progress-steps">
-          <li class="progress-step is-completed" id="progress-step0">
-            <span class="step-number">0</span>
+          <li class="progress-step is-current" id="progress-step0">
+            <span class="wrapper-step-number"><span class="step-number">0</span></span>
             <span class="step-name">Intro</span>
           </li>
 
           <li class="progress-step" id="progress-step1">
-            <span class="step-number">1</span>
+            <span class="wrapper-step-number"><span class="step-number">1</span></span>
             <span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
           </li>
 
           <li class="progress-step" id="progress-step2">
-            <span class="step-number">2</span>
-            <span class="step-name">Intro</span>
+            <span class="wrapper-step-number"><span class="step-number">2</span></span>
+            <span class="step-name">Take ID Photo</span>
           </li>
 
           <li class="progress-step" id="progress-step3">
-            <span class="step-number">3</span>
-            <span class="step-name">Intro</span>
+            <span class="wrapper-step-number"><span class="step-number">3</span></span>
+            <span class="step-name">Review</span>
           </li>
 
           <li class="progress-step" id="progress-step4">
-            <span class="step-number">4</span>
-            <span class="step-name">Intro</span>
+            <span class="wrapper-step-number"><span class="step-number">4</span></span>
+            <span class="step-name">Make Payment</span>
           </li>
 
           <li class="progress-step" id="progress-step5">
-            <span class="step-number">5</span>
+            <span class="wrapper-step-number"><span class="step-number">
+              <i class="icon-ok"></i>
+            </span></span>
             <span class="step-name">Confirmation</span>
           </li>
         </ol>
+
+        <span class="progress-sts">
+          <span class="progress-sts-value"></span>
+        </span>
       </section>
     </div>
 
@@ -68,9 +76,10 @@
 
         <ul class="list-reqs">
           <li class="req req-1 req-id">
-            <h4>Identification</h4>
+            <h4 class="title">Identification</h4>
             <div class="placeholder-art">
-              <i class="icon-credit-card"></i>
+              <i class="icon-list-alt icon-under"></i>
+              <i class="icon-user icon-over"></i>
             </div>
 
             <div class="copy">
@@ -82,7 +91,7 @@
           </li>
 
           <li class="req req-2 req-webcam">
-            <h4>Webcam</h4>
+            <h4 class="title">Webcam</h4>
             <div class="placeholder-art">
               <i class="icon-facetime-video"></i>
             </div>
@@ -96,7 +105,7 @@
           </li>
 
           <li class="req req-3 req-payment">
-            <h4>Credit or Debit Card</h4>
+            <h4 class="title">Credit or Debit Card</h4>
             <div class="placeholder-art">
               <i class="icon-credit-card"></i>
             </div>
@@ -111,11 +120,11 @@
         </ul>
 
         <nav class="nav-wizard">
-          <span class="help help-inline">Once you verify your photo looks good, you can move on to step 2.</span>
+          <span class="help help-inline">Missing something? You can always <a href="">audit this course instead</a></span>
 
           <ol class="wizard-steps">
             <li class="wizard-step">
-              <a class="next" id="face_next_button" href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a>
+              <a class="next action-primary" id="face_next_button" href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a>
             </li>
           </ol>
         </nav>
@@ -126,7 +135,7 @@
       <aside class="content-supplementary">
         <ul class="list-help">
           <li class="help-item">
-            <h3 class="title"><i class="icon-question-sign"></i> Have questions?</h3>
+            <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>