Skip to content

E
edx-platform
Commit cb168523 by Frances Botsford
Options

completed styling on select a track for verification

parent d4e8034f
Showing with 73 additions and 38 deletions
lms/static/sass/views/_verification.scss
......@@ -4,27 +4,54 @@
body.register.verification {
font-family: 'Open Sans', sans-serif;
h1, h2, h3, h4, h5, h6, p {
h1, h2, h3, h4, h5, h6, p, input {
font-family: 'Open Sans', sans-serif;
}
input {
font-style: normal;
font-weight: 400;
}
label {
font-style: normal;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
dl.faq {
font-size: 12px;
label {
font-size: 12px;
font-weight: bold;
}
}
dt {
margin-bottom: ($baseline*.75);
margin: 0 0 .5em 0;
font-weight: bold;
}
dd {
margin: 0;
margin: 0 0 1em 0;
}
dl dl {
margin: ($baseline/4) 0 0 ($baseline/2);
}
.content-wrapper {
background: none repeat scroll 0 0 #F7F7F7;
padding-bottom: 0;
}
.container {
background-color: #fff;
padding: ($baseline*1.5);
padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5);
}
.tip {
......@@ -89,6 +116,16 @@ body.register.verification {
&.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);
}
}
......@@ -119,6 +156,11 @@ body.register.verification {
margin: 1em 0 2em 0;
}
.more {
margin-top: ($baseline/2);
border-top: 1px solid #ccc;
}
.tips {
float: right;
width: 32%;
......@@ -142,13 +184,6 @@ body.register.verification {
margin-right: ($baseline/4);
vertical-align: middle;
label {
font-style: normal;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
vertical-align: middle;
}
&.other1 {
margin-right: -($baseline/4);
padding-right: ($baseline/4);
......@@ -157,6 +192,10 @@ body.register.verification {
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
}
label {
vertical-align: middle;
}
input {
vertical-align: middle;
}
......@@ -263,20 +302,8 @@ body.register.verification {
width: 45%;
float: left;
padding-right: $baseline;
dt {
font-weight: bold;
padding: 0 0 ($baseline/2) 0;
}
dd {
margin: 0;
padding: 0 0 $baseline 0;
}
}
}
.photo-tips {
......
lms/templates/verify_student/photo_id_upload.html
......@@ -41,7 +41,7 @@ $(document).ready(function() {
<div class="wrap-action">
<p class="m-btn-primary">
<a href="">Audit [Course org and number]</a>
<a href="">Select Audit</a>
</p>
</div>
</div>
......@@ -51,6 +51,7 @@ $(document).ready(function() {
<div class="select">
<div class="block block-cert">
<h4 class="title">Certificate of Achievement</h4>
<span class="ribbon"></span>
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
<form>
......@@ -70,10 +71,10 @@ $(document).ready(function() {
<input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label>
</li>
<li class="other1">
<input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label>
<input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other">$<span class="sr">Other</span></label>
</li>
<li class="other2">
<label for="contribution-other-amt"><span class="sr">Other Amount</span> $</label> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt">
<label for="contribution-other-amt"><span class="sr">Other Amount</span> </label> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt">
</li>
</ul>
</dd>
......@@ -84,23 +85,30 @@ $(document).ready(function() {
</p>
<div class="more">
<dl>
<dl class="faq">
<dt>Why do I have to pay?</dt>
<dd>Your payment helps cover the costs of verification. As a non-profit, edX keeps these costs as low as possible, Your payment will also help edX with our mission to provide quality education to anyone.</dd>
<dt>What if I can’t afford it?</dt>
<dd>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course.</dd>
<dt>What if I can't afford it?</dt>
<dd>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course.
<!--Enter $0 above and explain why you would like the fee waived below. Then click Select Certificate button to move on to the next step.
<dl>
<dt><label class="sr" for="explain">Explain your situation:</label></dt>
<dd><p>Tell us why you need help paying for this course in 180 characters or more.</p>
<textarea name="explain" rows="5" cols="50"></textarea>
</dd>
</dl>
-->
<dt>I’d like to pay more than the minimum. Is my contribution tax deductible?</dt>
<dd>Please check with your tax advisor to determine whether your contribution is tax deductible.</dd>
</dd>
<dt><label for="explain">Explain your situation:</label></dt>
<dd>Tell us why you need help paying for this course in 180 characters or more.
<textarea name="explain" rows="5" cols="40"></textarea>
<dt>I'd like to pay more than the minimum. Is my contribution tax deductible?</dt>
<dd>Please check with your tax advisor to determine whether your contribution is tax deductible.</dd>
<dt>What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt>
<dd>If you don't have a webcam, credit or debit card or acceptable ID, you can opt to simply audit this course, or select to work towards a free Honor Code Certificate of Achievement for this course by checking the box below. Then click the Select Certificate button to complete registration. We won't ask you to verify your identity.
<p><input type="checkbox" name="honor-code"> <label for="honor-code">Select Honor Code Certificate</label></p>
</dd>
<dt>What if I don’t meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt>
<dd>If you don’t have a webcam, credit or debit card or acceptable ID, you can opt to simply audit this course, or select to work towards a free Honor Code Certificate of Achievement for this course.</dd>
</dl>
</div>
......@@ -114,7 +122,7 @@ $(document).ready(function() {
</p>
<p class="m-btn-primary green">
<a href="${reverse('verify_student/show_requirements')}">Register for Certificate</a>
<a href="${reverse('verify_student/show_requirements')}">Select Certificate</a>
</p>
</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