completed styling on select a track for verification

This commit is contained in:
Frances Botsford
2013-08-23 10:17:52 -04:00
parent d4e8034fca
commit cb16852313
2 changed files with 73 additions and 38 deletions

View File

@@ -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 {

View File

@@ -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 cant 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>
<dt>Id 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><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>
</dd>
</dl>
-->
</dd>
<dt>What if I dont meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt>
<dd>If you dont 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>
<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>
</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>