From b5302a192fd2d0ab2cc55b0ea077e00c1b59c93d Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Fri, 23 Aug 2013 16:49:01 -0400
Subject: [PATCH] refinements to the vcert requirements page

---
 lms/static/sass/views/_verification.scss      | 418 ++++++++++--------
 lms/templates/verify_student/face_upload.html |  25 +-
 .../verify_student/photo_id_upload.html       |   2 +-
 .../verify_student/show_requirements.html     | 106 +++--
 4 files changed, 294 insertions(+), 257 deletions(-)

diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 2f558c0eac..f42c7ddfd9 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -4,10 +4,15 @@
 body.register.verification {
   font-family: 'Open Sans', sans-serif;
 
+// some nasty resets and standard styles
   h1, h2, h3, h4, h5, h6, p, input {
     font-family: 'Open Sans', sans-serif;
   }
 
+  p {
+    margin-bottom: ($baseline*.75);
+  }
+
   input {
     font-style: normal;
     font-weight: 400;
@@ -43,7 +48,7 @@ body.register.verification {
   }
 
 
-
+// basic reusable bits
   .content-wrapper {
     background: none repeat scroll 0 0 #F7F7F7;
     padding-bottom: 0;
@@ -81,95 +86,6 @@ body.register.verification {
     font-weight: bold;
   }
 
-  .select {
-    @include clearfix();
-
-    .divider {
-      display: block;
-      clear: both;
-      width: 60%;
-      margin: $baseline $baseline 0 $baseline;
-      border-top: 2px solid #ddd;
-
-      p {
-        position: relative;
-        top: -$baseline;
-        width: 40px;
-        margin: 0 auto;
-        padding: 0 $baseline;
-        background-color: #fff;
-        font-size: 24px;
-        color: #aaa;
-        text-align: center;
-      }
-    }
-
-    .block {
-      position: relative;
-      float: left;
-      margin: 0 $baseline ($baseline*1.5) 0;
-      border-top: 5px solid #32A5D9;
-      background-color: #eee;
-      padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5);
-      width: 60%;
-
-
-      &.block-cert {
-        border-top: 5px solid #008801;
-
-        .ribbon {
-          background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0;
-          position: absolute;
-          top: -($baseline*1.5);
-          right: $baseline;
-          display: block;
-          width: ($baseline*3);
-          height: ($baseline*4);
-        }
-      }
-
-
-      p, li, dl {
-        color: $lighter-base-font-color;
-      }
-
-      .wrap-copy {
-        width: 60%;
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      .title {
-        @extend .t-title7;
-      }
-
-      .m-btn-primary {
-        position: absolute;
-        bottom: ($baseline*1.5);
-        right: ($baseline*1.5);
-      }
-
-
-    }
-
-    hr {
-      margin: 1em 0 2em 0;
-    }
-
-    .more {
-      margin-top: ($baseline/2);
-      border-top: 1px solid #ccc;
-    }
-
-    .tips {
-      float: right;
-      width: 32%;
-
-      p {
-        font-size: 14px;
-      }
-    }
-  }
 
 
   .pay-options {
@@ -187,6 +103,7 @@ body.register.verification {
       &.other1 {
         margin-right: -($baseline/4);
         padding-right: ($baseline/4);
+        min-height: 25px;
       }
       &.other2 {
         padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
@@ -204,9 +121,13 @@ body.register.verification {
   }
 
  .m-btn-primary {
+    margin-bottom: 0;
+    padding: 0;
 
     a {
       color: $very-light-text;
+      display: block;
+      padding: ($baseline*.75) $baseline;
 
       &:hover {
         text-decoration: none;
@@ -215,7 +136,7 @@ body.register.verification {
     }
 
     &.disabled, &[disabled], &.is-disabled {
-      background-color: #A0B6CD;
+      background-color: #ccc;
       box-shadow: none;
       pointer-events: none;
 
@@ -250,135 +171,258 @@ body.register.verification {
   }
 
 
-  // for dev placement only
-  .placeholder-cam,
-  .placeholder-photo  {
-    height: 300px;
-    background-color: #eee;
-    position: relative;
 
-    p {
-      position: absolute;
-      top: 40%;
-      left: 40%;
-      color: #ccc;
-    }
-  }
 
-  .block-photo {
-    @include clearfix();
-    background-color: $white;
 
-    .title {
-      font-weight: bold;
-    }
 
-    .wrapper-up,
-    .wrapper-down {
+// select a track page
+  &.select-track {
+
+    .select {
       @include clearfix();
-    }
 
-    .cam {
-      width: 45%;
-      float: left;
-      padding-right: $baseline;
-    }
+      .divider {
+        display: block;
+        clear: both;
+        width: 60%;
+        margin: $baseline $baseline 0 $baseline;
+        border-top: 2px solid #ddd;
 
-    .photo-controls {
-      background-color: #ddd;
+        p {
+          position: relative;
+          top: -$baseline;
+          width: 40px;
+          margin: 0 auto;
+          padding: 0 $baseline;
+          background-color: #fff;
+          font-size: 24px;
+          color: #aaa;
+          text-align: center;
+        }
+      }
 
-      .controls-list {
-        @include clearfix();
+      .block {
         position: relative;
-        margin: 0;
-        padding: ($baseline*.25) ($baseline*.75);
-        list-style-type: none;
+        float: left;
+        margin: 0 $baseline ($baseline*1.5) 0;
+        border-top: 5px solid #32A5D9;
+        background-color: #eee;
+        padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5);
+        width: 60%;
 
-        .control {
-          display: inline-block;
 
-          .action {
-            @extend .button-primary;
+        &.block-cert {
+          border-top: 5px solid #008801;
+
+          .ribbon {
+            background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0;
+            position: absolute;
+            top: -($baseline*1.5);
+            right: $baseline;
             display: block;
-            background-color: $blue;
-            color: $white;
-            padding: ($baseline*.25) ($baseline*.5);
-            border: none;
-
-            &:hover {
-
-            }
-
+            width: ($baseline*3);
+            height: ($baseline*4);
           }
+        }
 
 
-          &.is-hidden {
-            visibility: hidden;
-          }
+        p, li, dl {
+          color: $lighter-base-font-color;
+        }
 
-          &.is-shown {
-            visibility: visible;
-          }
+        .wrap-copy {
+          width: 60%;
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        .title {
+          @extend .t-title7;
+        }
+
+        .m-btn-primary {
+          position: absolute;
+          bottom: ($baseline*1.5);
+          right: ($baseline*1.5);
+        }
 
 
-          &.control-do {
-            position: relative;
-            left: 45%;
-          }
+      }
 
-          &.control-redo {
-            position: absolute;
-            left: ($baseline/2);
-          }
+      hr {
+        margin: 1em 0 2em 0;
+      }
 
-          &.control-approve {
-            position: absolute;
-            right: ($baseline/2);
-          }
+      .more {
+        margin-top: ($baseline/2);
+        border-top: 1px solid #ccc;
+      }
 
-          &.approved a {
-            background-color: $green;
-          }
+      .tips {
+        float: right;
+        width: 32%;
+
+        p {
+          font-size: 14px;
         }
       }
     }
+  }
 
-    .faq {
+// requirements page
+  &.requirements {
+    .req {
+      width: 30%;
+      display: inline-block;
+      margin-right: $baseline;
+      text-align: center;
+      vertical-align: top;
+    }
+
+    .next-step {
+      float: right;
+    }
+
+  }
+
+// take and review photos page
+  &.photos {
+    // for dev placement only
+    .placeholder-cam,
+    .placeholder-photo  {
+      height: 300px;
+      background-color: #eee;
+      position: relative;
+
+      p {
+        position: absolute;
+        top: 40%;
+        left: 40%;
+        color: #ccc;
+      }
+    }
+
+    .block-photo {
+      @include clearfix();
+      background-color: $white;
+
+      .title {
+        font-weight: bold;
+      }
+
+      .wrapper-up,
+      .wrapper-down {
+        @include clearfix();
+      }
+
+      .cam {
+        width: 45%;
+        float: left;
+        padding-right: $baseline;
+      }
+
+      .photo-controls {
+        background-color: #ddd;
+
+        .controls-list {
+          @include clearfix();
+          position: relative;
+          margin: 0;
+          padding: ($baseline*.25) ($baseline*.75);
+          list-style-type: none;
+
+          .control {
+            display: inline-block;
+
+            .action {
+              @extend .button-primary;
+              display: block;
+              background-color: $blue;
+              color: $white;
+              padding: ($baseline*.25) ($baseline*.5);
+              border: none;
+
+              &:hover {
+
+              }
+
+            }
+
+
+            &.is-hidden {
+              visibility: hidden;
+            }
+
+            &.is-shown {
+              visibility: visible;
+            }
+
+
+            &.control-do {
+              position: relative;
+              left: 45%;
+            }
+
+            &.control-redo {
+              position: absolute;
+              left: ($baseline/2);
+            }
+
+            &.control-approve {
+              position: absolute;
+              right: ($baseline/2);
+            }
+
+            &.approved a {
+              background-color: $green;
+            }
+          }
+        }
+      }
+
+      .faq {
+        width: 45%;
+        float: left;
+        padding-right: $baseline;
+      }
+
+    }
+
+    .photo-tips {
       width: 45%;
       float: left;
-      padding-right: $baseline;
+
+        ul {
+          margin: 0;
+          padding: 0;
+          list-style-type: none;
+        }
+
+        li {
+          margin-bottom: $baseline;
+        }
+
+
+
     }
 
-  }
+    .next-step {
+      width: 45%;
+      float: right;
+    }
 
-  .photo-tips {
-    width: 45%;
-    float: left;
-  }
+    .support {
+      margin-top: ($baseline*2);
+    }
 
-  .actions {
-    width: 45%;
-    float: right;
+    .review-photo {
+      width: 45%;
+      float: left;
+    }
 
-    ul {
-      padding: 0;
-      margin: 0;
-      list-style-type: none;
+    #review-facephoto {
+      margin-right: $baseline;
     }
   }
 
-  .support {
-    margin-top: ($baseline*2);
-  }
-
-  .review-photo {
-    width: 45%;
-    float: left;
-  }
-
-  #review-facephoto {
-    margin-right: $baseline;
-  }
-
-
 }
diff --git a/lms/templates/verify_student/face_upload.html b/lms/templates/verify_student/face_upload.html
index 8a92fa438d..6018d3540f 100644
--- a/lms/templates/verify_student/face_upload.html
+++ b/lms/templates/verify_student/face_upload.html
@@ -121,15 +121,11 @@ $(document).ready(function() {
             </dl>
         </div>
 
-        <div class="actions">
-          <ul>
-            <li class="action action-next">
+        <div class="next-step">
               <p class="m-btn-primary">
                 <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
               </p>
               <p class="tip">Once you verify your photo looks good, you can move on to step 2.</p>
-            </li>
-          </ul>
         </div>
       </div>
     </div>
@@ -193,15 +189,11 @@ $(document).ready(function() {
           </dl>
         </div>
 
-        <div class="actions">
-          <ul>
-            <li class="action action-next">
+        <div class="next-step">
               <p class="m-btn-primary">
                 <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
               </p>
               <p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p>
-            </li>
-          </ul>
         </div>
       </div>
 
@@ -247,7 +239,7 @@ $(document).ready(function() {
         </div>
       </div>
 
-
+<hr />
 
       <div class="wrapper-down">
         <h3>Check Your Contribution</h3>
@@ -279,21 +271,14 @@ $(document).ready(function() {
       </div>
 
 
-      <div class="next">
+      <div class="next-step">
 
         <p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
-
-
         <input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label>
 
-      <div class="actions">
-        <ul>
-          <li class="action action-next">
             <p  class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
             <p class="tip">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
-          </li>
-        </ul>
-      </div>
+
     </div>
   </section>
 
diff --git a/lms/templates/verify_student/photo_id_upload.html b/lms/templates/verify_student/photo_id_upload.html
index eac9c1a362..6d6cfb74e7 100644
--- a/lms/templates/verify_student/photo_id_upload.html
+++ b/lms/templates/verify_student/photo_id_upload.html
@@ -1,7 +1,7 @@
 <%! from django.utils.translation import ugettext as _ %>
 <%! from django.core.urlresolvers import reverse %>
 <%inherit file="../main.html" />
-<%block name="bodyclass">register verification select</%block>
+<%block name="bodyclass">register verification select-track</%block>
 
 <%block name="js_extra">
   <script type="text/javascript">
diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html
index 5d27a8e684..99b3459105 100644
--- a/lms/templates/verify_student/show_requirements.html
+++ b/lms/templates/verify_student/show_requirements.html
@@ -1,7 +1,7 @@
 <%! from django.utils.translation import ugettext as _ %>
 <%! from django.core.urlresolvers import reverse %>
 <%inherit file="../main.html" />
-<%block name="bodyclass">register verification select</%block>
+<%block name="bodyclass">register verification requirements</%block>
 
 <%block name="content">
 <div class="container">
@@ -22,61 +22,69 @@
   </ol>
   </section>
 
-    <h3 class="title">What You Will Need to Register</h3>
+  <h3 class="title">What You Will Need to Register</h3>
 
-<p>There are a few things you will need to register as an ID verified student :</p>
+  <p>There are a few things you will need to register as an ID verified student :</p>
+  <div class="reqs">
+    <div class="req1 req">
+      <h4>Identification</h4>
+        <p>A photo identification document like a drivers license, passport, or student ID.</p>
+    </div>
 
-<dl>
-  <dt>Identification</dt>
-    <dd>An identification document like a drivers license, passport, student ID, or whatever is acceptable.</dd>
+    <div class="req2 req">
+    <h4>Webcam</h4>
+        <p>A webcam that connects to your computer and a modern browser.</p>
+    </div>
 
-  <dt>Webcam</dt>
-    <dd>A webcam that connects to your computer, a modern browser, and whatever these</dd>
+      <div class="req3 req">
+      <h4>Credit or Debit Card</h4>
+        <p>A major credit or debit card.</p>
+    </div>
+  </div>
 
-  <dt>credit or debit card</dt>
-    <dd>A credit or debit card that is Mastercard or Visa or whatever the requirements are goes here.</dd>
-</dl>
+  <p class="tip">Missing something? <a href="">You can always take the Audit track</a>.</p>
+
+  <hr />
+
+  <h3>Steps to get Verified</h3>
+
+    <div class="next-step">
+      <p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
+    </div>
+
+  <h4>Step 1: Take Your Photo</h4>
+  <p>To verify your identity, we need a clear and well-lit photo of your face to match it with your ID.</p>
+
+  <h4>Step 2: Take a photo of your ID</h4>
+  <p>To verify your identity, we need a clear and well-lit photo of your ID to match it with your face.</p>
+
+  <h4>Step 3: Verify your submissions</h4>
+  <p>Review your photos to verify they are correct.</p>
+
+  <h4>Step 4:  Submit payment</h4>
+  <p>Pay for your course using a major credit of debit cards.</p>
+  <ul>
+    <li>Cards accepted:</li>
+    <li>Visa</li>
+    <li>Master Card</li>
+    <li>Maestro</li>
+    <li>Amex</li>
+    <li>Discover</li>
+    <li>JCB (provided it has the Discover logo on the card)</li>
+    <li>Diners Club</li>
+    <li>...need to list several more once firm</li>
+  </ul>
+
+  <h4>You're Ready to Start Learning</h4>
+
+  <p>You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.</p>
 
 
-<p class="tip">Missing something? You can always take the Audit track.</p>
+    <div class="next-step">
+      <p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
+    </div>
 
-<hr />
-
-<h3>Steps to get Verified</h3>
-
-<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
-
-<h4>Step 1: Take Your Photo</h4>
-<p>To verify your identity, we need a clear and well-lit photo of your face to match it with your ID.</p>
-
-<h4>Step 2: Take a photo of your ID</h4>
-<p>To verify your identity, we need a clear and well-lit photo of your ID to match it with your face.</p>
-
-<h4>Step 3: Verify your submissions</h4>
-<p>Review your photos to verify they are correct.</p>
-
-<h4>Step 4:  Submit payment</h4>
-<p>Pay for your course using a major credit of debit cards.</p>
-<ul>
-  <li>Cards accepted:</li>
-  <li>Visa</li>
-  <li>Master Card</li>
-  <li>Maestro</li>
-  <li>Amex</li>
-  <li>Discover</li>
-  <li>JCB (provided it has the Discover logo on the card)</li>
-  <li>Diners Club</li>
-  <li>...need to list several more once firm</li>
-</ul>
-
-<h4>You're Ready to Start Learning</h4>
-
-<p>You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.</p>
-
-
-<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
-
-</section>
+  </section>
 
   <section class="support">
     <p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>