Skip to content

E
edx-platform
Commit 81a56a35 by Brian Talbot
Options

Verified: revising template UI, styling, and infrastructure

parent 638fb79a
Showing with 112 additions and 55 deletions
common/templates/course_modes/choose.html
...@@ -3,15 +3,16 @@ ...@@ -3,15 +3,16 @@
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-select-track</%block> <%block name="bodyclass">register verification-process step-select-track</%block>
<%block name="title"><title>${("Register for [Course Name] | Choose Your Track")}</title></%block>
<%block name="js_extra"> <%block name="js_extra">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$( ".more" ).hide(); $('.is-expandable .expandable-more').addClass('is-hidden');
$( ".expand" ).click(function(e) { $('.is-expandable .title-expand').click(function(e) {
e.preventDefault(); e.preventDefault();
$(this).next().slideToggle(); $(this).parent().find('.expandable-more').toggleClass('is-hidden');
}); });
}); });
</script> </script>
...@@ -23,9 +24,14 @@ $(document).ready(function() { ...@@ -23,9 +24,14 @@ $(document).ready(function() {
<header class="page-header"> <header class="page-header">
<h2 class="title"> <h2 class="title">
<span class="status-track">(ID Verified)</span> <span class="wrapper-sts">
<span class="status">You are registering for</span> <span class="sts">You are registering for</span>
<span class="status-course">${course_id} </span> <span class="sts-course">${course_id} </span>
</span>
<span class="sts-track">
<span class="sts-track-label">Registering as: </span>
<span class="sts-track-value">ID Verified</span>
</span>
</h2> </h2>
</header> </header>
...@@ -33,7 +39,7 @@ $(document).ready(function() { ...@@ -33,7 +39,7 @@ $(document).ready(function() {
<article class="register-choose content-main"> <article class="register-choose content-main">
<h3 class="title">Select your track:</h3> <h3 class="title">Select your track:</h3>
<form cass="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form"> <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
% if "audit" in modes: % if "audit" in modes:
<div class="register-choice register-choice-audit"> <div class="register-choice register-choice-audit">
...@@ -44,7 +50,7 @@ $(document).ready(function() { ...@@ -44,7 +50,7 @@ $(document).ready(function() {
</div> </div>
</div> </div>
<ul class="actions"> <ul class="list-actions">
<li class="action action-select"> <li class="action action-select">
<input type="submit" name="mode" value="Select Audit" /> <input type="submit" name="mode" value="Select Audit" />
</li> </li>
...@@ -69,39 +75,42 @@ $(document).ready(function() { ...@@ -69,39 +75,42 @@ $(document).ready(function() {
<div class="field field-certificate-contribution"> <div class="field field-certificate-contribution">
<h5 class="label">Select your contribution for this course:</h5> <h5 class="label">Select your contribution for this course:</h5>
<ul class="contribution-options"> <ul class="list-fields contribution-options">
% for price in modes["verified"].suggested_prices.split(","): % for price in modes["verified"].suggested_prices.split(","):
<li class="contribution-option"> <li class="field contribution-option">
<input type="radio" name="contribution" value="${price|h}" /> <input type="radio" name="contribution" value="${price|h}" />
<label for="contribution-${price|h}" /> <label for="contribution-${price|h}" />
<span class="deco-denomination">$</span> <span class="deco-denomination">$</span>
<span class="label-value">${price} ${modes["verified"].currency.upper()}</span> <span class="label-value">${price} ${modes["verified"].currency.upper()}</span>
<span class="denomination-name">USD</span> <span class="denomination-name"><abbr title="United States Dollars"><abbr title="United States Dollars">USD</abbr></span>
</label> </label>
</li> </li>
% endfor % endfor
<li class="field">
<li class="contribution-option contribution-option-other1"> <ul class="field-group field-group-other">
<input type="radio" id="contribution-other" name="contribution" value=""/> <li class="contribution-option contribution-option-other1">
<label for=" contribution-other"><span class="sr">Other</span></label> <input type="radio" id="contribution-other" name="contribution" value=""/>
</li> <label for=" contribution-other"><span class="sr">Other</span></label>
</li>
<li class="contribution-option contribution-option-other2">
<label for="contribution-other-amt"> <li class="contribution-option contribution-option-other2">
<span class="sr">Other Amount</span> <label for="contribution-other-amt">
</label> <span class="sr">Other Amount</span>
<div class="wrapper"> </label>
<span class="deco-denomination">$</span> <div class="wrapper">
<input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" /> <span class="deco-denomination">$</span>
<span class="denomination-name">USD</span> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" />
</div> <span class="denomination-name"><abbr title="United States Dollars"><abbr title="United States Dollars">USD</abbr></span>
</div>
</li>
</ul>
</li> </li>
</ul> </ul>
<div class="help-tip is-expandable"> <div class="help-tip is-expandable">
<h5 class="title">Why do I have to pay? What if I don't meet all the requirements?</h5> <h5 class="title title-expand">Why do I have to pay? What if I don't meet all the requirements?</h5>
<div class="copy more"> <div class="copy expandable-more">
<dl class="list-faq"> <dl class="list-faq">
<dt class="faq-question">Why do I have to pay?</dt> <dt class="faq-question">Why do I have to pay?</dt>
<dd class="faq-answer"> <dd class="faq-answer">
...@@ -128,7 +137,7 @@ $(document).ready(function() { ...@@ -128,7 +137,7 @@ $(document).ready(function() {
</ul> </ul>
</dd> </dd>
<dt class="faq-question">What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt> <dt class="faq-question">What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt>
<dd class="faq-answer"> <dd class="faq-answer">
<p>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> <p>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>
...@@ -146,12 +155,23 @@ $(document).ready(function() { ...@@ -146,12 +155,23 @@ $(document).ready(function() {
</div> </div>
</div> </div>
<ul class="actions"> <ul class="list-actions">
<li class="action action-intro">
<a href="">What is an ID Verified Certificate?</a>
</li>
<li class="action action-select"> <li class="action action-select">
<input type="submit" name="mode" value="Select Certificate" /> <input type="submit" name="mode" value="Select Certificate" />
</li> </li>
</ul> </ul>
</div> </div>
<div class="help help-register">
<h3 class="title">Verified Registration Requirements</h3>
<div class="copy">
<p>To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. <a href="">View requirements</a></p>
</div>
</div>
% endif % endif
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
...@@ -177,7 +197,7 @@ $(document).ready(function() { ...@@ -177,7 +197,7 @@ $(document).ready(function() {
</li> </li>
<li class="help-item"> <li class="help-item">
<h3 class="title"><i class="icon-question-sign"></i> Have questions?</h3> <h3 class="title">Have questions?</h3>
<div class="copy"> <div class="copy">
<p>Please read <a href="">our FAQs to view common questions about our certificates</a>.</p> <p>Please read <a href="">our FAQs to view common questions about our certificates</a>.</p>
</div> </div>
......
lms/static/sass/elements/_controls.scss
...@@ -56,6 +56,34 @@ ...@@ -56,6 +56,34 @@
} }
} }
// blue primary gray
.btn-primary-gray {
@extend .btn-primary;
box-shadow: 0 2px 1px 0 $m-gray-d2;
background: $m-gray;
color: $white;
&:hover, &:active {
background: $m-gray-l1;
color: $white;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-gray-d2;
background: $m-gray;
color: $m-gray-l1;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-gray-d3;
color: $m-gray-d3;
}
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// blue primary button // blue primary button
.btn-primary-blue { .btn-primary-blue {
@extend .btn-primary; @extend .btn-primary;
......
lms/templates/verify_student/show_requirements.html
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-requirements</%block> <%block name="bodyclass">register verification-process step-requirements</%block>
<%block name="title"><title>${("Register for [Course Name]")}</title></%block>
<%block name="content"> <%block name="content">
<div class="container"> <div class="container">
...@@ -9,9 +10,14 @@ ...@@ -9,9 +10,14 @@
<header class="page-header"> <header class="page-header">
<h2 class="title"> <h2 class="title">
<span class="status-track">(ID Verified)</span> <span class="wrapper-sts">
<span class="status">You are registering for</span> <span class="sts">You are registering for</span>
<span class="status-course">${course_id} </span> <span class="sts-course">${course_id}</span>
</span>
<span class="sts-track">
<span class="sts-track-label">Registering as: </span>
<span class="sts-track-value">ID Verified</span>
</span>
</h2> </h2>
</header> </header>
...@@ -19,41 +25,43 @@ ...@@ -19,41 +25,43 @@
<section class="progress"> <section class="progress">
<h3 class="sr title">Your Progress</h3> <h3 class="sr title">Your Progress</h3>
<span class="progress-status">
<span class="progress-status-value"></span>
</span>
<ol class="progress-steps"> <ol class="progress-steps">
<li class="progress-step is-completed" id="progress-step0"> <li class="progress-step is-current" id="progress-step0">
<span class="step-number">0</span> <span class="wrapper-step-number"><span class="step-number">0</span></span>
<span class="step-name">Intro</span> <span class="step-name">Intro</span>
</li> </li>
<li class="progress-step" id="progress-step1"> <li class="progress-step" id="progress-step1">
<span class="step-number">1</span> <span class="wrapper-step-number"><span class="step-number">1</span></span>
<span class="step-name"><span class="sr">Current Step: </span>Take Photo</span> <span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
</li> </li>
<li class="progress-step" id="progress-step2"> <li class="progress-step" id="progress-step2">
<span class="step-number">2</span> <span class="wrapper-step-number"><span class="step-number">2</span></span>
<span class="step-name">Intro</span> <span class="step-name">Take ID Photo</span>
</li> </li>
<li class="progress-step" id="progress-step3"> <li class="progress-step" id="progress-step3">
<span class="step-number">3</span> <span class="wrapper-step-number"><span class="step-number">3</span></span>
<span class="step-name">Intro</span> <span class="step-name">Review</span>
</li> </li>
<li class="progress-step" id="progress-step4"> <li class="progress-step" id="progress-step4">
<span class="step-number">4</span> <span class="wrapper-step-number"><span class="step-number">4</span></span>
<span class="step-name">Intro</span> <span class="step-name">Make Payment</span>
</li> </li>
<li class="progress-step" id="progress-step5"> <li class="progress-step" id="progress-step5">
<span class="step-number">5</span> <span class="wrapper-step-number"><span class="step-number">
<i class="icon-ok"></i>
</span></span>
<span class="step-name">Confirmation</span> <span class="step-name">Confirmation</span>
</li> </li>
</ol> </ol>
<span class="progress-sts">
<span class="progress-sts-value"></span>
</span>
</section> </section>
</div> </div>
...@@ -68,9 +76,10 @@ ...@@ -68,9 +76,10 @@
<ul class="list-reqs"> <ul class="list-reqs">
<li class="req req-1 req-id"> <li class="req req-1 req-id">
<h4>Identification</h4> <h4 class="title">Identification</h4>
<div class="placeholder-art"> <div class="placeholder-art">
<i class="icon-credit-card"></i> <i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div> </div>
<div class="copy"> <div class="copy">
...@@ -82,7 +91,7 @@ ...@@ -82,7 +91,7 @@
</li> </li>
<li class="req req-2 req-webcam"> <li class="req req-2 req-webcam">
<h4>Webcam</h4> <h4 class="title">Webcam</h4>
<div class="placeholder-art"> <div class="placeholder-art">
<i class="icon-facetime-video"></i> <i class="icon-facetime-video"></i>
</div> </div>
...@@ -96,7 +105,7 @@ ...@@ -96,7 +105,7 @@
</li> </li>
<li class="req req-3 req-payment"> <li class="req req-3 req-payment">
<h4>Credit or Debit Card</h4> <h4 class="title">Credit or Debit Card</h4>
<div class="placeholder-art"> <div class="placeholder-art">
<i class="icon-credit-card"></i> <i class="icon-credit-card"></i>
</div> </div>
...@@ -111,11 +120,11 @@ ...@@ -111,11 +120,11 @@
</ul> </ul>
<nav class="nav-wizard"> <nav class="nav-wizard">
<span class="help help-inline">Once you verify your photo looks good, you can move on to step 2.</span> <span class="help help-inline">Missing something? You can always <a href="">audit this course instead</a></span>
<ol class="wizard-steps"> <ol class="wizard-steps">
<li class="wizard-step"> <li class="wizard-step">
<a class="next" id="face_next_button" href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a> <a class="next action-primary" id="face_next_button" href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a>
</li> </li>
</ol> </ol>
</nav> </nav>
...@@ -126,7 +135,7 @@ ...@@ -126,7 +135,7 @@
<aside class="content-supplementary"> <aside class="content-supplementary">
<ul class="list-help"> <ul class="list-help">
<li class="help-item"> <li class="help-item">
<h3 class="title"><i class="icon-question-sign"></i> Have questions?</h3> <h3 class="title">Have questions?</h3>
<div class="copy"> <div class="copy">
<p>Please read <a rel="external" href="">our FAQs to view common questions about our certificates</a>.</p> <p>Please read <a rel="external" href="">our FAQs to view common questions about our certificates</a>.</p>
</div> </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