Skip to content

E
edx-platform
Commit 280c4632 by Brian Talbot Committed by Diana Huang
Options

LMS: adds in styling and base UI for reverification flow

parent a25e413f
Showing with 269 additions and 30 deletions
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
}
}
lms/templates/verify_student/_reverification_support.html 0 → 100644
<%! from django.utils.translation import ugettext as _ %>
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item help-item-whyreverify">
<h3 class="title">${_("Why Do I Need to Re-Verify?")}</h3>
<div class="copy">
<p>${_("Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.")}</p>
</div>
</li>
<li class="help-item help-item-technical">
<h3 class="title">${_("Having Technical Trouble?")}</h3>
<div class="copy">
<p>${_("Please make sure your browser is updated to the {strong_start}{a_start}most recent version possible{a_end}{strong_end}. Also, please make sure your {strong_start}web cam is plugged in, turned on, and allowed to function in your web browser (commonly adjustable in your browser settings).{strong_end}").format(a_start='<a rel="external" href="http://browsehappy.com/">', a_end="</a>", strong_start="<strong>", strong_end="</strong>")}</p>
</div>
</li>
<li class="help-item help-item-questions">
<h3 class="title">${_("Have questions?")}</h3>
<div class="copy">
<p>${_("Please read {a_start}our FAQs to view common questions about our certificates{a_end}.").format(a_start='<a rel="external" href="'+ marketing_link('WHAT_IS_VERIFIED_CERT') + '">', a_end="</a>")}</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
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>
<%block name="bodyclass">register verification-process is-not-verified step-photos</%block>
<%block name="title"><title>${_("Re-Verification")}</title></%block>
<%block name="js_extra">
......@@ -53,6 +53,18 @@
</div>
%endif
<div id="message-reverification" class="wrapper-msg wrapper-msg-error">
<div class="msg msg-error">
<i class="msg-icon icon-warning-sign"></i>
<div class="msg-content">
<h3 class="title">${_("Please Resubmit Your Verification Information")}</h3>
<div class="copy">
<p>${_("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.")}</p>
</div>
</div>
</div>
</div>
<div class="container">
<section class="wrapper">
......@@ -62,19 +74,14 @@
<!-- FIXME: Move the "Current Step: " text to the right DOM element -->
<ol class="progress-steps">
<li class="progress-step is-completed" 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 is-current" id="progress-step1">
<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>
<span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Re-Take Photo")}</span>
</li>
<li class="progress-step" id="progress-step2">
<span class="wrapper-step-number"><span class="step-number">2</span></span>
<span class="step-name">${_("Take ID Photo")}</span>
<span class="step-name">${_("Re-Take ID Photo")}</span>
</li>
<li class="progress-step" id="progress-step3">
......@@ -82,12 +89,7 @@
<span class="step-name">${_("Review")}</span>
</li>
<li class="progress-step" id="progress-step4">
<span class="wrapper-step-number"><span class="step-number">4</span></span>
<span class="step-name">${_("Make Payment")}</span>
</li>
<li class="progress-step progress-step-icon" id="progress-step5">
<li class="progress-step progress-step-icon" id="progress-step4">
<span class="wrapper-step-number"><span class="step-number">
<i class="icon-ok"></i>
</span></span>
......@@ -107,7 +109,7 @@
<section class="wrapper carousel" data-transition="slide">
<div id="wrapper-facephoto" class="wrapper-view block-photo">
<div class="facephoto view">
<h3 class="title">${_("Take Your Photo")}</h3>
<h3 class="title">${_("Re-Take Your Photo")}</h3>
<div class="instruction">
<p>${_("Use your webcam to take a picture of your face so we can match it with the picture on your ID.")}</p>
</div>
......@@ -172,8 +174,6 @@
<dt class="faq-question">${_("What do you do with this picture?")}</dt>
<dd class="faq-answer">${_("We only use it to verify your identity. It is not displayed anywhere.")}</dd>
<dt class="faq-question">${_("What if my camera isn't working?")}</dt>
<dd class="faq-answer">${_("")}</dd>
</dl>
</div>
</div>
......@@ -185,7 +185,7 @@
<ol class="wizard-steps">
<li class="wizard-step">
<a id="face_next_link" class="next action-primary" href="#next" aria-hidden="true" title="Next">${_("Go to Step 2: Take ID Photo")}</a>
<a id="face_next_link" class="next action-primary" href="#next" aria-hidden="true" title="Next">${_("Go to Step 2: Re-Take ID Photo")}</a>
</li>
</ol>
</nav>
......@@ -291,7 +291,7 @@
<ol class="review-tasks">
<li class="review-task review-task-photos">
<h4 class="title">${_("Review the Photos You've Taken")}</h4>
<h4 class="title">${_("Review the Photos You've Re-Taken")}</h4>
<div class="copy">
<p>${_("Please review the photos and verify that they meet the requirements listed below.")}</p>
......@@ -362,7 +362,7 @@
<div class="prompt-verify">
<h3 class="title">Before proceeding, please confirm that your details match</h3>
<p class="copy"> ${_("Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.")}</p>
<p class="copy"> ${_("Once you verify your details match the requirements, you can move onto to confirm your re-verification submisssion.")}</p>
<ul class="list-actions">
<li class="action action-verify">
......@@ -376,7 +376,7 @@
<li class="wizard-step step-proceed">
<form id="reverify_form" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<input class="action-primary disabled" type="button" id="reverify_button" value="Submit photos" name="payment">
<input class="action-primary disabled" type="button" id="reverify_button" value="Submit photos & re-verify" name="payment">
</form>
</li>
</ol>
......@@ -387,6 +387,7 @@
</article>
</div> <!-- /wrapper-content-main -->
<%include file="_reverification_support.html" />
</section>
</div>
......
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>
<%block name="title"><title>${_("Verification Submission Confirmation")}</title></%block>
<%block name="bodyclass">register verification-process is-not-verified step-confirmation</%block>
<%block name="title"><title>${_("Re-Verification Submission Confirmation")}</title></%block>
<%block name="js_extra">
<script src="${static.url('js/vendor/responsive-carousel/responsive-carousel.js')}"></script>
<script src="${static.url('js/vendor/responsive-carousel/responsive-carousel.keybd.js')}"></script>
</%block>
<%block name="content">
<p>Successfully reverified!</p>
<p><a href="${reverse('dashboard')}">Return to Dashboard</a></p>
<div class="container">
<section class="wrapper">
<div class="wrapper-progress">
<section class="progress">
<h3 class="sr title">${_("Your Progress")}</h3>
<ol class="progress-steps">
<li class="progress-step is-completed" id="progress-step1">
<span class="wrapper-step-number"><span class="step-number">1</span></span>
<span class="step-name">${_("Re-Take Photo")}</span>
</li>
<li class="progress-step is-completed" id="progress-step2">
<span class="wrapper-step-number"><span class="step-number">2</span></span>
<span class="step-name">${_("Re-Take ID Photo")}</span>
</li>
<li class="progress-step is-completed" id="progress-step3">
<span class="wrapper-step-number"><span class="step-number">3</span></span>
<span class="step-name">${_("Review")}</span>
</li>
<li class="progress-step is-current progress-step-icon" id="progress-step4">
<span class="wrapper-step-number"><span class="step-number">
<i class="icon-ok"></i>
</span></span>
<span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Confirmation")}</span>
</li>
</ol>
<span class="progress-sts">
<span class="progress-sts-value"></span>
</span>
</section>
</div>
<div class="wrapper-content-main">
<article class="content-main">
<section class="content-confirmation">
<div class="wrapper-view">
<div class="view">
<h3 class="title">${_("Your Credentials Have Been Updated")}</h3>
<div class="instruction">
<p>${_("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.")}</p>
</div>
<ol class="list-nav">
<li class="nav-item">
<a class="action action-primary" href="${reverse('dashboard')}">${_("Return to Your Dashboard")}</a>
</li>
</ol>
</div> <!-- /view -->
</div> <!-- /wrapper-view -->
</section>
</article>
</div> <!-- /wrapper-content-main -->
<%include file="_reverification_support.html" />
</section>
</div>
</%block>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment