Skip to content

E
edx-platform
Commit 4b3918c7 by Brian Talbot
Options

Verification: adds styling for already verified view and refactors html/styling for shared elements

parent 0c3af967
Showing with 155 additions and 15 deletions
lms/static/sass/views/_verification.scss
......@@ -503,7 +503,7 @@
}
// confirmation step w/ icon
&#progress-step5 {
&.progress-step-icon {
.step-number {
margin-top: ($baseline/2);
......@@ -1585,7 +1585,7 @@
}
}
// VIEW: take and review photos
// VIEW: confirmation/receipt
&.step-confirmation {
// progress nav
......@@ -1625,3 +1625,54 @@
}
}
}
// STATE: already verified
.register.is-verified {
.nav-wizard .price-value {
@extend .t-weight4;
@include font-size(16);
margin-top: 18px;
color: $m-blue-d1;
}
// progress nav
.progress .progress-step {
// STATE: is completed
&#progress-step1 {
border-bottom: ($baseline/5) solid $m-green-l2;
.wrapper-step-number {
border-color: $m-green-l2;
}
.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 indicator
.progress-sts {
width: 47%;
}
.progress-sts-value {
width: 32% !important;
}
}
lms/templates/verify_student/photo_verification.html
......@@ -61,7 +61,7 @@
<span class="step-name">${_("Make Payment")}</span>
</li>
<li class="progress-step" id="progress-step5">
<li class="progress-step progress-step-icon" id="progress-step5">
<span class="wrapper-step-number"><span class="step-number">
<i class="icon-ok"></i>
</span></span>
......@@ -94,8 +94,6 @@
</div>
<video id="face_video" autoplay></video><br/>
<!-- Don't remove the width and height for the canvas or the clipping will be off.
Placing it in CSS does not work. -->
<canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
......@@ -180,8 +178,6 @@
</div>
<video id="photo_id_video" autoplay></video><br/>
<!-- Don't remove the width and height for the canvas or the clipping will be off.
Placing it in CSS does not work. -->
<canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
......
lms/templates/verify_student/show_requirements.html
......@@ -66,7 +66,7 @@
<span class="step-name">${_("Make Payment")}</span>
</li>
<li class="progress-step" id="progress-step5">
<li class="progress-step progress-step-icon" id="progress-step5">
<span class="wrapper-step-number"><span class="step-number">
<i class="icon-ok"></i>
</span></span>
......
lms/templates/verify_student/verified.html
......@@ -2,6 +2,10 @@
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%namespace name='static' file='/static_content.html'/>
<%block name="bodyclass">register verification-process is-verified</%block>
<%block name="title"><title>${("Register for [Course Name] | Verification")}</title></%block>
<%block name="js_extra">
<script type="text/javascript">
var submitToPaymentProcessing = function(event) {
......@@ -31,13 +35,102 @@ $(document).ready(function() {
});
</script>
</%block>
<%block name="content">
<p>You have already been verified. Hooray!</p>
<p>You have decided to pay $${chosen_price}</p>
<form id="pay_form" method="post" action="${purchase_endpoint}">
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<input type="hidden" name="course_id" value="${course_id | h}" />
<button type="submit" class="action-primary" id="pay_button">Go to Secure Payment</button>
</form>
<div class="container">
<section class="wrapper">
<header class="page-header">
<h2 class="title">
<span class="wrapper-sts">
<span class="sts">${_("You are registering for")}</span>
<span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-value">
<span class="context">${_("Registering as:")}</span> ${_("ID Verified")}
</span>
</span>
</h2>
</header>
<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">${_("ID Verification")}</span>
</li>
<li class="progress-step is-current" id="progress-step2">
<span class="wrapper-step-number"><span class="step-number">2</span></span>
<span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Review")}</span>
</li>
<li class="progress-step" id="progress-step3">
<span class="wrapper-step-number"><span class="step-number">3</span></span>
<span class="step-name">${_("Make Payment")}</span>
</li>
<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>
<span class="step-name">${_("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">
<h3 class="title">${_("You've Been Verified Previously")}</h3>
<div class="instruction">
<p>${_("We've already verified your identity (through the photos of you and your ID you provided earlier). You can proceed to make your secure payment and complete registration.")}</p>
</div>
<nav class="nav-wizard is-ready">
<span class="help help-inline price-value">${_("You have decided to pay $ ")} <strong>${chosen_price}</strong></span>
<ol class="wizard-steps">
<li class="wizard-step step-proceed">
<form id="pay_form" method="post" action="${purchase_endpoint}">
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<input type="hidden" name="course_id" value="${course_id | h}" />
<button type="submit" class="action-primary" id="pay_button">Go to Secure Payment</button>
</form>
</li>
</ol>
</nav>
</article>
</div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<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="">', a_end="</a>")}</p>
</div>
</li>
<li class="help-item">
<h3 class="title">${_("Change your mind?")}</h3>
<div class="copy">
<p>${_("You can always {a_start} Audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="">', a_end="</a>")}</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</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