diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index e536f2e47e..2343f5933e 100644 --- a/lms/static/sass/views/_verification.scss +++ b/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; + } + } } // ==================== diff --git a/lms/templates/verify_student/face_photo_step.underscore b/lms/templates/verify_student/face_photo_step.underscore index b43d896451..62f56fe6e5 100644 --- a/lms/templates/verify_student/face_photo_step.underscore +++ b/lms/templates/verify_student/face_photo_step.underscore @@ -1,32 +1,42 @@
+ +
+

<%- gettext( "What You Need for Verification" ) %>

+
+

<%- gettext( "Webcam" ) %>

+

<%- gettext( "You need a computer that has a webcam. When you receive a browser prompt, make sure that you allow access to the camera." ) %>

+
+
+

<%- gettext( "Photo Identification" ) %>

+

<%- gettext( "You need a driver's license, passport, or other government-issued ID that has your name and photo." ) %>

+
+
+ +
-

<%- gettext( "Take Your Photo" ) %>

+

<%- gettext( "Take Your Photo" ) %>

-

<%- gettext( "Use your webcam to take a photo of your face. We will match this photo with the photo on your ID." ) %>

+

<%= _.sprintf( gettext( "When your face is in position, use the camera button %(icon)s below to take your photo." ), { icon: '(icon)' } ) %>

-
-
-

<%- gettext( "Tips on taking a successful photo" ) %>

+

<%- gettext( "To take a successful photo, make sure that:" ) %>

    -
  • <%- gettext( "Make sure your face is well-lit" ) %>
  • -
  • <%- gettext( "Be sure your entire face is inside the frame" ) %>
  • -
  • - <%= _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your photo" ), { icon: '()' } ) %> -
  • -
  • <%- gettext( "Can we match the photo you took with the one on your ID?" ) %>
  • -
  • <%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %>
  • +
  • <%- gettext( "Your face is well-lit." ) %>
  • +
  • <%- gettext( "Your entire face fits inside the frame." ) %>
  • +
  • <%- gettext( "The photo of your face matches the photo on your ID." ) %>
+ +

<%= _.sprintf( gettext( "To use the current photo, select the camera button %(icon)s. To take another photo, select the retake button %(icon)s." ), { icon: '(icon)' } ) %>

-

<%- gettext( "Frequently Asked Questions" ) %>

+

<%- gettext( "Frequently Asked Questions" ) %>

@@ -41,6 +51,8 @@
+ +
<% if ( nextStepTitle ) { %> diff --git a/pavelib/assets.py b/pavelib/assets.py index 6887aef561..1053e63e15 100644 --- a/pavelib/assets.py +++ b/pavelib/assets.py @@ -128,6 +128,8 @@ def compile_coffeescript(*files): )) +@task +@no_help def compile_sass(debug=False): """ Compile Sass to CSS.