Verification: adds styling for already verified view and refactors html/styling for shared elements
This commit is contained in:
Brian Talbot
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
<%block name="content">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user