Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated copy for vcert flow

Browse Source
This commit is contained in:
Frances Botsford
2013-09-04 13:42:10 -04:00
parent 2e3a918da2
commit b2ddea7a80
5 changed files with 62 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
lms/static/sass/views/_verification.scss
View File

@@ -148,7 +148,7 @@
visibility: none;
height: 0;
opacity: 0.0;
overflow: scroll;
overflow-y: scroll;
}
}
@@ -162,7 +162,7 @@
.expandable-area {
visibility: visible;
height: ($baseline*12);
height: ($baseline*16);
opacity: 1.0;
}
}
@@ -230,6 +230,14 @@
letter-spacing: 0;
}
.checkbox label {
display: inline-block;
}
input[type="checkbox"] {
width: auto;
}
// reset: lists
.list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group {
@extend .ui-no-list;
@@ -601,6 +609,7 @@
// help - general list
.list-help {
margin-top: ($baseline/2);
.help-item {
margin-bottom: ($baseline/4);
@@ -879,6 +888,7 @@
.cam {
.placeholder-cam {
position: relative;
width: 95%;
height: 375px;
margin: ($baseline/2) auto;
@@ -886,13 +896,23 @@
// placeholders
.placeholder-art {
opacity: 0.5;
opacity: 0.7;
z-index: 100;
.copy {
position: absolute;
top: 40%;
margin: 0 40px;
text-align: center;
}
}
// previously defined in HTML
video, canvas {
position: relative;
display: block;
@include size(100% 100%);
z-index: 500;
}
}
@@ -1397,17 +1417,18 @@
.req-activate {
float: left;
text-align: center;
border-color: $m-pink-l4;
border-color: $m-pink-l3;
.title {
@extend .t-title4;
@extend .t-weight4;
border-bottom-color: $m-pink-l4;
background: $m-pink-l5;
border-bottom-color: $m-pink-l3;
background: tint($m-pink, 95%);
color: $m-pink;
}
.placeholder-art {
background: $m-pink-l4;
background: $m-pink-l1;
}
.copy-super {

28
lms/templates/verify_student/photo_verification.html
View File

@@ -79,6 +79,7 @@
<div class="placeholder-cam" id="face_capture_div">
<div class="placeholder-art">
<p class="copy">Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission</p>
</div>
<video id="face_video" autoplay></video><br/>
@@ -128,7 +129,7 @@
<div class="copy">
<dl class="list-faq">
<dt class="faq-question">${_("Why do you need my photo?")}</dt>
<dd class="faq-answer">${_("We need your photo to confirm that you are you.")}</dd>
<dd class="faq-answer">${_("As part of the verification process, we need your photo to confirm that you are you.")}</dd>
<dt class="faq-question">${_("What do you do with this picture?")}</dt>
<dd class="faq-answer">${_("We only use it to verify your identity. It is not displayed anywhere.")}</dd>
@@ -155,7 +156,7 @@
<div class="idphoto view">
<h3 class="title">${_("Show Us Your ID")}</h3>
<div class="instruction">
<p>${_("Use your webcam to take a picture of your face so we can match it with the picture on your ID.")}</p>
<p>${_("Use your webcam to take a picture of your ID so we can match it with your photo and the name on your account.")}</p>
</div>
<div class="wrapper-task">
@@ -163,6 +164,7 @@
<div class="placeholder-cam" id="photo_id_capture_div">
<div class="placeholder-art">
<p class="copy">Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission</p>
</div>
<video id="photo_id_video" autoplay></video><br/>
@@ -193,15 +195,16 @@
</div>
<div class="wrapper-help">
<div class="help help-task photo-tips facetips">
<div class="help help-task photo-tips idtips">
<h4 class="title">${_("Tips on taking a successful photo")}</h4>
<div class="copy">
<ul>
<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 class="list-help">
<li class="help-item">${_("Make sure your ID is well-lit")}</li>
<li class="help-item">${_("Check that there isn't any glare")}</li>
<li class="help-item">${_("Ensure that you can see your photo and read your name")}</li>
<li class="help-item">${_("Try to keep your fingers at the edge to avoid covering important information")}</li>
<li class="help-item">${_("Acceptable IDs include drivers licenses, passports, or other goverment-issued IDs that include your name and photo")}</li>
</ul>
</div>
</div>
@@ -249,7 +252,7 @@
<div class="copy">
<!-- FIXME: not sure how to handle variables w/in translation context -->
${_("Contact {platform_name}").format(platform_name=settings.PLATFORM_NAME)}
<p>${_("Make sure your full name on your edX account, {}, matches your ID. We will also use this as the name on your certificate.").format(user_full_name)}</p>
<p>${_("Make sure your full name on your edX account ({}) matches your ID. We will also use this as the name on your certificate.").format(user_full_name)}</p>
</div>
<ul class="list-actions">
@@ -263,7 +266,7 @@
<h4 class="title">${_("Review the Photos You've Taken")}</h4>
<div class="copy">
<p>${_("Curabitur blandit tempus porttitor. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.")}</p>
<p>${_("Please review the photos below and verify that they meet the requirements listed below.")}</p>
</div>
<ol class="wrapper-photos">
@@ -291,8 +294,9 @@
<h5 class="title">${_("The photo above needs to meet the following requirements:")}</h5>
<ul class="list-help list-tips copy">
<li class="tip">${_("Be readable (not too far away, no glare)")}</li>
<li class="tip">${_("Show your name")}</li>
<li class="tip">${_("Match the photo of your face and your name above")}</li>
<li class="tip">${_("Show your full name")}</li>
<li class="tip">${_("The photo on your ID matches the photo of your face")}</li>
<li class="tip">${_("The name on your ID matches the name on your account above")}</li>
</ul>
</div>
</li>

14
lms/templates/verify_student/show_requirements.html
View File

@@ -10,9 +10,9 @@
<div class=" msg msg-activate">
<i class="msg-icon icon-warning-sign"></i>
<div class="msg-content">
<h3 class="title">${_("You need to activate your account before proceeding")}</h3>
<h3 class="title">${_("You need to activate your edX account before proceeding")}</h3>
<div class="copy">
<p>${_("Please check your email for further instructions on verifying your new account.")}</p>
<p>${_("Please check your email for further instructions on activating your new account.")}</p>
</div>
</div>
</div>
@@ -74,7 +74,7 @@
<h3 class="title">${_("What You Will Need to Register")}</h3>
<div class="instruction">
<p>${_("There are a few things you will need to register as an ID verified student:")}</p>
<p>${_("There are three things you will need to register as an ID verified student:")}</p>
</div>
<ul class="list-reqs ${"account-not-activated" if is_not_active else ""}">
@@ -88,7 +88,7 @@
<div class="copy">
<p>
<span class="copy-super">${_("Check Your Email")}</span>
<span class="copy-sub">${_("Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum")}.</span>
<span class="copy-sub">${_("you need an active edX account before registering - check your email for instructions")}</span>
</p>
</div>
</li>
@@ -104,7 +104,7 @@
<div class="copy">
<p>
<span class="copy-super">${_("A photo identification document")}</span>
<span class="copy-sub">${_("a drivers license, passport, student ID, or other ID with your name and picture on it")}</span>
<span class="copy-sub">${_("a drivers license, passport, or other goverment-issued ID with your name and picture on it")}</span>
</p>
</div>
</li>
@@ -118,7 +118,7 @@
<div class="copy">
<p>
<span class="copy-super">${_("A webcam and a modern browser")}</span>
<span class="copy-sub">${_("Firefox, Chrome, or Opera")}</span>
<span class="copy-sub">${_("Firefox, Chrome, Safari, IE9+")}</span>
</p>
</div>
</li>
@@ -132,7 +132,7 @@
<div class="copy">
<p>
<span class="copy-super">${_("A major credit or debit card")}</span>
<span class="copy-sub">${_("Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club")}</span>
<span class="copy-sub">${_("Visa, Master Card, American Express, Discover, Diners Club, JCB with Discover logo")}</span>
</p>
</div>
</li>