Skip to content

E
edx-platform
Commit 28db6a2f by Frances Botsford
Options

cleanup on the photo page for vcerts

parent bae9c307
Showing with 75 additions and 67 deletions
lms/static/sass/views/_verification.scss
......@@ -13,6 +13,7 @@ body.register.verification-process {
// reset: typography - copy
p, ol, ul, dl, input, select, textarea {
font-family: $f-sans-serif;
@extend .t-copy-base;
}
// reset: copy/text
......@@ -211,20 +212,20 @@ body.register.verification-process {
color: #ccc;
&.current {
color: #000;
color: #008801;
.number {
border: 4px solid #000;
color: #000;
border: 4px solid #008801;
color: #008801;
}
}
&.done {
color: #008801;
color: #777;
.number {
border: 4px solid #008801;
color: #008801;
border: 4px solid #777;
color: #777;
}
}
}
......@@ -382,10 +383,11 @@ body.register.verification-process {
}
.reqs {
margin: $baseline;
margin: $baseline $baseline ($baseline*1.5) $baseline;
}
.req {
height: 13em;
width: 27%;
display: inline-block;
margin-right: 1%;
......@@ -394,16 +396,17 @@ body.register.verification-process {
text-align: center;
vertical-align: top;
// for placement only
.placeholder-art {
height: 150px;
[class^="icon-"] {
display: block;
width: 150px;
margin: $baseline auto;
background-color: #eee;
font-size: 75px;
i {
font-size: 24px;
&.icon-id {
background: transparent url('../images/icon-id.png') no-repeat center center;
height: 70px;
}
}
}
......@@ -467,9 +470,10 @@ body.register.verification-process {
&.step-photos {
// TEMP: for dev placement only
.placeholder-cam,
.placeholder-photo {
height: 300px;
.wrapper-cam,
.wrapper-photo {
height: 375px;
width: 500px;
background-color: #eee;
position: relative;
......@@ -486,7 +490,7 @@ body.register.verification-process {
background-color: $white;
.title {
font-weight: bold;
@extend .t-title4;
}
.wrapper-up,
......@@ -495,7 +499,7 @@ body.register.verification-process {
}
.cam {
width: 45%;
width: 500px;
float: left;
padding-right: $baseline;
}
......@@ -509,6 +513,7 @@ body.register.verification-process {
margin: 0;
padding: ($baseline*.25) ($baseline*.75);
list-style-type: none;
height: 60px;
.control {
display: inline-block;
......@@ -518,7 +523,10 @@ body.register.verification-process {
display: block;
background-color: $blue;
color: $white;
border: none;
border: 3px solid #1A74A0;
border-radius: 40px;
padding: 10px 5px;
text-align: center;
i {
padding: ($baseline*.25) ($baseline*.5);
......@@ -571,13 +579,15 @@ body.register.verification-process {
}
.photo-tips {
@extend .t-copy-sub1;
width: 45%;
float: left;
ul {
margin: 0;
padding: 0;
list-style-type: none;
.title {
@extend .t-title5;
border-bottom: 1px solid #ddd;
padding: $baseline 0 ($baseline/4) 0;
font-weight: bold;
}
li {
......@@ -586,8 +596,7 @@ body.register.verification-process {
}
.next-step {
width: 45%;
float: right;
margin-top: $baseline;
.tip {
margin-top: $baseline;
......@@ -599,7 +608,7 @@ body.register.verification-process {
}
.review-photo {
width: 45%;
width: 500px;
float: left;
}
......
lms/templates/footer.html
......@@ -37,7 +37,7 @@
</nav>
<div class="colophon-about">
<img src="${MITX_ROOT_URL}/static/images/header-logo.png" />
<img src="${MITX_ROOT_URL}/lms/static/images/header-logo.png" />
<p>${_("{platform_name} is a non-profit created by founding partners {Harvard} and {MIT} whose mission is to bring the best of higher education to students of all ages anywhere in the world, wherever there is Internet access. {platform_name}'s free online MOOCs are interactive and subjects include computer science, public health, and artificial intelligence.").format(platform_name="EdX", Harvard="Harvard", MIT="MIT")}</p>
</div>
......
lms/templates/verify_student/photo_verification.html
......@@ -194,8 +194,8 @@
<div class="wrapper-up">
<div id="facecam" class="cam">
<div class="placeholder-cam">
<video id="face_video" width="400" height="300" autoplay></video><br/>
<div class="wrapper-cam">
<video id="face_video" width="500" height="375" autoplay></video><br/>
<canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
......@@ -216,19 +216,16 @@
</div>
<div class="help photo-tips facetips">
<h4>Tips on taking a successful photo</h4>
<h4 class="title">Tips on taking a successful photo</h4>
<ul>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
<li>Maecenas faucibus mollis interdum.</li>
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
<li>Cras mattis consectetur purus sit amet fermentum.</li>
<li>Make sure your face is well-lit</li>
<li>Be sure your entire face is inside the frame</li>
<li>Can we match the photo you took with the one on your ID?</li>
<li>Click the checkmark once you are happy with the photo</li>
</ul>
</div>
</div>
<div class="wrapper-down">
<div class="faq facefaq">
<h4 class="sr title">Common Questions</h4>
<h4 class="title">Common Questions</h4>
<dl>
<dt>Why do you need my photo?</dt>
<dd>We need your photo to confirm that you are you.</dd>
......@@ -236,7 +233,12 @@
<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>
<div class="wrapper-down">
<div class="next-step">
<p class="m-btn-primary" id="face_next_button">
......@@ -255,8 +257,8 @@
<div id="idcam" class="cam">
<div class="placeholder-cam">
<video id="photo_id_video" width="400" height="300" autoplay></video><br/>
<div class="wrapper-cam">
<video id="photo_id_video" width="500" height="375" autoplay></video><br/>
<canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
......@@ -276,32 +278,29 @@
</div>
<div class="photo-tips idtips">
<h4>Tips on taking a successful photo</h4>
<h4 class="title">Tips on taking a successful photo</h4>
<ul>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
<li>Maecenas faucibus mollis interdum.</li>
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
<li>Cras mattis consectetur purus sit amet fermentum.</li>
<li>Make sure your ID is well-lit</li>
<li>Check that there isn't any glare</li>
<li>Ensure that you can see your photo and read your name</li>
<li>Try to keep your fingers at the edge to avoid covering important information</li>
</ul>
<h4 class="title">Common Questions</h4>
<dl>
<dt>Why do you need a photo of my ID?</dt>
<dd>We need to match your ID with your photo and name to confirm that you are you.</dd>
<dt>What do you do with this picture?</dt>
<dd>We encrypt it and send it to our secure authorization service for review. We use the highest levels of security and do not save the photo or information anywhere once the match has been completed.</dd>
</dl>
</div>
</div>
<div class="wrapper-down">
<div class="faq idfaq">
<h4 class="sr">Common Questions</h4>
<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>
<dd>Maecenas faucibus mollis interdum.</dd>
<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>
</dl>
</div>
<div class="next-step">
<p class="m-btn-primary" id="photo_id_next_button">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
......@@ -325,8 +324,8 @@
<div class="wrapper-up">
<div id="review-facephoto" class="review-photo">
<div class="placeholder-photo">
<img id="face_image" width="512" height="384" src=""/>
<div class="wrapper-photo">
<img id="face_image" width="500" height="375" src=""/>
</div>
<h4>The photo above needs to meet the following requirements:</h4>
......@@ -338,8 +337,8 @@
</div>
<div id="review-idphoto" class="review-photo">
<div class="placeholder-photo">
<img id="photo_id_image" width="512" height="384" src=""/>
<div class="wrapper-photo">
<img id="photo_id_image" width="500" height="375" src=""/>
</div>
<h4>The photo above needs to meet the following requirements:</h4>
......@@ -388,7 +387,7 @@
<p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
<form id="pay_form" method="post" action="${purchase_endpoint}">
<!-- <a href="#">Go to Step 4: Secure Payment</a> -->
<!-- <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> -->
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<input type="checkbox" name="match" id="confirm_pics_good" /> <label for="match">Yes! My details all match.</label>
......
lms/templates/verify_student/show_requirements.html
......@@ -36,19 +36,19 @@
<div class="reqs">
<div class="req1 req">
<h4>Identification</h4>
<div class="placeholder-art"><i class="icon-credit-card"></i></div>
<div class="art"><i class="icon-id"></i></div>
<p>A photo identification document <span class="tip">a drivers license, passport, student ID, or other ID with your name and picture on it</span></p>
</div>
<div class="req2 req">
<h4>Webcam</h4>
<div class="placeholder-art"><i class="icon-facetime-video"></i></div>
<i class="icon-facetime-video"></i>
<p>A webcam and a modern browser <span class="tip">Firefox, Chrome, or Opera</span></p>
</div>
<div class="req3 req">
<h4>Credit or Debit Card</h4>
<div class="placeholder-art"><i class="icon-credit-card"></i></div>
<i class="icon-credit-card"></i>
<p>A major credit or debit card <span class="tip">Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club</span></p>
</div>
</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