Skip to content

E
edx-platform
Commit 0fabba15 by Frances Botsford
Options

added vcert images and some fake js functionality for photos

parent cb168523
Showing with 108 additions and 22 deletions
lms/static/sass/views/_verification.scss
......@@ -20,7 +20,7 @@ body.register.verification {
font-weight: 400;
}
dl.faq {
.faq {
font-size: 12px;
label {
......@@ -214,6 +214,17 @@ body.register.verification {
}
}
&.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 {
box-shadow: 0 2px 1px rgba(2,100,2,1);
background-color: rgba(0,136,1,1);
......@@ -228,9 +239,11 @@ body.register.verification {
.progress {
/* background: transparent url('../images/vcert-steps.png') no-repeat 0 0;
height: 50px;
text-indent: -9999px;
*/
.progress-step {
border: 1px solid #eee;
display: inline-block;
padding: ($baseline/2) $baseline;
}
......@@ -275,6 +288,8 @@ body.register.verification {
background-color: #ddd;
.controls-list {
@include clearfix();
position: relative;
margin: 0;
padding: ($baseline*.25) ($baseline*.75);
list-style-type: none;
......@@ -293,6 +308,36 @@ body.register.verification {
&:hover {
}
}
&.is-hidden {
visibility: hidden;
}
&.is-shown {
visibility: visible;
}
&.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;
}
}
}
......@@ -314,6 +359,16 @@ body.register.verification {
.actions {
width: 45%;
float: right;
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
}
.support {
margin-top: ($baseline*2);
}
.review-photo {
......
lms/templates/verify_student/face_upload.html
......@@ -11,6 +11,39 @@ $(document).ready(function() {
$( ".carousel-nav" ).addClass('sr');
$('.block-photo .control-redo').addClass('is-hidden');
$('.block-photo .control-approve').addClass('is-hidden');
$('.block-photo .m-btn-primary').addClass('disabled');
$( "#wrapper-facephoto .control-do" ).click(function(e) {
e.preventDefault();
$(this).toggleClass('is-hidden');
$('#wrapper-facephoto .control-redo').toggleClass('is-shown');
$('#wrapper-facephoto .control-approve').toggleClass('is-shown');
});
$( "#wrapper-facephoto .control-approve" ).click(function(e) {
e.preventDefault();
$(this).addClass('approved');
$('#wrapper-facephoto .m-btn-primary').removeClass('disabled');
});
$( "#wrapper-idphoto .control-do" ).click(function(e) {
e.preventDefault();
$(this).toggleClass('is-hidden');
$('#wrapper-idphoto .control-redo').toggleClass('is-shown');
$('#wrapper-idphoto .control-approve').toggleClass('is-shown');
});
$( "#wrapper-idphoto .control-approve" ).click(function(e) {
e.preventDefault();
$(this).addClass('approved');
$('#wrapper-idphoto .m-btn-primary').removeClass('disabled');
});
});
</script>
</%block>
......@@ -51,12 +84,12 @@ $(document).ready(function() {
<div class="controls photo-controls">
<ul class="controls-list">
<li class="control control-do">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-redo">
<a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
</li>
<li class="control control-do">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-approve">
<a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
</li>
......@@ -79,15 +112,13 @@ $(document).ready(function() {
<div class="wrapper-down">
<div class="faq facefaq">
<h4 class="sr">Common Questions</h4>
<dl>
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
<dd>Maecenas faucibus mollis interdum.</dd>
</dl>
<dl>
<dt>Why do you need my photo?</dt>
<dd>We need your photo to confirm that you are you.</dd>
<dt>What do you do with this picture?</dt>
<dd>We only use it to verify your identity. It is not displayed anywhere.</dd>
</dl>
</div>
<div class="actions">
......@@ -96,7 +127,7 @@ $(document).ready(function() {
<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="tips">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>
......@@ -121,12 +152,12 @@ $(document).ready(function() {
<div class="controls photo-controls">
<ul class="controls-list">
<li class="control control-do">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-redo">
<a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
</li>
<li class="control control-do">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-approve">
<a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
</li>
......@@ -151,7 +182,7 @@ $(document).ready(function() {
<div class="faq idfaq">
<h4 class="sr">Common Questions</h4>
<dl>
<dl class="faq">
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
......@@ -168,7 +199,7 @@ $(document).ready(function() {
<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="tips">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>
......@@ -259,7 +290,7 @@ $(document).ready(function() {
<ul>
<li class="action action-next">
<p class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
<p class="tips">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>
......
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