Skip to content

E
edx-platform
Commit b5302a19 by Frances Botsford
Options

refinements to the vcert requirements page

parent 0fabba15
Showing with 278 additions and 241 deletions
lms/static/sass/views/_verification.scss
......@@ -4,10 +4,15 @@
body.register.verification {
font-family: 'Open Sans', sans-serif;
// some nasty resets and standard styles
h1, h2, h3, h4, h5, h6, p, input {
font-family: 'Open Sans', sans-serif;
}
p {
margin-bottom: ($baseline*.75);
}
input {
font-style: normal;
font-weight: 400;
......@@ -43,7 +48,7 @@ body.register.verification {
}
// basic reusable bits
.content-wrapper {
background: none repeat scroll 0 0 #F7F7F7;
padding-bottom: 0;
......@@ -81,95 +86,6 @@ body.register.verification {
font-weight: bold;
}
.select {
@include clearfix();
.divider {
display: block;
clear: both;
width: 60%;
margin: $baseline $baseline 0 $baseline;
border-top: 2px solid #ddd;
p {
position: relative;
top: -$baseline;
width: 40px;
margin: 0 auto;
padding: 0 $baseline;
background-color: #fff;
font-size: 24px;
color: #aaa;
text-align: center;
}
}
.block {
position: relative;
float: left;
margin: 0 $baseline ($baseline*1.5) 0;
border-top: 5px solid #32A5D9;
background-color: #eee;
padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5);
width: 60%;
&.block-cert {
border-top: 5px solid #008801;
.ribbon {
background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0;
position: absolute;
top: -($baseline*1.5);
right: $baseline;
display: block;
width: ($baseline*3);
height: ($baseline*4);
}
}
p, li, dl {
color: $lighter-base-font-color;
}
.wrap-copy {
width: 60%;
display: inline-block;
vertical-align: middle;
}
.title {
@extend .t-title7;
}
.m-btn-primary {
position: absolute;
bottom: ($baseline*1.5);
right: ($baseline*1.5);
}
}
hr {
margin: 1em 0 2em 0;
}
.more {
margin-top: ($baseline/2);
border-top: 1px solid #ccc;
}
.tips {
float: right;
width: 32%;
p {
font-size: 14px;
}
}
}
.pay-options {
......@@ -187,6 +103,7 @@ body.register.verification {
&.other1 {
margin-right: -($baseline/4);
padding-right: ($baseline/4);
min-height: 25px;
}
&.other2 {
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
......@@ -204,9 +121,13 @@ body.register.verification {
}
.m-btn-primary {
margin-bottom: 0;
padding: 0;
a {
color: $very-light-text;
display: block;
padding: ($baseline*.75) $baseline;
&:hover {
text-decoration: none;
......@@ -215,7 +136,7 @@ body.register.verification {
}
&.disabled, &[disabled], &.is-disabled {
background-color: #A0B6CD;
background-color: #ccc;
box-shadow: none;
pointer-events: none;
......@@ -250,135 +171,258 @@ body.register.verification {
}
// for dev placement only
.placeholder-cam,
.placeholder-photo {
height: 300px;
background-color: #eee;
position: relative;
p {
position: absolute;
top: 40%;
left: 40%;
color: #ccc;
// select a track page
&.select-track {
.select {
@include clearfix();
.divider {
display: block;
clear: both;
width: 60%;
margin: $baseline $baseline 0 $baseline;
border-top: 2px solid #ddd;
p {
position: relative;
top: -$baseline;
width: 40px;
margin: 0 auto;
padding: 0 $baseline;
background-color: #fff;
font-size: 24px;
color: #aaa;
text-align: center;
}
}
.block {
position: relative;
float: left;
margin: 0 $baseline ($baseline*1.5) 0;
border-top: 5px solid #32A5D9;
background-color: #eee;
padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5);
width: 60%;
&.block-cert {
border-top: 5px solid #008801;
.ribbon {
background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0;
position: absolute;
top: -($baseline*1.5);
right: $baseline;
display: block;
width: ($baseline*3);
height: ($baseline*4);
}
}
p, li, dl {
color: $lighter-base-font-color;
}
.wrap-copy {
width: 60%;
display: inline-block;
vertical-align: middle;
}
.title {
@extend .t-title7;
}
.m-btn-primary {
position: absolute;
bottom: ($baseline*1.5);
right: ($baseline*1.5);
}
}
hr {
margin: 1em 0 2em 0;
}
.more {
margin-top: ($baseline/2);
border-top: 1px solid #ccc;
}
.tips {
float: right;
width: 32%;
p {
font-size: 14px;
}
}
}
}
.block-photo {
@include clearfix();
background-color: $white;
.title {
font-weight: bold;
// requirements page
&.requirements {
.req {
width: 30%;
display: inline-block;
margin-right: $baseline;
text-align: center;
vertical-align: top;
}
.wrapper-up,
.wrapper-down {
@include clearfix();
.next-step {
float: right;
}
.cam {
width: 45%;
float: left;
padding-right: $baseline;
}
// take and review photos page
&.photos {
// for dev placement only
.placeholder-cam,
.placeholder-photo {
height: 300px;
background-color: #eee;
position: relative;
p {
position: absolute;
top: 40%;
left: 40%;
color: #ccc;
}
}
.photo-controls {
background-color: #ddd;
.block-photo {
@include clearfix();
background-color: $white;
.controls-list {
.title {
font-weight: bold;
}
.wrapper-up,
.wrapper-down {
@include clearfix();
position: relative;
margin: 0;
padding: ($baseline*.25) ($baseline*.75);
list-style-type: none;
}
.control {
display: inline-block;
.cam {
width: 45%;
float: left;
padding-right: $baseline;
}
.action {
@extend .button-primary;
display: block;
background-color: $blue;
color: $white;
padding: ($baseline*.25) ($baseline*.5);
border: none;
.photo-controls {
background-color: #ddd;
&:hover {
.controls-list {
@include clearfix();
position: relative;
margin: 0;
padding: ($baseline*.25) ($baseline*.75);
list-style-type: none;
}
.control {
display: inline-block;
}
.action {
@extend .button-primary;
display: block;
background-color: $blue;
color: $white;
padding: ($baseline*.25) ($baseline*.5);
border: none;
&:hover {
&.is-hidden {
visibility: hidden;
}
}
&.is-shown {
visibility: visible;
}
}
&.control-do {
position: relative;
left: 45%;
}
&.is-hidden {
visibility: hidden;
}
&.control-redo {
position: absolute;
left: ($baseline/2);
}
&.is-shown {
visibility: visible;
}
&.control-approve {
position: absolute;
right: ($baseline/2);
}
&.approved a {
background-color: $green;
&.control-do {
position: relative;
left: 45%;
}
&.control-redo {
position: absolute;
left: ($baseline/2);
}
&.control-approve {
position: absolute;
right: ($baseline/2);
}
&.approved a {
background-color: $green;
}
}
}
}
.faq {
width: 45%;
float: left;
padding-right: $baseline;
}
}
.faq {
.photo-tips {
width: 45%;
float: left;
padding-right: $baseline;
}
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin-bottom: $baseline;
}
.photo-tips {
width: 45%;
float: left;
}
.actions {
width: 45%;
float: right;
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
}
.support {
margin-top: ($baseline*2);
}
.next-step {
width: 45%;
float: right;
}
.review-photo {
width: 45%;
float: left;
}
.support {
margin-top: ($baseline*2);
}
#review-facephoto {
margin-right: $baseline;
}
.review-photo {
width: 45%;
float: left;
}
#review-facephoto {
margin-right: $baseline;
}
}
}
lms/templates/verify_student/face_upload.html
......@@ -121,15 +121,11 @@ $(document).ready(function() {
</dl>
</div>
<div class="actions">
<ul>
<li class="action action-next">
<div class="next-step">
<p class="m-btn-primary">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
</p>
<p class="tip">Once you verify your photo looks good, you can move on to step 2.</p>
</li>
</ul>
</div>
</div>
</div>
......@@ -193,15 +189,11 @@ $(document).ready(function() {
</dl>
</div>
<div class="actions">
<ul>
<li class="action action-next">
<div class="next-step">
<p class="m-btn-primary">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
</p>
<p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p>
</li>
</ul>
</div>
</div>
......@@ -247,7 +239,7 @@ $(document).ready(function() {
</div>
</div>
<hr />
<div class="wrapper-down">
<h3>Check Your Contribution</h3>
......@@ -279,21 +271,14 @@ $(document).ready(function() {
</div>
<div class="next">
<div class="next-step">
<p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
<input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label>
<div class="actions">
<ul>
<li class="action action-next">
<p class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
<p class="tip">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
</li>
</ul>
</div>
</div>
</section>
......
lms/templates/verify_student/photo_id_upload.html
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification select</%block>
<%block name="bodyclass">register verification select-track</%block>
<%block name="js_extra">
<script type="text/javascript">
......
lms/templates/verify_student/show_requirements.html
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification select</%block>
<%block name="bodyclass">register verification requirements</%block>
<%block name="content">
<div class="container">
......@@ -22,61 +22,69 @@
</ol>
</section>
<h3 class="title">What You Will Need to Register</h3>
<h3 class="title">What You Will Need to Register</h3>
<p>There are a few things you will need to register as an ID verified student :</p>
<p>There are a few things you will need to register as an ID verified student :</p>
<div class="reqs">
<div class="req1 req">
<h4>Identification</h4>
<p>A photo identification document like a drivers license, passport, or student ID.</p>
</div>
<dl>
<dt>Identification</dt>
<dd>An identification document like a drivers license, passport, student ID, or whatever is acceptable.</dd>
<div class="req2 req">
<h4>Webcam</h4>
<p>A webcam that connects to your computer and a modern browser.</p>
</div>
<dt>Webcam</dt>
<dd>A webcam that connects to your computer, a modern browser, and whatever these</dd>
<div class="req3 req">
<h4>Credit or Debit Card</h4>
<p>A major credit or debit card.</p>
</div>
</div>
<dt>credit or debit card</dt>
<dd>A credit or debit card that is Mastercard or Visa or whatever the requirements are goes here.</dd>
</dl>
<p class="tip">Missing something? <a href="">You can always take the Audit track</a>.</p>
<hr />
<p class="tip">Missing something? You can always take the Audit track.</p>
<h3>Steps to get Verified</h3>
<hr />
<div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
</div>
<h3>Steps to get Verified</h3>
<h4>Step 1: Take Your Photo</h4>
<p>To verify your identity, we need a clear and well-lit photo of your face to match it with your ID.</p>
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
<h4>Step 2: Take a photo of your ID</h4>
<p>To verify your identity, we need a clear and well-lit photo of your ID to match it with your face.</p>
<h4>Step 1: Take Your Photo</h4>
<p>To verify your identity, we need a clear and well-lit photo of your face to match it with your ID.</p>
<h4>Step 3: Verify your submissions</h4>
<p>Review your photos to verify they are correct.</p>
<h4>Step 2: Take a photo of your ID</h4>
<p>To verify your identity, we need a clear and well-lit photo of your ID to match it with your face.</p>
<h4>Step 4: Submit payment</h4>
<p>Pay for your course using a major credit of debit cards.</p>
<ul>
<li>Cards accepted:</li>
<li>Visa</li>
<li>Master Card</li>
<li>Maestro</li>
<li>Amex</li>
<li>Discover</li>
<li>JCB (provided it has the Discover logo on the card)</li>
<li>Diners Club</li>
<li>...need to list several more once firm</li>
</ul>
<h4>Step 3: Verify your submissions</h4>
<p>Review your photos to verify they are correct.</p>
<h4>You're Ready to Start Learning</h4>
<h4>Step 4: Submit payment</h4>
<p>Pay for your course using a major credit of debit cards.</p>
<ul>
<li>Cards accepted:</li>
<li>Visa</li>
<li>Master Card</li>
<li>Maestro</li>
<li>Amex</li>
<li>Discover</li>
<li>JCB (provided it has the Discover logo on the card)</li>
<li>Diners Club</li>
<li>...need to list several more once firm</li>
</ul>
<p>You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.</p>
<h4>You're Ready to Start Learning</h4>
<p>You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.</p>
<div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
</div>
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
</section>
</section>
<section class="support">
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
......
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