Updated Take Photo page to include verification requirements

As part of the unification of verify later/now, the take photo page needs to list the verification requirements.

XCOM-254

lms/static/sass/views/_verification.scss

@@ -619,6 +619,44 @@
       }
     }
 
+    @mixin help {
+      margin-bottom: ($baseline*1.5);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .title {
+        @extend %hd-lv3;
+      }
+
+      .copy {
+        @extend %copy-detail;
+      }
+    }
+
+    .requirements {
+      margin-bottom: 10px;
+      @include outer-container;
+
+      .title {
+        @extend %hd-lv3;
+        margin-bottom: 10px;
+      }
+
+      .requirement {
+        @include help();
+
+        border: 1px solid #e5e5e5;
+        border-top: 5px solid #f4d78a;
+        padding: 10px;
+        box-shadow: 1px 1px 3px #888888;
+
+        // TODO Determine why this is not responsive.
+        @include span-columns(6);
+      }
+    }
+
     .wrapper-task {
       @include clearfix();
       width: flex-grid(12,12);
@@ -630,19 +668,7 @@
         padding: 0 $baseline;
 
         .help {
-          margin-bottom: ($baseline*1.5);
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-
-          .title {
-            @extend %hd-lv3;
-          }
-
-          .copy {
-            @extend %copy-detail;
-          }
+          @include help();
 
           .example {
             color: $m-gray-l2;
@@ -670,6 +696,10 @@
             }
           }
 
+          .copy-extra {
+            color: $black;
+          }
+
           // help - faq
           .list-faq {
             margin-bottom: $baseline;
@@ -2415,9 +2445,22 @@
 }
 
 // UI: photo reverification heading
-h1.photo_verification {
+h2.photo_verification {
   @extend %t-title1;
   text-align: left;
+  text-transform: none;
+}
+
+.facephoto.view {
+  .wrapper-task {
+    #facecam {
+      float: left;
+    }
+
+    .wrapper-help {
+      float: right;
+    }
+  }
 }
 
 // ====================

lms/templates/verify_student/face_photo_step.underscore

 <div id="wrapper-facephoto" class="wrapper-view block-photo face-photo-step">
+
+    <div class="requirements">
+        <h2 class="title"><%- gettext( "What You Need for Verification" ) %></h2>
+        <div class="requirement">
+            <h3 class="title"><%- gettext( "Webcam" ) %></h3>
+            <p class="copy"><%- gettext( "You need a computer that has a webcam. When you receive a browser prompt, make sure that you allow access to the camera." ) %></p>
+        </div>
+        <div class="requirement">
+            <h3 class="title"><%- gettext( "Photo Identification" ) %></h3>
+            <p class="copy"><%- gettext( "You need a driver's license, passport, or other government-issued ID that has your name and photo." ) %></p>
+        </div>
+    </div>
+
+
   <div class="facephoto view">
-    <h1 class="title photo_verification"><%- gettext( "Take Your Photo" ) %></h1>
+    <h2 class="title photo_verification"><%- gettext( "Take Your Photo" ) %></h2>
     <div class="instruction">
-      <p><%- gettext( "Use your webcam to take a photo of your face. We will match this photo with the photo on your ID." ) %></p>
+      <p><%=  _.sprintf( gettext( "When your face is in position, use the camera button %(icon)s below to take your photo." ), { icon: '<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i><span class="sr">icon</span>)</span>' } ) %></p>
     </div>
 
     <div class="wrapper-task">
-      <div id="facecam" class="task cam"></div>
-
       <div class="wrapper-help">
         <div class="help help-task photo-tips facetips">
-          <h4 class="title"><%- gettext( "Tips on taking a successful photo" ) %></h4>
+          <h3 class="title"><%- gettext( "To take a successful photo, make sure that:" ) %></h3>
 
           <div class="copy">
             <ul class="list-help">
-              <li class="help-item"><%- gettext( "Make sure your face is well-lit" ) %></li>
-              <li class="help-item"><%- gettext( "Be sure your entire face is inside the frame" ) %></li>
-              <li class="help-item">
-                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your photo" ), { icon: '<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i>)</span>' } ) %>
-              </li>
-              <li class="help-item"><%- gettext( "Can we match the photo you took with the one on your ID?" ) %></li>
-              <li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
+              <li class="help-item"><%- gettext( "Your face is well-lit." ) %></li>
+              <li class="help-item"><%- gettext( "Your entire face fits inside the frame." ) %></li>
+              <li class="help-item"><%- gettext( "The photo of your face matches the photo on your ID." ) %></li>
             </ul>
+
+            <p class="copy-extra"><%=  _.sprintf( gettext( "To use the current photo, select the camera button %(icon)s. To take another photo, select the retake button %(icon)s." ), { icon: '<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i><span class="sr">icon</span>)</span>' } ) %></p>
           </div>
         </div>
 
         <div class="help help-faq facefaq">
-          <h4 class="sr title"><%- gettext( "Frequently Asked Questions" ) %></h4>
+          <h3 class="sr title"><%- gettext( "Frequently Asked Questions" ) %></h3>
           <div class="copy">
             <dl class="list-faq">
               <dt class="faq-question">
@@ -41,6 +51,8 @@
           </div>
         </div>
       </div>
+
+      <div id="facecam" class="task cam"></div>
     </div>
 
     <% if ( nextStepTitle ) { %>

pavelib/assets.py

@@ -128,6 +128,8 @@ def compile_coffeescript(*files):
     ))
 
 
+@task
+@no_help
 def compile_sass(debug=False):
     """
     Compile Sass to CSS.