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 { ...@@ -13,6 +13,7 @@ body.register.verification-process {
// reset: typography - copy // reset: typography - copy
p, ol, ul, dl, input, select, textarea { p, ol, ul, dl, input, select, textarea {
font-family: $f-sans-serif; font-family: $f-sans-serif;
@extend .t-copy-base;
} }
// reset: copy/text // reset: copy/text
...@@ -211,20 +212,20 @@ body.register.verification-process { ...@@ -211,20 +212,20 @@ body.register.verification-process {
color: #ccc; color: #ccc;
&.current { &.current {
color: #000; color: #008801;
.number { .number {
border: 4px solid #000; border: 4px solid #008801;
color: #000; color: #008801;
} }
} }
&.done { &.done {
color: #008801; color: #777;
.number { .number {
border: 4px solid #008801; border: 4px solid #777;
color: #008801; color: #777;
} }
} }
} }
...@@ -382,10 +383,11 @@ body.register.verification-process { ...@@ -382,10 +383,11 @@ body.register.verification-process {
} }
.reqs { .reqs {
margin: $baseline; margin: $baseline $baseline ($baseline*1.5) $baseline;
} }
.req { .req {
height: 13em;
width: 27%; width: 27%;
display: inline-block; display: inline-block;
margin-right: 1%; margin-right: 1%;
...@@ -394,16 +396,17 @@ body.register.verification-process { ...@@ -394,16 +396,17 @@ body.register.verification-process {
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
// for placement only [class^="icon-"] {
.placeholder-art { display: block;
height: 150px;
width: 150px; width: 150px;
margin: $baseline auto; margin: $baseline auto;
background-color: #eee; font-size: 75px;
i { &.icon-id {
font-size: 24px; background: transparent url('../images/icon-id.png') no-repeat center center;
height: 70px;
} }
} }
} }
...@@ -467,9 +470,10 @@ body.register.verification-process { ...@@ -467,9 +470,10 @@ body.register.verification-process {
&.step-photos { &.step-photos {
// TEMP: for dev placement only // TEMP: for dev placement only
.placeholder-cam, .wrapper-cam,
.placeholder-photo { .wrapper-photo {
height: 300px; height: 375px;
width: 500px;
background-color: #eee; background-color: #eee;
position: relative; position: relative;
...@@ -486,7 +490,7 @@ body.register.verification-process { ...@@ -486,7 +490,7 @@ body.register.verification-process {
background-color: $white; background-color: $white;
.title { .title {
font-weight: bold; @extend .t-title4;
} }
.wrapper-up, .wrapper-up,
...@@ -495,7 +499,7 @@ body.register.verification-process { ...@@ -495,7 +499,7 @@ body.register.verification-process {
} }
.cam { .cam {
width: 45%; width: 500px;
float: left; float: left;
padding-right: $baseline; padding-right: $baseline;
} }
...@@ -509,6 +513,7 @@ body.register.verification-process { ...@@ -509,6 +513,7 @@ body.register.verification-process {
margin: 0; margin: 0;
padding: ($baseline*.25) ($baseline*.75); padding: ($baseline*.25) ($baseline*.75);
list-style-type: none; list-style-type: none;
height: 60px;
.control { .control {
display: inline-block; display: inline-block;
...@@ -518,7 +523,10 @@ body.register.verification-process { ...@@ -518,7 +523,10 @@ body.register.verification-process {
display: block; display: block;
background-color: $blue; background-color: $blue;
color: $white; color: $white;
border: none; border: 3px solid #1A74A0;
border-radius: 40px;
padding: 10px 5px;
text-align: center;
i { i {
padding: ($baseline*.25) ($baseline*.5); padding: ($baseline*.25) ($baseline*.5);
...@@ -571,13 +579,15 @@ body.register.verification-process { ...@@ -571,13 +579,15 @@ body.register.verification-process {
} }
.photo-tips { .photo-tips {
@extend .t-copy-sub1;
width: 45%; width: 45%;
float: left; float: left;
ul { .title {
margin: 0; @extend .t-title5;
padding: 0; border-bottom: 1px solid #ddd;
list-style-type: none; padding: $baseline 0 ($baseline/4) 0;
font-weight: bold;
} }
li { li {
...@@ -586,8 +596,7 @@ body.register.verification-process { ...@@ -586,8 +596,7 @@ body.register.verification-process {
} }
.next-step { .next-step {
width: 45%; margin-top: $baseline;
float: right;
.tip { .tip {
margin-top: $baseline; margin-top: $baseline;
...@@ -599,7 +608,7 @@ body.register.verification-process { ...@@ -599,7 +608,7 @@ body.register.verification-process {
} }
.review-photo { .review-photo {
width: 45%; width: 500px;
float: left; float: left;
} }
......
lms/templates/footer.html
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</nav> </nav>
<div class="colophon-about"> <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> <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> </div>
......
lms/templates/verify_student/photo_verification.html
...@@ -194,8 +194,8 @@ ...@@ -194,8 +194,8 @@
<div class="wrapper-up"> <div class="wrapper-up">
<div id="facecam" class="cam"> <div id="facecam" class="cam">
<div class="placeholder-cam"> <div class="wrapper-cam">
<video id="face_video" width="400" height="300" autoplay></video><br/> <video id="face_video" width="500" height="375" autoplay></video><br/>
<canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas> <canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
</div> </div>
...@@ -216,19 +216,16 @@ ...@@ -216,19 +216,16 @@
</div> </div>
<div class="help photo-tips facetips"> <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> <ul>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li> <li>Make sure your face is well-lit</li>
<li>Maecenas faucibus mollis interdum.</li> <li>Be sure your entire face is inside the frame</li>
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li> <li>Can we match the photo you took with the one on your ID?</li>
<li>Cras mattis consectetur purus sit amet fermentum.</li> <li>Click the checkmark once you are happy with the photo</li>
</ul> </ul>
</div>
</div>
<div class="wrapper-down">
<div class="faq facefaq"> <h4 class="title">Common Questions</h4>
<h4 class="sr title">Common Questions</h4>
<dl> <dl>
<dt>Why do you need my photo?</dt> <dt>Why do you need my photo?</dt>
<dd>We need your photo to confirm that you are you.</dd> <dd>We need your photo to confirm that you are you.</dd>
...@@ -236,7 +233,12 @@ ...@@ -236,7 +233,12 @@
<dt>What do you do with this picture?</dt> <dt>What do you do with this picture?</dt>
<dd>We only use it to verify your identity. It is not displayed anywhere.</dd> <dd>We only use it to verify your identity. It is not displayed anywhere.</dd>
</dl> </dl>
</div> </div>
</div>
<div class="wrapper-down">
<div class="next-step"> <div class="next-step">
<p class="m-btn-primary" id="face_next_button"> <p class="m-btn-primary" id="face_next_button">
...@@ -255,8 +257,8 @@ ...@@ -255,8 +257,8 @@
<div id="idcam" class="cam"> <div id="idcam" class="cam">
<div class="placeholder-cam"> <div class="wrapper-cam">
<video id="photo_id_video" width="400" height="300" autoplay></video><br/> <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> <canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
</div> </div>
...@@ -276,32 +278,29 @@ ...@@ -276,32 +278,29 @@
</div> </div>
<div class="photo-tips idtips"> <div class="photo-tips idtips">
<h4>Tips on taking a successful photo</h4> <h4 class="title">Tips on taking a successful photo</h4>
<ul> <ul>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li> <li>Make sure your ID is well-lit</li>
<li>Maecenas faucibus mollis interdum.</li> <li>Check that there isn't any glare</li>
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li> <li>Ensure that you can see your photo and read your name</li>
<li>Cras mattis consectetur purus sit amet fermentum.</li> <li>Try to keep your fingers at the edge to avoid covering important information</li>
</ul> </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> </div>
<div class="wrapper-down"> <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"> <div class="next-step">
<p class="m-btn-primary" id="photo_id_next_button"> <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> <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
...@@ -325,8 +324,8 @@ ...@@ -325,8 +324,8 @@
<div class="wrapper-up"> <div class="wrapper-up">
<div id="review-facephoto" class="review-photo"> <div id="review-facephoto" class="review-photo">
<div class="placeholder-photo"> <div class="wrapper-photo">
<img id="face_image" width="512" height="384" src=""/> <img id="face_image" width="500" height="375" src=""/>
</div> </div>
<h4>The photo above needs to meet the following requirements:</h4> <h4>The photo above needs to meet the following requirements:</h4>
...@@ -338,8 +337,8 @@ ...@@ -338,8 +337,8 @@
</div> </div>
<div id="review-idphoto" class="review-photo"> <div id="review-idphoto" class="review-photo">
<div class="placeholder-photo"> <div class="wrapper-photo">
<img id="photo_id_image" width="512" height="384" src=""/> <img id="photo_id_image" width="500" height="375" src=""/>
</div> </div>
<h4>The photo above needs to meet the following requirements:</h4> <h4>The photo above needs to meet the following requirements:</h4>
...@@ -388,7 +387,7 @@ ...@@ -388,7 +387,7 @@
<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>
<form id="pay_form" method="post" action="${purchase_endpoint}"> <form id="pay_form" method="post" action="${purchase_endpoint}">
<!-- <a href="#">Go to Step 4: Secure Payment</a> --> <!-- <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> <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 @@ ...@@ -36,19 +36,19 @@
<div class="reqs"> <div class="reqs">
<div class="req1 req"> <div class="req1 req">
<h4>Identification</h4> <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> <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>
<div class="req2 req"> <div class="req2 req">
<h4>Webcam</h4> <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> <p>A webcam and a modern browser <span class="tip">Firefox, Chrome, or Opera</span></p>
</div> </div>
<div class="req3 req"> <div class="req3 req">
<h4>Credit or Debit Card</h4> <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> <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>
</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