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 @@ ...@@ -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,95 +86,6 @@ body.register.verification { ...@@ -81,95 +86,6 @@ body.register.verification {
font-weight: bold; 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 { .pay-options {
...@@ -187,6 +103,7 @@ body.register.verification { ...@@ -187,6 +103,7 @@ body.register.verification {
&.other1 { &.other1 {
margin-right: -($baseline/4); margin-right: -($baseline/4);
padding-right: ($baseline/4); padding-right: ($baseline/4);
min-height: 25px;
} }
&.other2 { &.other2 {
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0; padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
...@@ -204,9 +121,13 @@ body.register.verification { ...@@ -204,9 +121,13 @@ body.register.verification {
} }
.m-btn-primary { .m-btn-primary {
margin-bottom: 0;
padding: 0;
a { a {
color: $very-light-text; color: $very-light-text;
display: block;
padding: ($baseline*.75) $baseline;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
...@@ -215,7 +136,7 @@ body.register.verification { ...@@ -215,7 +136,7 @@ body.register.verification {
} }
&.disabled, &[disabled], &.is-disabled { &.disabled, &[disabled], &.is-disabled {
background-color: #A0B6CD; background-color: #ccc;
box-shadow: none; box-shadow: none;
pointer-events: none; pointer-events: none;
...@@ -250,135 +171,258 @@ body.register.verification { ...@@ -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%; // select a track page
color: #ccc; &.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 { // requirements page
@include clearfix(); &.requirements {
background-color: $white; .req {
width: 30%;
.title { display: inline-block;
font-weight: bold; margin-right: $baseline;
text-align: center;
vertical-align: top;
} }
.wrapper-up, .next-step {
.wrapper-down { float: right;
@include clearfix();
} }
.cam { }
width: 45%;
float: left; // take and review photos page
padding-right: $baseline; &.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 { .block-photo {
background-color: #ddd; @include clearfix();
background-color: $white;
.controls-list { .title {
font-weight: bold;
}
.wrapper-up,
.wrapper-down {
@include clearfix(); @include clearfix();
position: relative; }
margin: 0;
padding: ($baseline*.25) ($baseline*.75);
list-style-type: none;
.control { .cam {
display: inline-block; width: 45%;
float: left;
padding-right: $baseline;
}
.action { .photo-controls {
@extend .button-primary; background-color: #ddd;
display: block;
background-color: $blue;
color: $white;
padding: ($baseline*.25) ($baseline*.5);
border: none;
&: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 { &.is-hidden {
position: relative; visibility: hidden;
left: 45%; }
}
&.control-redo { &.is-shown {
position: absolute; visibility: visible;
left: ($baseline/2); }
}
&.control-approve {
position: absolute;
right: ($baseline/2);
}
&.approved a { &.control-do {
background-color: $green; 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%; width: 45%;
float: left; 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 { .next-step {
margin-top: ($baseline*2); width: 45%;
} float: right;
}
.review-photo { .support {
width: 45%; margin-top: ($baseline*2);
float: left; }
}
#review-facephoto { .review-photo {
margin-right: $baseline; width: 45%;
} float: left;
}
#review-facephoto {
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">
...@@ -22,61 +22,69 @@ ...@@ -22,61 +22,69 @@
</ol> </ol>
</section> </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> <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>
<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> <h4>You're Ready to Start Learning</h4>
<p>Review your photos to verify they are correct.</p>
<h4>Step 4: Submit payment</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>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>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>
</section>
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
</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