Skip to content

E
edx-platform
Commit b5302a19 by Frances Botsford
Options

refinements to the vcert requirements page

parent 0fabba15
Showing with 168 additions and 131 deletions
lms/static/sass/views/_verification.scss
...@@ -4,10 +4,15 @@ ...@@ -4,10 +4,15 @@
body.register.verification { body.register.verification {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
// some nasty resets and standard styles
h1, h2, h3, h4, h5, h6, p, input { h1, h2, h3, h4, h5, h6, p, input {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
p {
margin-bottom: ($baseline*.75);
}
input { input {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
...@@ -43,7 +48,7 @@ body.register.verification { ...@@ -43,7 +48,7 @@ body.register.verification {
} }
// basic reusable bits
.content-wrapper { .content-wrapper {
background: none repeat scroll 0 0 #F7F7F7; background: none repeat scroll 0 0 #F7F7F7;
padding-bottom: 0; padding-bottom: 0;
...@@ -81,6 +86,98 @@ body.register.verification { ...@@ -81,6 +86,98 @@ body.register.verification {
font-weight: bold; font-weight: bold;
} }
.pay-options {
list-style-type: none;
margin: 0;
padding: 0;
li {
display: inline-block;
background-color: $light-gray;
padding: ($baseline/2) ($baseline*.75);
margin-right: ($baseline/4);
vertical-align: middle;
&.other1 {
margin-right: -($baseline/4);
padding-right: ($baseline/4);
min-height: 25px;
}
&.other2 {
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
}
label {
vertical-align: middle;
}
input {
vertical-align: middle;
}
}
}
.m-btn-primary {
margin-bottom: 0;
padding: 0;
a {
color: $very-light-text;
display: block;
padding: ($baseline*.75) $baseline;
&:hover {
text-decoration: none;
border: none;
}
}
&.disabled, &[disabled], &.is-disabled {
background-color: #ccc;
box-shadow: none;
pointer-events: none;
&:hover {
background: $action-primary-disabled-bg !important; // needed for IE currently
}
}
&.green {
box-shadow: 0 2px 1px rgba(2,100,2,1);
background-color: rgba(0,136,1,1);
&:hover {
box-shadow: 0 2px 1px rgba(2,100,2,1);
background-color: #029D03;
}
}
}
.progress {
/* background: transparent url('../images/vcert-steps.png') no-repeat 0 0;
height: 50px;
text-indent: -9999px;
*/
.progress-step {
display: inline-block;
padding: ($baseline/2) $baseline;
}
}
// select a track page
&.select-track {
.select { .select {
@include clearfix(); @include clearfix();
...@@ -170,86 +267,26 @@ body.register.verification { ...@@ -170,86 +267,26 @@ body.register.verification {
} }
} }
} }
.pay-options {
list-style-type: none;
margin: 0;
padding: 0;
li {
display: inline-block;
background-color: $light-gray;
padding: ($baseline/2) ($baseline*.75);
margin-right: ($baseline/4);
vertical-align: middle;
&.other1 {
margin-right: -($baseline/4);
padding-right: ($baseline/4);
}
&.other2 {
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
}
label {
vertical-align: middle;
}
input {
vertical-align: middle;
}
}
}
.m-btn-primary {
a {
color: $very-light-text;
&:hover {
text-decoration: none;
border: none;
}
}
&.disabled, &[disabled], &.is-disabled {
background-color: #A0B6CD;
box-shadow: none;
pointer-events: none;
&:hover {
background: $action-primary-disabled-bg !important; // needed for IE currently
}
} }
&.green { // requirements page
box-shadow: 0 2px 1px rgba(2,100,2,1); &.requirements {
background-color: rgba(0,136,1,1); .req {
width: 30%;
&:hover { display: inline-block;
box-shadow: 0 2px 1px rgba(2,100,2,1); margin-right: $baseline;
background-color: #029D03; text-align: center;
vertical-align: top;
} }
.next-step {
float: right;
} }
}
.progress {
/* background: transparent url('../images/vcert-steps.png') no-repeat 0 0;
height: 50px;
text-indent: -9999px;
*/
.progress-step {
display: inline-block;
padding: ($baseline/2) $baseline;
}
} }
// take and review photos page
&.photos {
// for dev placement only // for dev placement only
.placeholder-cam, .placeholder-cam,
.placeholder-photo { .placeholder-photo {
...@@ -354,17 +391,24 @@ body.register.verification { ...@@ -354,17 +391,24 @@ body.register.verification {
.photo-tips { .photo-tips {
width: 45%; width: 45%;
float: left; float: left;
}
.actions {
width: 45%;
float: right;
ul { ul {
padding: 0;
margin: 0; margin: 0;
padding: 0;
list-style-type: none; list-style-type: none;
} }
li {
margin-bottom: $baseline;
}
}
.next-step {
width: 45%;
float: right;
} }
.support { .support {
...@@ -379,6 +423,6 @@ body.register.verification { ...@@ -379,6 +423,6 @@ body.register.verification {
#review-facephoto { #review-facephoto {
margin-right: $baseline; margin-right: $baseline;
} }
}
} }
lms/templates/verify_student/face_upload.html
...@@ -121,15 +121,11 @@ $(document).ready(function() { ...@@ -121,15 +121,11 @@ $(document).ready(function() {
</dl> </dl>
</div> </div>
<div class="actions"> <div class="next-step">
<ul>
<li class="action action-next">
<p class="m-btn-primary"> <p class="m-btn-primary">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a> <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
</p> </p>
<p class="tip">Once you verify your photo looks good, you can move on to step 2.</p> <p class="tip">Once you verify your photo looks good, you can move on to step 2.</p>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
...@@ -193,15 +189,11 @@ $(document).ready(function() { ...@@ -193,15 +189,11 @@ $(document).ready(function() {
</dl> </dl>
</div> </div>
<div class="actions"> <div class="next-step">
<ul>
<li class="action action-next">
<p class="m-btn-primary"> <p class="m-btn-primary">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a> <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
</p> </p>
<p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p> <p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p>
</li>
</ul>
</div> </div>
</div> </div>
...@@ -247,7 +239,7 @@ $(document).ready(function() { ...@@ -247,7 +239,7 @@ $(document).ready(function() {
</div> </div>
</div> </div>
<hr />
<div class="wrapper-down"> <div class="wrapper-down">
<h3>Check Your Contribution</h3> <h3>Check Your Contribution</h3>
...@@ -279,21 +271,14 @@ $(document).ready(function() { ...@@ -279,21 +271,14 @@ $(document).ready(function() {
</div> </div>
<div class="next"> <div class="next-step">
<p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p> <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> <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="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> <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> </div>
</section> </section>
......
lms/templates/verify_student/photo_id_upload.html
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification select</%block> <%block name="bodyclass">register verification select-track</%block>
<%block name="js_extra"> <%block name="js_extra">
<script type="text/javascript"> <script type="text/javascript">
......
lms/templates/verify_student/show_requirements.html
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification select</%block> <%block name="bodyclass">register verification requirements</%block>
<%block name="content"> <%block name="content">
<div class="container"> <div class="container">
...@@ -24,40 +24,46 @@ ...@@ -24,40 +24,46 @@
<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> <div class="req2 req">
<dt>Identification</dt> <h4>Webcam</h4>
<dd>An identification document like a drivers license, passport, student ID, or whatever is acceptable.</dd> <p>A webcam that connects to your computer and a modern browser.</p>
</div>
<dt>Webcam</dt> <div class="req3 req">
<dd>A webcam that connects to your computer, a modern browser, and whatever these</dd> <h4>Credit or Debit Card</h4>
<p>A major credit or debit card.</p>
</div>
</div>
<dt>credit or debit card</dt> <p class="tip">Missing something? <a href="">You can always take the Audit track</a>.</p>
<dd>A credit or debit card that is Mastercard or Visa or whatever the requirements are goes here.</dd>
</dl>
<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> <h4>Step 3: Verify your submissions</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>Review your photos to verify they are correct.</p>
<h4>Step 2: Take a photo of your ID</h4> <h4>Step 4: Submit payment</h4>
<p>To verify your identity, we need a clear and well-lit photo of your ID to match it with your face.</p> <p>Pay for your course using a major credit of debit cards.</p>
<ul>
<h4>Step 3: Verify your submissions</h4>
<p>Review your photos to verify they are correct.</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>Cards accepted:</li>
<li>Visa</li> <li>Visa</li>
<li>Master Card</li> <li>Master Card</li>
...@@ -67,16 +73,18 @@ ...@@ -67,16 +73,18 @@
<li>JCB (provided it has the Discover logo on the card)</li> <li>JCB (provided it has the Discover logo on the card)</li>
<li>Diners Club</li> <li>Diners Club</li>
<li>...need to list several more once firm</li> <li>...need to list several more once firm</li>
</ul> </ul>
<h4>You're Ready to Start Learning</h4> <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> <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>
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></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>
</section> </section>
<section class="support"> <section class="support">
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p> <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