diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 43950d6f41..bcfc8d09bf 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -226,7 +226,7 @@ } // reset: lists - .list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group, .list-info { + .list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-nav, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group, .list-info { @extend %ui-no-list; } @@ -358,15 +358,22 @@ // UI : message .wrapper-msg { - width: flex-grid(12,12); - margin: 0 auto ($baseline*1.5) auto; + margin-bottom: ($baseline*1.5); border-bottom: ($baseline/4) solid $m-blue; padding: $baseline ($baseline*1.5); background: tint($m-blue, 95%); + .msg { + @include clearfix(); + max-width: grid-width(12); + min-width: 760px; + width: flex-grid(12); + margin: 0 auto; + } + .msg-content, .msg-icon { - display: inline-block; - vertical-align: middle; + display: block; + float: left; } .msg-content { @@ -385,6 +392,7 @@ .msg-icon { width: flex-grid(1,12); @extend %t-icon2; + margin-right: flex-gutter(); text-align: center; color: $m-blue; } @@ -424,6 +432,10 @@ } } + .wrapper-msg-reverify { + + } + // ==================== // UI: inline messages @@ -1851,6 +1863,7 @@ } } } +// ==================== // STATE: already verified .register.is-verified { @@ -1904,6 +1917,8 @@ } } +// ==================== + // STATE: upgrading registration type .register.is-upgrading { @@ -1911,3 +1926,138 @@ margin-top: ($baseline*2) !important; } } + +// STATE: re-verifying +.register.is-not-verified { + + // progress indicator + .progress-sts { + width: 72%; + left: 15%; + } + + // VIEW: photo + &.step-photos { + + // progress nav + .progress .progress-step { + + // STATE: is current + &#progress-step1 { + border-bottom: ($baseline/5) solid $m-blue-d1; + opacity: 1.0; + + .wrapper-step-number { + border-color: $m-blue-d1; + } + + .step-number, .step-name { + color: $m-gray-d3; + } + } + } + + .progress-sts-value { + width: 0% !important; + } + } + + // VIEW: ID + &.step-photos-id { + + // progress nav + .progress .progress-step { + + // STATE: is completed + &#progress-step1 { + border-bottom: ($baseline/5) solid $verified-color-lvl3; + + .wrapper-step-number { + border-color: $verified-color-lvl3; + } + + .step-number, .step-name { + color: $m-gray-l3; + } + } + + // STATE: is current + &#progress-step2 { + border-bottom: ($baseline/5) solid $m-blue-d1; + opacity: 1.0; + + .wrapper-step-number { + border-color: $m-blue-d1; + } + + .step-number, .step-name { + color: $m-gray-d3; + } + } + } + + .progress-sts-value { + width: 40% !important; + } + } + + // VIEW: REVIEW + &.step-review { + + // progress nav + .progress .progress-step { + + // STATE: is completed + &#progress-step1, &#progress-step2 { + border-bottom: ($baseline/5) solid $verified-color-lvl3; + + .wrapper-step-number { + border-color: $verified-color-lvl3; + } + + .step-number, .step-name { + color: $m-gray-l3; + } + } + + // STATE: is current + &#progress-step3 { + border-bottom: ($baseline/5) solid $m-blue-d1; + opacity: 1.0; + + .wrapper-step-number { + border-color: $m-blue-d1; + } + + .step-number, .step-name { + color: $m-gray-d3; + } + } + } + + .progress-sts-value { + width: 70% !important; + } + } + + &.step-confirmation { + + .content-confirmation { + margin-bottom: ($baseline*2); + } + + .view { + + .title { + @extend %hd-lv2; + color: $m-blue-d1; + } + + .instruction { + @extend %t-copy-lead1; + margin-bottom: $baseline; + } + } +>>>>>>> LMS: adds in styling and base UI for reverification flow + } +} diff --git a/lms/templates/verify_student/_reverification_support.html b/lms/templates/verify_student/_reverification_support.html new file mode 100644 index 0000000000..a2a3ed86c0 --- /dev/null +++ b/lms/templates/verify_student/_reverification_support.html @@ -0,0 +1,28 @@ +<%! from django.utils.translation import ugettext as _ %> + +
+ +
diff --git a/lms/templates/verify_student/photo_reverification.html b/lms/templates/verify_student/photo_reverification.html index 764458b791..9e710b4048 100644 --- a/lms/templates/verify_student/photo_reverification.html +++ b/lms/templates/verify_student/photo_reverification.html @@ -3,7 +3,7 @@ <%inherit file="../main.html" /> <%namespace name='static' file='/static_content.html'/> -<%block name="bodyclass">register verification-process step-photos +<%block name="bodyclass">register verification-process is-not-verified step-photos <%block name="title">${_("Re-Verification")} <%block name="js_extra"> @@ -53,6 +53,18 @@ %endif +
+
+ +
+

