Skip to content

E
edx-platform
Commit e7b06c1a by Frances Botsford
Options

almost all of the styling for the select page of verification

parent 0086a054
Showing with 239 additions and 23 deletions
lms/static/sass/views/_verification.scss
...@@ -8,13 +8,33 @@ body.register.verification { ...@@ -8,13 +8,33 @@ body.register.verification {
font-family: 'Open Sans', sans-serif; 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 { .page-header {
.title { .title {
@extend .t-title5; @include font-size(18);
margin-bottom: $baseline; 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 { ...@@ -27,23 +47,137 @@ body.register.verification {
.select { .select {
@include clearfix(); @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 { .block {
position: relative;
float: left; float: left;
margin: 0 $baseline $baseline 0; margin: 0 $baseline ($baseline*1.5) 0;
border-top: 5px solid #32A5D9;
background-color: #eee; background-color: #eee;
padding: $baseline; padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5);
width: 60%; 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 { .title {
@extend .t-title7; @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 { .tips {
float: right; float: right;
width: 32%; width: 32%;
p {
font-size: 14px;
}
} }
} }
......
lms/templates/verify_student/face_upload.html
...@@ -216,6 +216,35 @@ $(document).ready(function() { ...@@ -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"> <div class="next">
......
lms/templates/verify_student/photo_id_upload.html
...@@ -3,65 +3,118 @@ ...@@ -3,65 +3,118 @@
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification select</%block> <%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"> <%block name="content">
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header"> <header class="page-header header-white">
<h2 class="title">You are registering for [coursename] (ID Verified)</h2> <h2 class="title header-white-title">You are registering for [coursename] (ID Verified)</h2>
</header> </header>
<h3 class="title">Select your track:</h3> <h3 class="title">Select your track:</h3>
<div class="select"> <div class="select">
<div class="block block-audit"> <div class="block block-audit">
<h4 class="title">Audit</h4> <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> <p>Sign up to audit this course for free and track your own progress.</p>
</div>
<p class="btn"> <div class="wrap-action">
<a href="">Select Audit</a> <p class="m-btn-primary">
<a href="">Audit [Course org and number]</a>
</p> </p>
</div> </div>
</div>
<div class="divider"><p>or</p></div>
<div class="select"> <div class="select">
<div class="block block-cert"> <div class="block block-cert">
<h4 class="title">Certificate of Achievement</h4> <h4 class="title">Certificate of Achievement</h4>
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p> <p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
<form>
<dl> <dl>
<dt> <dt>
Select your contribution for this course (in USD): Select your contribution for this course:
</dt> </dt>
<dd> <dd>
<ul> <ul>
<li> <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>
<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>
<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>
<li> <li class="other1">
<input type="radio" name="contribution-other" id="contribution"> <label for="contribution-other">Other</label> <input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label>
</li> </li>
<li> <li class="other2">
<label for="contribution-other-amt">Other Amount</label> <input type="text" name="contribution-other" 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> </li>
</ul> </ul>
</dd> </dd>
</dl> </dl>
<p class="tip tip-input expand">
<a href="">Why do I have to pay? What if I don't meet all the requirements?</a> <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> <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><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> <a href="">What is an ID Verified Certificate?</a>
</p> </p>
<p class="btn"> <p class="m-btn-primary green">
<a href="${reverse('verify_student/show_requirements')}">Select Certificate</a> <a href="${reverse('verify_student/show_requirements')}">Register for Certificate</a>
</p> </p>
</div> </div>
...@@ -74,8 +127,8 @@ ...@@ -74,8 +127,8 @@
</div> </div>
<p><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p> <p class="tip"><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">Not the course you wanted? <a href="">Return to our course listings</a>.</p>
</section> </section>
......
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