Skip to content

E
edx-platform
Commit 81a56a35 by Brian Talbot
Options

Verified: revising template UI, styling, and infrastructure

parent 638fb79a
Showing with 98 additions and 41 deletions
common/templates/course_modes/choose.html
......@@ -3,15 +3,16 @@
<%inherit file="../main.html" />
<%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">
<script type="text/javascript">
$(document).ready(function() {
$( ".more" ).hide();
$( ".expand" ).click(function(e) {
$('.is-expandable .expandable-more').addClass('is-hidden');
$('.is-expandable .title-expand').click(function(e) {
e.preventDefault();
$(this).next().slideToggle();
$(this).parent().find('.expandable-more').toggleClass('is-hidden');
});
});
</script>
......@@ -23,9 +24,14 @@ $(document).ready(function() {
<header class="page-header">
<h2 class="title">
<span class="status-track">(ID Verified)</span>
<span class="status">You are registering for</span>
<span class="status-course">${course_id} </span>
<span class="wrapper-sts">
<span class="sts">You are registering for</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>
</header>
......@@ -33,7 +39,7 @@ $(document).ready(function() {
<article class="register-choose content-main">
<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:
<div class="register-choice register-choice-audit">
......@@ -44,7 +50,7 @@ $(document).ready(function() {
</div>
</div>
<ul class="actions">
<ul class="list-actions">
<li class="action action-select">
<input type="submit" name="mode" value="Select Audit" />
</li>
......@@ -69,18 +75,19 @@ $(document).ready(function() {
<div class="field field-certificate-contribution">
<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(","):
<li class="contribution-option">
<li class="field contribution-option">
<input type="radio" name="contribution" value="${price|h}" />
<label for="contribution-${price|h}" />
<span class="deco-denomination">$</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>
</li>
% endfor
<li class="field">
<ul class="field-group field-group-other">
<li class="contribution-option contribution-option-other1">
<input type="radio" id="contribution-other" name="contribution" value=""/>
<label for=" contribution-other"><span class="sr">Other</span></label>
......@@ -93,15 +100,17 @@ $(document).ready(function() {
<div class="wrapper">
<span class="deco-denomination">$</span>
<input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" />
<span class="denomination-name">USD</span>
<span class="denomination-name"><abbr title="United States Dollars"><abbr title="United States Dollars">USD</abbr></span>
</div>
</li>
</ul>
</li>
</ul>
<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">
<dt class="faq-question">Why do I have to pay?</dt>
<dd class="faq-answer">
......@@ -146,12 +155,23 @@ $(document).ready(function() {
</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">
<input type="submit" name="mode" value="Select Certificate" />
</li>
</ul>
</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
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
......@@ -177,7 +197,7 @@ $(document).ready(function() {
</li>
<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">
<p>Please read <a href="">our FAQs to view common questions about our certificates</a>.</p>
</div>
......
lms/static/sass/elements/_controls.scss
......@@ -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
.btn-primary-blue {
@extend .btn-primary;
......
lms/templates/verify_student/show_requirements.html
......@@ -2,6 +2,7 @@
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-requirements</%block>
<%block name="title"><title>${("Register for [Course Name]")}</title></%block>
<%block name="content">
<div class="container">
......@@ -9,9 +10,14 @@
<header class="page-header">
<h2 class="title">
<span class="status-track">(ID Verified)</span>
<span class="status">You are registering for</span>
<span class="status-course">${course_id} </span>
<span class="wrapper-sts">
<span class="sts">You are registering for</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>
</header>
......@@ -19,41 +25,43 @@
<section class="progress">
<h3 class="sr title">Your Progress</h3>
<span class="progress-status">
<span class="progress-status-value"></span>
</span>
<ol class="progress-steps">
<li class="progress-step is-completed" id="progress-step0">
<span class="step-number">0</span>
<li class="progress-step is-current" id="progress-step0">
<span class="wrapper-step-number"><span class="step-number">0</span></span>
<span class="step-name">Intro</span>
</li>
<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>
</li>
<li class="progress-step" id="progress-step2">
<span class="step-number">2</span>
<span class="step-name">Intro</span>
<span class="wrapper-step-number"><span class="step-number">2</span></span>
<span class="step-name">Take ID Photo</span>
</li>
<li class="progress-step" id="progress-step3">
<span class="step-number">3</span>
<span class="step-name">Intro</span>
<span class="wrapper-step-number"><span class="step-number">3</span></span>
<span class="step-name">Review</span>
</li>
<li class="progress-step" id="progress-step4">
<span class="step-number">4</span>
<span class="step-name">Intro</span>
<span class="wrapper-step-number"><span class="step-number">4</span></span>
<span class="step-name">Make Payment</span>
</li>
<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>
</li>
</ol>
<span class="progress-sts">
<span class="progress-sts-value"></span>
</span>
</section>
</div>
......@@ -68,9 +76,10 @@
<ul class="list-reqs">
<li class="req req-1 req-id">
<h4>Identification</h4>
<h4 class="title">Identification</h4>
<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 class="copy">
......@@ -82,7 +91,7 @@
</li>
<li class="req req-2 req-webcam">
<h4>Webcam</h4>
<h4 class="title">Webcam</h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
......@@ -96,7 +105,7 @@
</li>
<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">
<i class="icon-credit-card"></i>
</div>
......@@ -111,11 +120,11 @@
</ul>
<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">
<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>
</ol>
</nav>
......@@ -126,7 +135,7 @@
<aside class="content-supplementary">
<ul class="list-help">
<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">
<p>Please read <a rel="external" href="">our FAQs to view common questions about our certificates</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