${_("Please Resubmit Your Verification Information")}

+
+

${_("There was an error with your previous verification")}. ${_("In order proceed in the verified certificate of achievement track of your current courses, please complete the following steps.")}

+
+
+
+
+
@@ -62,19 +74,14 @@
    -
  1. - 0 - ${_("Intro")} -
    2. -
  2. 1 - ${_("Current Step: ")}${_("Take Photo")} + ${_("Current Step: ")}${_("Re-Take Photo")}
  3. 2 - ${_("Take ID Photo")} + ${_("Re-Take ID Photo")}
  4. @@ -82,12 +89,7 @@ ${_("Review")}
    5. -
  5. - 4 - ${_("Make Payment")} -
    6. - -
  6. +
  7. @@ -107,7 +109,7 @@
    -

    ${_("Take Your Photo")}

    +

    ${_("Re-Take Your Photo")}

    ${_("Use your webcam to take a picture of your face so we can match it with the picture on your ID.")}

    @@ -172,8 +174,6 @@
    ${_("What do you do with this picture?")}
    ${_("We only use it to verify your identity. It is not displayed anywhere.")}
    -
    ${_("What if my camera isn't working?")}
    -
    ${_("")}
    @@ -185,7 +185,7 @@
    1. - +
    @@ -291,7 +291,7 @@
    1. -

      ${_("Review the Photos You've Taken")}

      +

      ${_("Review the Photos You've Re-Taken")}

      ${_("Please review the photos and verify that they meet the requirements listed below.")}

      @@ -362,7 +362,7 @@

      Before proceeding, please confirm that your details match

      -

      ${_("Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.")}

      +

      ${_("Once you verify your details match the requirements, you can move onto to confirm your re-verification submisssion.")}

      • @@ -376,7 +376,7 @@
      • - +
    @@ -387,6 +387,7 @@
+ <%include file="_reverification_support.html" /> diff --git a/lms/templates/verify_student/reverification_confirmation.html b/lms/templates/verify_student/reverification_confirmation.html index 2ab639effc..5b2ee17333 100644 --- a/lms/templates/verify_student/reverification_confirmation.html +++ b/lms/templates/verify_student/reverification_confirmation.html @@ -4,15 +4,75 @@ <%inherit file="../main.html" /> <%namespace name='static' file='/static_content.html'/> -<%block name="bodyclass">register verification-process step-photos -<%block name="title">${_("Verification Submission Confirmation")} +<%block name="bodyclass">register verification-process is-not-verified step-confirmation +<%block name="title">${_("Re-Verification Submission Confirmation")} <%block name="js_extra"> <%block name="content"> -

Successfully reverified!

-

Return to Dashboard

+
+
+ +
+
+

${_("Your Progress")}

+ +
    +
  1. + 1 + ${_("Re-Take Photo")} +
    2. + +
  2. + 2 + ${_("Re-Take ID Photo")} +
    3. + +
  3. + 3 + ${_("Review")} +
    4. + +
  4. + + + + ${_("Current Step: ")}${_("Confirmation")} +
    5. +
+ + + + +
+
+ +
+
+
+
+
+

${_("Your Credentials Have Been Updated")}

+ +
+

${_("We've captured your re-submitted information and will review it to verify your identity shortly. You should receive an update to your veriication status within 1-2 days. In the meantime, you still have access to all of your course content.")}

+
+ +
    +
  1. + ${_("Return to Your Dashboard")} +
    2. +
+
+
+
+
+
+ + <%include file="_reverification_support.html" /> +
+