Skip to content
Snippets Groups Projects
Commit e7b06c1a authored by Frances Botsford's avatar Frances Botsford
Browse files

almost all of the styling for the select page of verification

parent 0086a054
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/sass/views/_verification.scss
+ 141
− 7
View file @ e7b06c1a
......@@ -2,19 +2,39 @@
// ====================
body.register.verification {
font-family: 'Open Sans', sans-serif;
h1, h2, h3, h4, h5, h6, p {
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6, p {
font-family: 'Open Sans', sans-serif;
}
.content-wrapper {
background: none repeat scroll 0 0 #F7F7F7;
}
.container {
background-color: #fff;
padding: ($baseline*1.5);
}
.tip {
@include transition(color 0.15s ease-in-out 0s);
display: block;
margin-top: ($baseline/4);
color: $lighter-base-font-color;
font-size: em(13);
}
.page-header {
.title {
@extend .t-title5;
@include font-size(18);
margin-bottom: $baseline;
font-weight: bold;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
color: #2F73BC;
font-weight: 300;
text-transform: uppercase;
}
}
......@@ -27,23 +47,137 @@ body.register.verification {
.select {
@include clearfix();
.divider {
display: block;
clear: both;
width: 60%;
margin: $baseline $baseline 0 $baseline;
border-top: 2px solid #ddd;
p {
position: relative;
top: -$baseline;
width: 40px;
margin: 0 auto;
padding: 0 $baseline;
background-color: #fff;
font-size: 24px;
color: #aaa;
text-align: center;
}
}
.block {
position: relative;
float: left;
margin: 0 $baseline $baseline 0;
margin: 0 $baseline ($baseline*1.5) 0;
border-top: 5px solid #32A5D9;
background-color: #eee;
padding: $baseline;
padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5);
width: 60%;
&.block-cert {
border-top: 5px solid #008801;
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
display: inline-block;
background-color: $light-gray;
padding: ($baseline/2) ($baseline*.75);
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);
}
&.other2 {
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
}
input {
vertical-align: middle;
}
}
}
dt {
margin-bottom: ($baseline*.75);
}
dd {
margin: 0;
}
}
p, li, dl {
color: $lighter-base-font-color;
}
.wrap-copy {
width: 60%;
display: inline-block;
vertical-align: middle;
}
.title {
@extend .t-title7;
}
.m-btn-primary {
position: absolute;
bottom: ($baseline*1.5);
right: ($baseline*1.5);
a {
color: $very-light-text;
&:hover {
text-decoration: none;
border: none;
}
}
&.green {
box-shadow: 0 2px 1px rgba(2,100,2,1);
background-color: rgba(0,136,1,1);
&:hover {
box-shadow: 0 2px 1px rgba(2,100,2,1);
background-color: #029D03;
}
}
}
}
hr {
margin: 1em 0 2em 0;
}
.tips {
float: right;
width: 32%;
p {
font-size: 14px;
}
}
}
......
lms/templates/verify_student/face_upload.html
+ 29
− 0
View file @ e7b06c1a
......@@ -216,6 +216,35 @@ $(document).ready(function() {
<div class="wrapper-down">
<h3>Check Your Contribution</h3>
<dl>
<dt>
The contribution you selected for this course is (in USD):
</dt>
<dd>
<ul>
<li>
<input type="radio" name="contribution-25" id="contribution"> <label for="contribution-25">$25</label>
</li>
<li>
<input type="radio" name="contribution-50" id="contribution"> <label for="contribution-50">$50</label>
</li>
<li>
<input type="radio" name="contribution-100" id="contribution"> <label for="contribution-100">$100</label>
</li>
<li>
<input type="radio" name="contribution-other" id="contribution"> <label for="contribution-other">Other</label>
</li>
<li>
<label for="contribution-other-amt">Other Amount</label> <input type="text" name="contribution-other" id="contribution-other-amt">
</li>
</ul>
</dd>
</dl>
</div>
<div class="next">
......
lms/templates/verify_student/photo_id_upload.html
+ 79
− 26
View file @ e7b06c1a
......@@ -3,66 +3,119 @@
<%inherit file="../main.html" />
<%block name="bodyclass">register verification select</%block>
<%block name="js_extra">
<script type="text/javascript">
$(document).ready(function() {
$( ".more" ).slideUp();
$( ".expand" ).click(function(e) {
e.preventDefault();
$(this).next().slideToggle();
});
});
</script>
</%block>
<%block name="content">
<div class="container">
<section class="wrapper">
<header class="page-header">
<h2 class="title">You are registering for [coursename] (ID Verified)</h2>
<header class="page-header header-white">
<h2 class="title header-white-title">You are registering for [coursename] (ID Verified)</h2>
</header>
<h3 class="title">Select your track:</h3>
<div class="select">
<div class="block block-audit">
<h4 class="title">Audit</h4>
<p>Sign up to audit this course for free and track your own progress.</p>
<p class="btn">
<a href="">Select Audit</a>
</p>
<div class="wrap-copy">
<h4 class="title">Audit This Course</h4>
<p>Sign up to audit this course for free and track your own progress.</p>
</div>
<div class="wrap-action">
<p class="m-btn-primary">
<a href="">Audit [Course org and number]</a>
</p>
</div>
</div>
<div class="divider"><p>or</p></div>
<div class="select">
<div class="block block-cert">
<h4 class="title">Certificate of Achievement</h4>
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
<form>
<dl>
<dt>
Select your contribution for this course (in USD):
Select your contribution for this course:
</dt>
<dd>
<ul>
<li>
<input type="radio" name="contribution-25" id="contribution"> <label for="contribution-25">$25</label>
<input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
</li>
<li>
<input type="radio" name="contribution-50" id="contribution"> <label for="contribution-50">$50</label>
<input type="radio" id="contribution-50" name="contribution"> <label for="contribution-50">$50 USD</label>
</li>
<li>
<input type="radio" name="contribution-100" id="contribution"> <label for="contribution-100">$100</label>
<input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label>
</li>
<li>
<input type="radio" name="contribution-other" id="contribution"> <label for="contribution-other">Other</label>
<li class="other1">
<input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label>
</li>
<li>
<label for="contribution-other-amt">Other Amount</label> <input type="text" name="contribution-other" id="contribution-other-amt">
<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">
</li>
</ul>
</dd>
</dl>
<a href="">Why do I have to pay? What if I don't meet all the requirements?</a>
<p class="tip tip-input expand">
<a href="">Why do I have to pay? What if I don't meet all the requirements?</a>
</p>
<img src="" />
<div class="more">
<dl>
<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>
<p>
<a href="">What is an ID Verified Certificate?</a>
</p>
<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>
<p class="btn">
<a href="${reverse('verify_student/show_requirements')}">Select Certificate</a>
</p>
<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>
<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>
</form>
<hr />
<p class="tip">
<a href="">What is an ID Verified Certificate?</a>
</p>
<p class="m-btn-primary green">
<a href="${reverse('verify_student/show_requirements')}">Register for Certificate</a>
</p>
</div>
<div class="tips">
......@@ -74,8 +127,8 @@
</div>
<p><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p>
<p>Not the course you wanted? <a href="">Return to our course listings</a>.</p>
<p class="tip"><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p>
<p class="tip">Not the course you wanted? <a href="">Return to our course listings</a>.</p>
</section>
......
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