Skip to content

E
edx-platform
Commit 81a56a35 by Brian Talbot
Options

Verified: revising template UI, styling, and infrastructure

parent 638fb79a
Showing with 1163 additions and 497 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/static/sass/views/_verification.scss
// lms - views - verification flow
// ====================
// some nasty resets and standard styles
body.register.verification-process {
font-family: 'Open Sans', sans-serif;
// MISC: extends - UI - window
.ui-window {
@include clearfix();
border-radius: ($baseline/10);
box-shadow: 0 1px 2px 1px $shadow-l1;
margin-bottom: $baseline;
border: 1px solid $m-gray-l3;
background: $white;
}
// MISC: extends - UI - well
.ui-well {
box-shadow: inset 0 1px 2px 1px $shadow-l1;
padding: ($baseline*0.75) $baseline;
}
// MISC: custom link
.custom-link {
@extend .ui-fake-link;
}
// MISC: expandable UI
.is-expandable {
.title-expand {
}
.expandable-more {
display: block;
&.is-hidden {
display: none;
}
}
}
.register.verification-process {
// reset: box-sizing (making things so right its scary)
* {
@include box-sizing(border-box);
}
// reset: typography
font-family: $sans-serif;
// reset: typography - heading
h1, h2, h3, h4, h5 ,h6 {
@extend .t-title;
color: $m-gray-d4;
}
// reset: typography - copy
p, ol, ul, dl, input, select, textarea {
font-family: $f-sans-serif;
@extend .t-copy-base;
color: $m-gray-d1;
}
// reset: copy/text
p {
.copy {
p, ul, li, dl, blockquote, input, select {
margin-bottom: ($baseline*0.75);
}
dt {
margin: 0 0 .5em 0;
font-weight: bold;
&:last-child {
margin-bottom: 0;
}
dd {
margin: 0 0 1em 0;
}
dl dl {
margin: ($baseline/4) 0 0 ($baseline/2);
}
// reset: copy/text
// reset: forms
input {
font-style: normal;
......@@ -42,580 +83,1128 @@ body.register.verification-process {
}
label {
@extend .t-weight4;
font-family: $sans-serif;
font-style: normal;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: $m-gray-d4;
}
.faq {
@extend .t-copy-sub2;
label {
font-size: 12px;
font-weight: bold;
}
// HACK: nasty override due to our bad input/button styling
button, input[type="submit"], input[type="button"] {
@include font-size(16);
@extend .t-weight3;
text-transform: none;
text-shadow: none;
letter-spacing: 0;
}
// reset: lists
.list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group {
@extend .ui-no-list;
}
// ====================
// elements: layout
.content-wrapper {
background: none repeat scroll 0 0 #F7F7F7;
background: $m-gray-l4;
padding-bottom: 0;
}
.container {
background-color: #fff;
background-color: $white;
padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5);
}
// elements: common UI
// ====================
// elements: common copy
.title {
@extend .t-title5;
margin-bottom: ($baseline/2);
font-weight: 300;
@extend .t-weight1;
}
.tip {
@extend .t-copy-sub2;
@include transition(color 0.15s ease-in-out 0s);
display: block;
margin-top: ($baseline/4);
color: $lighter-base-font-color;
.copy {
@extend .t-weight1;
}
// ====================
// elements: header
.page-header {
.title {
@include font-size(28);
@include line-height(28);
margin-bottom: $baseline;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
color: #2F73BC;
font-weight: 300;
text-transform: uppercase;
}
}
// elements: page options
.pay-options {
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;
&.other1 {
margin-right: -($baseline/4);
padding-right: ($baseline/4);
min-height: 25px;
}
&.other2 {
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
// elements - controls
.action-primary {
@extend .btn-primary-blue;
border: none;
}
label {
vertical-align: middle;
.action-confirm {
@extend .btn-primary-green;
border: none;
}
input {
vertical-align: middle;
}
}
}
// ====================
// elements: page depth
// elements - controls
.m-btn-primary {
margin-bottom: 0;
padding: 0;
// ====================
a, input {
background: none;
border: none;
box-shadow: none;
color: $very-light-text;
display: block;
padding: ($baseline*.75) $baseline;
text-transform: none;
text-shadow: none;
letter-spacing: 0;
// elements : help
.help {
&:hover {
text-decoration: none;
border: none;
}
}
&.disabled, &[disabled], &.is-disabled {
background-color: #ccc;
box-shadow: none;
pointer-events: none;
.help-item {
&:hover {
background: $action-primary-disabled-bg !important; // needed for IE currently
.title {
@extend .hd-lv4;
margin-bottom: ($baseline/4);
}
.copy {
@extend .copy-detail;
}
// NOTE: need to change this to a semantic class
&.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;
}
}
}
.list-help {
}
// ====================
// UI: page header
.page-header {
width: flex-grid(12,12);
margin: 0 0 $baseline 0;
border-bottom: ($baseline/4) solid $m-gray-l4;
// nav/status: progress
.progress {
@include clearfix;
position: relative;
margin-bottom: $baseline;
border-bottom: 1px solid #ccc;
padding-bottom: $baseline;
.progress-steps {
margin: 0;
padding: 0;
}
.title {
@include clearfix();
width: flex-grid(12,12);
.progress-step {
@extend .t-copy-sub1;
position: relative;
z-index: 200;
.wrapper-sts, .sts-track {
display: inline-block;
width: 15%;
padding: ($baseline/2) 0;
text-align: center;
color: #ccc;
&.current {
color: #008801;
.number {
border: 4px solid #008801;
color: #008801;
vertical-align: middle;
}
.wrapper-sts {
width: flex-grid(9,12);
}
&.done {
color: #777;
.sts-track {
width: flex-grid(3,12);
text-align: right;
.number {
border: 4px solid #777;
color: #777;
.sts-track-label {
@extend .text-sr;
}
.sts-track-value {
@extend .copy-badge;
color: $white;
background: $m-green-l2;
}
}
.number {
height: 2em;
width: 2em;
.sts {
@extend .t-title7;
display: block;
margin: 0 auto ($baseline/2);
border: 4px solid #ddd;
border-radius: 20px;
background-color: #fff;
line-height: 2em;
text-align: center;
color: #ccc;
color: $m-gray;
}
.mini {
height: .5em;
width: .5em;
margin-bottom: 1.5em;
}
.sts-course {
@extend .t-title;
@include font-size(28);
@include line-height(28);
@extend .t-weight4;
display: block;
.progress-line,
.progress-line-done {
position: absolute;
top: 26%;
left: 8%;
height: 2px;
width: 100%;
display: inline-block;
background-color: #ddd;
}
.progress-line-done {
width: 20%;
background-color: #008801;
}
}
.support {
margin-top: ($baseline*2);
}
// ====================
// UI : progress
.wrapper-progress {
position: relative;
margin-bottom: ($baseline*1.5);
}
// ====================
.progress-sts {
@include size(($baseline/4));
@extend .ui-depth1;
position: absolute;
top: 43px;
left: 70px;
display: block;
width: 77%;
margin: 0 auto;
background: $m-gray-l4;
.progress-sts-value {
width: 0%;
height: 100%;
display: block;
background: $m-green-l3;
}
}
// VIEW: select a track
&.step-select-track {
.progress {
width: flex-grid(12,12);
margin: 0 auto;
border-bottom: ($baseline/4) solid $m-gray-l4;
.select {
.progress-steps {
@include clearfix();
.divider {
display: block;
clear: both;
width: 60%;
margin: $baseline $baseline 0 $baseline;
border-top: 2px solid #ddd;
p {
@extend .t-copy-base;
position: relative;
top: -$baseline;
width: 40px;
margin: 0 auto;
padding: 0 $baseline;
background-color: #fff;
color: #aaa;
text-align: center;
}
top: ($baseline/4);
}
.block {
.progress-step {
@extend .ui-depth2;
position: relative;
width: flex-grid(2,12);
float: left;
margin: 0 $baseline ($baseline*1.5) 0;
border-top: 5px solid #32A5D9;
background-color: #eee;
padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5);
width: 60%;
&.block-cert {
border-top: 5px solid #008801;
padding: $baseline $baseline ($baseline*1.5) $baseline;
text-align: center;
.ribbon {
background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0;
position: absolute;
top: -($baseline*1.5);
right: $baseline;
.wrapper-step-number, .step-number, .step-name {
display: block;
width: ($baseline*3);
height: ($baseline*4);
}
}
.wrapper-step-number {
@include size(($baseline*2) ($baseline*2));
margin: 0 auto ($baseline/2) auto;
border-radius: ($baseline*10);
border: ($baseline/5) solid $m-gray-l4;
background: $white;
p, li, dl {
color: $lighter-base-font-color;
.step-number {
@extend .t-title7;
@extend .t-weight4;
@include line-height(0);
margin: 16px auto 0 auto;
color: $m-gray-l1;
}
.wrap-copy {
width: 60%;
display: inline-block;
vertical-align: middle;
}
.title {
@extend .t-title4;
font-weight: bold;
.step-name {
@extend .t-title7;
@extend .t-weight4;
color: $m-gray-l1;
}
.m-btn-primary {
position: absolute;
bottom: ($baseline*1.5);
right: ($baseline*1.5);
// confirmation step w/ icon
&#progress-step5 {
.step-number {
margin-top: ($baseline/2);
}
}
// STATE: is completed
&.is-completed {
border-bottom: ($baseline/5) solid $m-green-l2;
.wrapper-step-number {
border-color: $m-green-l2;
}
hr {
margin: 1em 0 2em 0;
.step-number, .step-name {
color: $m-gray-l3;
}
.more {
margin-top: ($baseline/2);
border-top: 1px solid #ccc;
}
.tips {
float: right;
width: 32%;
// STATE: is current
&.is-current {
border-bottom: ($baseline/5) solid $m-blue-d1;
opacity: 1.0;
p {
@extend .t-copy-sub1;
.wrapper-step-number {
border-color: $m-blue-d1;
}
.step-number, .step-name {
color: $m-gray-d3;
}
}
}
}
// ====================
// UI: slides
.carousel {
// VIEW: requirements
&.step-requirements {
.section-head .title {
@extend .t-title4;
display: inline-block;
margin: ($baseline/4) 0;
// carousel item
.carousel-item {
opacity: 0.0;
}
.reqs {
margin: $baseline $baseline ($baseline*1.5) $baseline;
// STATE: active
.carousel-active {
opacity: 1.0;
}
.req {
height: 13em;
width: 27%;
display: inline-block;
margin-right: 1%;
border: 1px solid #ddd;
padding: $baseline 2%;
text-align: center;
vertical-align: top;
// indiv slides
.wrapper-view {
padding: 0 $baseline !important;
}
[class^="icon-"] {
display: block;
width: 150px;
margin: $baseline auto;
font-size: 75px;
.view {
width: flex-grid(12,12);
&.icon-id {
background: transparent url('../images/icon-id.png') no-repeat center center;
height: 70px;
> .title {
@extend .hd-lv2;
color: $m-blue-d1;
}
.instruction {
@extend .t-copy-lead1;
margin-bottom: $baseline;
}
}
.next-step {
.wrapper-task {
@include clearfix();
width: flex-grid(12,12);
margin: ($baseline*2) 0 $baseline 0;
.wrapper-help {
float: right;
width: flex-grid(6,12);
padding: ($baseline*0.75) $baseline;
.tip {
margin-top: $baseline;
}
.help {
margin-bottom: ($baseline*1.5);
&:last-child {
margin-bottom: 0;
}
hr {
margin: ($baseline*2);
.title {
@extend .hd-lv3;
}
.steps-section {
.section-head {
margin-bottom: ($baseline);
.copy {
@extend .copy-detail;
}
.step {
width: 60%;
margin-left: 3%;
padding: ($baseline) ($baseline*1.5);
.step-title {
@extend .t-title5;
font-weight: bold;
}
// help - general list
.list-help {
.number {
@extend .t-title6;
height: 2em;
width: 2em;
display: inline-block;
margin: 0 ($baseline/2) 0 0;
border: 3px solid #000;
border-radius: 30px;
font-weight: bold;
line-height: 2em;
text-align: center;
color: #000;
}
.help-item {
margin-bottom: ($baseline/4);
border-bottom: 1px solid $m-gray-l4;
padding-bottom: ($baseline/4);
.copy {
@extend .t-copy-base;
margin-left: 65px;
}
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
}
}
// help - faq
.list-faq {
margin-bottom: $baseline;
// ====================
// VIEW: take and review photos
&.step-photos {
// TEMP: for dev placement only
.wrapper-cam,
.wrapper-photo {
height: 375px;
width: 500px;
background-color: #eee;
position: relative;
.faq-question {
@extend .hd-lv3;
border-bottom: 1px solid $m-gray-l4;
padding-bottom: ($baseline/4);
}
p {
position: absolute;
top: 40%;
left: 40%;
color: #ccc;
.faq-answer {
margin-bottom: ($baseline*1.25);
}
}
.block-photo {
@include clearfix();
background-color: $white;
.title {
@extend .t-title4;
}
.wrapper-up,
.wrapper-down {
@include clearfix();
}
.cam {
width: 500px;
.task {
@extend .ui-window;
float: left;
padding-right: $baseline;
width: flex-grid(6,12);
margin-right: flex-gutter();
}
.photo-controls {
background-color: #ddd;
.controls {
padding: ($baseline*0.75) $baseline;
background: $m-gray-l4;
.controls-list {
@include clearfix();
.list-controls {
position: relative;
margin: 0;
padding: ($baseline*.25) ($baseline*.75);
list-style-type: none;
height: 60px;
}
.control {
display: inline-block;
position: absolute;
.action {
@extend .button-primary;
display: block;
background-color: $blue;
color: $white;
border: 3px solid #1A74A0;
border-radius: 40px;
padding: 10px 5px;
text-align: center;
@extend .btn-primary-blue;
padding: ($baseline/2) ($baseline*0.75);
i {
*[class^="icon-"] {
@extend .t-icon4;
padding: ($baseline*.25) ($baseline*.5);
display: block;
}
&:hover {
}
}
// STATE: hidden
&.is-hidden {
visibility: hidden;
}
// STATE: shown
&.is-shown {
visibility: visible;
}
// STATE: approved
&.approved {
&.control-do {
position: relative;
left: 45%;
.action {
@extend .btn-primary-green;
}
}
}
&.control-redo {
// control - redo
.control-redo {
position: absolute;
left: ($baseline/2);
}
&.control-approve {
position: absolute;
right: ($baseline/2);
// control - take/do
.control-do {
left: 45%;
}
&.approved a {
background-color: $green;
// control - approve
.control-approve {
position: absolute;
right: ($baseline/2);
}
}
.msg {
@include clearfix();
margin-top: ($baseline*2);
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.list-actions {
position: relative;
top: -($baseline/2);
float: left;
width: flex-grid(4,12);
text-align: right;
.action-retakephotos a {
@extend .btn-primary-gray;
}
}
}
.msg-followup {
border-top: ($baseline/10) solid $m-gray-t0;
padding-top: $baseline;
}
}
// indiv slides - photo
#wrapper-facephoto {
}
// indiv slides - ID
#wrapper-idphoto {
}
// indiv slides - review
#wrapper-review {
.review-task {
margin-bottom: ($baseline*1.5);
padding: ($baseline*0.75) $baseline;
border-radius: ($baseline/10);
background: $m-gray-l4;
&:last-child {
margin-bottom: 0;
}
> .title {
@extend .hd-lv3;
}
.faq {
width: 45%;
.copy {
@extend .copy-base;
strong {
@extend .t-weight5;
color: $m-gray-d4;
}
}
}
// individual task - photos
.review-task-photos {
.wrapper-photos {
@include clearfix();
width: flex-grid(12,12);
margin: $baseline 0;
.wrapper-photo {
float: left;
padding-right: $baseline;
width: flex-grid(6,12);
margin-right: flex-gutter();
&:last-child {
margin-right: 0;
}
.placeholder-photo {
@extend .ui-window;
padding: ($baseline*0.75) $baseline;
img {
display: block;
width: 100%;
margin: 0 auto;
}
}
}
.help-tips {
.title {
@extend .hd-lv5;
}
.photo-tips {
.copy {
@extend .copy-detail;
}
// help - general list
.list-tips {
.tip {
margin-bottom: ($baseline/4);
border-bottom: 1px solid $m-gray-t0;
padding-bottom: ($baseline/4);
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
}
}
}
}
}
// individual task - name
.review-task-name {
@include clearfix();
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.list-actions {
position: relative;
top: -($baseline);
float: left;
width: flex-grid(4,12);
text-align: right;
.action-editname a {
@extend .btn-primary-gray;
}
}
}
// individual task - contribution
.review-task-contribution {
.list-fields {
@include clearfix();
margin: $baseline 0;
.field {
float: left;
margin-right: ($baseline/2);
padding: ($baseline/2) ($baseline*0.75);
background: $m-gray-t0;
&:last-child {
margin-right: 0;
}
}
.field-group-other {
.contribution-option {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
&:last-child {
margin-right: 0;
}
}
.contribution-option-other1 label, .contribution-option-other2 label {
@extend .text-sr;
}
}
}
}
}
}
// UI: camera states
.cam {
.placeholder-cam {
@include size(500px 375px);
margin: $baseline auto;
background: $m-blue-d1;
}
.controls {
height: ($baseline*4);
}
}
// ====================
// UI: deco - divider
.deco-divider {
position: relative;
display: block;
margin: $baseline 0 ($baseline*2) 0;
border-top: ($baseline/5) solid $m-gray-l4;
.copy {
@extend .t-copy-lead1;
@extend .t-weight4;
position: absolute;
top: -($baseline*1.25);
left: 45%;
padding: ($baseline/2) ($baseline*1.5);
background: white;
text-align: center;
color: $m-gray-l2;
}
}
// ====================
// UI: nav - wizard
.nav-wizard {
@extend .ui-well;
@include clearfix;
width: flex-grid(12,12);
margin: $baseline 0;
border-radius: ($baseline/10);
background: $m-gray-l4;
.help-inline, .wizard-steps {
}
.help-inline {
@extend .t-copy-sub1;
width: 45%;
float: left;
width: flex-grid(6,12);
margin: ($baseline*0.75) flex-gutter() 0 0;
}
.wizard-steps {
float: right;
width: flex-grid(6,12);
text-align: right;
}
// STATE: is ready
&.is-ready {
background: $m-blue-l4;
}
&.is-not-ready {
background: $m-gray-l4;
}
}
// ====================
// UI: forms - payment
.contribution-options {
.contribution-option {
border-radius: ($baseline/5);
.label, label, input {
display: inline-block;
vertical-align: middle;
}
.label, label {
margin-bottom: 0;
}
input {
margin-right: ($baseline/4);
}
.deco-denomination, .label-value, .denomination-name {
display: inline-block;
vertical-align: middle;
}
.deco-denomination {
}
.label-value {
@extend .t-weight4;
}
.denomination-name {
@include font-size(14);
color: $m-gray-l1;
}
// specific fields
#contribution-other-amt {
position: relative;
top: -($baseline/4);
width: ($baseline*3);
padding: ($baseline/4) ($baseline/2);
}
}
}
// ====================
// UI: main content
.wrapper-content-main {
}
.content-main {
width: flex-grid(12,12);
> .title {
@extend .hd-lv2;
color: $m-blue-d1;
}
.instruction {
@extend .t-copy-lead1;
margin-bottom: $baseline;
}
}
// ====================
// UI: supplemental content
.wrapper-content-supplementary {
margin: ($baseline*1.5) 0;
border-top: ($baseline/4) solid $m-gray-l4;
}
.content-supplementary {
width: flex-grid(12,12);
.list-help {
@include clearfix();
.help-item {
width: flex-grid(4,12);
float: left;
margin-right: flex-gutter();
&:last-child {
margin-right: 0
}
}
}
}
// ====================
// VIEW: select a track
&.step-select-track {
.form-register-choose {
@include clearfix();
width: flex-grid(12,12);
margin: $baseline 0;
.deco-divider {
width: flex-grid(8,12);
float: left;
}
}
.register-choice, .help-register {
float: left;
}
.register-choice {
width: flex-grid(8,12);
margin: 0 flex-gutter() $baseline 0;
border-top: ($baseline/4) solid $m-gray-d4;
padding: $baseline ($baseline*1.5);
background: $m-gray-l4;
&:last-child {
margin-bottom: none;
}
.wrapper-copy, .list-actions {
display: inline-block;
vertical-align: middle;
}
.wrapper-copy {
width: flex-grid(8,8);
}
.list-actions {
width: flex-grid(8,8);
text-align: right;
}
.title {
@extend .t-title5;
border-bottom: 1px solid #ddd;
padding-bottom: ($baseline/4);
font-weight: bold;
@extend .t-weight5;
margin-bottom: ($baseline/2);
}
.copy {
@extend .t-copy-base;
}
.next-step {
margin-top: $baseline;
.action-select input {
@extend .t-weight4;
}
}
.tip {
.register-choice-audit {
border-color: $m-blue-d1;
.wrapper-copy {
width: flex-grid(5,8);
}
.list-actions {
width: flex-grid(3,8);
}
.action-select input {
@extend .btn-primary-blue;
}
}
.register-choice-certificate {
border-color: $m-green-l1;
position: relative;
.deco-ribbon {
position: absolute;
top: -($baseline*1.5);
right: $baseline;
display: block;
width: ($baseline*3);
height: ($baseline*4);
background: transparent url('../images/vcert-ribbon-s.png') no-repeat 0 0;
}
.list-actions {
margin-top: $baseline;
border-top: ($baseline/10) solid $m-gray-t1;
padding-top: $baseline;
}
.action-intro, .action-select {
display: inline-block;
vertical-align: middle;
}
.support {
margin-top: ($baseline*2);
.action-intro {
@extend .copy-detail;
width: flex-grid(3,8);
text-align: left;
}
.action-select {
width: flex-grid(5,8);
}
.action-select input {
@extend .btn-primary-green;
}
.action-intro {
}
}
.help-register {
width: flex-grid(4,12);
.title {
@extend .hd-lv4;
@extend .t-weight4;
margin-bottom: ($baseline/2);
}
.copy {
@extend .copy-detail;
}
}
// progress indicator
.progress-sts-value {
width: 0%;
}
.review-photo {
width: 500px;
.wrapper-content-supplementary .content-supplementary .help-item {
width: flex-grid(3,12);
}
// contribution selection
.field-certificate-contribution {
margin: $baseline 0;
.label {
@extend .hd-lv4;
@extend .t-weight4;
margin-bottom: ($baseline/2);
}
}
.contribution-options {
@include clearfix();
margin: $baseline 0;
.field {
float: left;
margin-right: ($baseline/2);
padding: ($baseline/2) ($baseline*0.75);
background: $m-gray-t0;
input {
width: auto;
}
&:last-child {
margin-right: 0;
}
}
#contribution-other-amt {
width: ($baseline*3);
padding: ($baseline/4) ($baseline/2);
}
.field-group-other {
.contribution-option {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
&:last-child {
margin-right: 0;
}
}
.contribution-option-other1 label, .contribution-option-other2 label {
@extend .text-sr;
}
}
}
}
// VIEW: requirements
&.step-requirements {
// progress indicator
.progress-sts-value {
width: 0%;
}
.list-reqs {
@include clearfix();
width: flex-grid(12,12);
.req {
@extend .ui-window;
width: flex-grid(4,12);
min-height: ($baseline*15);
float: left;
margin-right: flex-gutter();
text-align: center;
&:last-child {
margin-right: 0;
}
.title {
@extend .t-title5;
margin-top: $baseline;
@extend .t-weight4;
padding: $baseline;
border-bottom: 1px solid $m-green-l2;
background: $m-green-l4;
}
.placeholder-art {
position: relative;
display: inline-block;
margin: $baseline 0 ($baseline/2) 0;
padding: $baseline;
background: $m-green-l2;
border-radius: ($baseline*10);
*[class^="icon"] {
@extend .t-icon1;
color: $white;
}
.icon-over, .icon-under {
position: relative;
}
.icon-under {
@extend .ui-depth1;
}
.icon-over {
@extend .ui-depth2;
@extend .t-icon5;
position: absolute;
left: 24px;
top: 34px;
background: $m-green-l2;
padding: 3px 5px;
}
}
.copy {
padding: ($baseline/2) $baseline;
}
.copy-super, .copy-sub {
display: block;
}
.copy-super {
@extend .t-copy-base;
margin-bottom: ($baseline/2);
color: $m-green;
}
.copy-sub {
@extend .t-copy-sub2;
}
.actions {
padding: ($baseline/2) $baseline;
}
}
}
}
// VIEW: take and review photos
&.step-photos {
}
// VIEW: take cam photo
&.step-photos-cam {
// progress indicator
.progress-sts-value {
width: 20%;
}
}
// VIEW: take id photo
&.step-photos-id {
// progress indicator
.progress-sts-value {
width: 40%;
}
}
// VIEW: review photos
&.step-review {
.nav-wizard {
.help-inline {
width: flex-grid(4,12);
margin-top: 0
}
.wizard-steps {
float: right;
width: flex-grid(8,12);
#review-facephoto {
margin-right: $baseline;
.wizard-step {
width: flex-grid(4,8);
margin-right: flex-gutter();
display: inline-block;
vertical-align: middle;
&:last-child {
margin-right: 0;
}
}
}
.step-match {
label {
@extend .t-copy-sub1;
}
}
.step-proceed {
}
}
// progress indicator
.progress-sts-value {
width: 60%;
}
}
// VIEW: take and review photos
&.step-confirmation {
// progress indicator
.progress-sts-value {
width: 100%;
}
}
}
lms/templates/verify_student/photo_verification.html
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-photos</%block>
<%block name="title"><title>${("Register for [Course Name] | Verification")}</title></%block>
<%block name="js_extra">
<!-- please move link to js/vendor/responsive-carousel/responsive-carousel.js from main.html to here -->
......@@ -168,9 +168,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>
......@@ -178,41 +183,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>
<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>
<li class="progress-step is-current" id="progress-step1">
<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>
......@@ -220,7 +227,7 @@
<article class="content-main">
<section class="wrapper carousel" data-transition="slide">
<div id="wrapper-view wrapper-facephoto" class="block-photo">
<div id="wrapper-facephoto" class="wrapper-view block-photo">
<div class="facephoto view">
<h3 class="title">Take Your Photo</h3>
<div class="instruction">
......@@ -230,7 +237,7 @@
<div class="wrapper-task">
<div id="facecam" class="task cam">
<div class="placeholder-cam">
<video id="face_video" width="400" height="300" autoplay></video><br/>
<video id="face_video" width="500" height="375" autoplay></video><br/>
<canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
......@@ -258,20 +265,20 @@
</div>
<div class="wrapper-help">
<div class="help-task photo-tips facetips">
<div class="help help-task photo-tips facetips">
<h4 class="title">Tips on taking a successful photo</h4>
<div class="copy">
<ul>
<li>Make sure your face is well-lit</li>
<li>Be sure your entire face is inside the frame</li>
<li>Can we match the photo you took with the one on your ID?</li>
<li>Click the checkmark once you are happy with the photo</li>
<ul class="list-help">
<li class="help-item">Make sure your face is well-lit</li>
<li class="help-item">Be sure your entire face is inside the frame</li>
<li class="help-item">Can we match the photo you took with the one on your ID?</li>
<li class="help-item">Click the checkmark once you are happy with the photo</li>
</ul>
</div>
</div>
<div class="help-faq facefaq">
<div class="help help-faq facefaq">
<h4 class="sr title">Common Questions</h4>
<div class="copy">
......@@ -292,7 +299,7 @@
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next" id="face_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
<a class="next action-primary" id="face_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
</li>
</ol>
</nav>
......@@ -300,7 +307,7 @@
</div> <!-- /view -->
</div> <!-- /wrapper-view -->
<div id="wrapper-view wrapper-idphoto" class="block-photo">
<div id="wrapper-idphoto" class="wrapper-view block-photo">
<div class="idphoto view">
<h3 class="title">Show Us Your ID</h3>
<div class="instruction">
......@@ -310,7 +317,7 @@
<div class="wrapper-task">
<div id="idcam" class="task cam">
<div class="placeholder-cam">
<video id="photo_id_video" width="400" height="300" autoplay></video><br/>
<video id="photo_id_video" width="500" height="375" autoplay></video><br/>
<canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
......@@ -338,7 +345,7 @@
</div>
<div class="wrapper-help">
<div class="help-task photo-tips facetips">
<div class="help help-task photo-tips facetips">
<h4 class="title">Tips on taking a successful photo</h4>
<div class="copy">
......@@ -351,7 +358,7 @@
</div>
</div>
<div class="help-faq facefaq">
<div class="help help-faq facefaq">
<h4 class="sr title">Common Questions</h4>
<div class="copy">
......@@ -372,14 +379,14 @@
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next" id="photo_id_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
<a class="next action-primary" id="photo_id_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
</li>
</ol>
</nav>
</div> <!-- /view -->
</div> <!-- /wrapper-view -->
<div id="wrapper-view wrapper-review">
<div id="wrapper-review" class="wrapper-view">
<div class="review view">
<h3 class="title">Verify Your Submission</h3>
<div class="instruction">
......@@ -388,36 +395,36 @@
<div class="wrapper-task">
<ol class="review-tasks">
<li class="review-task">
<li class="review-task review-task-name">
<h4 class="title">Check Your Name</h4>
<div class="copy">
<p>Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.</p>
</div>
<ul class="actions">
<ul class="list-actions">
<li class="action action-editname">
<a rel="modal" class="edit-name" href="#">Edit my name</a>
</li>
</ul>
</li>
<li class="review-task">
<li class="review-task review-task-photos">
<h4 class="title">Review the Photos You've Taken</h4>
<div class="copy">
<p>Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.</p>
<p>Make sure your full name on your edX account, <strong>[User Name]</strong>, matches your ID. We will also use this as the name on your certificate.</p>
</div>
<ol class="wrapper-photos">
<li class="wrapper-photo">
<div class="placeholder-photo">
<img id="face_image" width="512" height="384" src=""/>
<img id="face_image" src=""/>
</div>
<div class="help-tips">
<h5>The photo above needs to meet the following requirements:</h5>
<ul class="list-tips">
<h5 class="title">The photo above needs to meet the following requirements:</h5>
<ul class="list-help list-tips copy">
<li class="tip">Be well lit</li>
<li class="tip">Show your whole face</li>
<li class="tip">Match your ID</li>
......@@ -427,12 +434,12 @@
<li class="wrapper-photo">
<div class="placeholder-photo">
<img id="photo_id_image" width="512" height="384" src=""/>
<img id="photo_id_image" src=""/>
</div>
<div class="help-tips">
<h5>The photo above needs to meet the following requirements:</h5>
<ul class="list-tips">
<h5 class="title">The photo above needs to meet the following requirements:</h5>
<ul class="list-help list-tips copy">
<li class="tip">Be readable (not too far away, no glare)</li>
<li class="tip">Show your name</li>
<li class="tip">Match the photo of your face and your name above</li>
......@@ -440,40 +447,54 @@
</div>
</li>
</ol>
<div class="msg msg-retake msg-followup">
<div class="copy">
<p>Photos don't meet the requirements?</p>
</div>
<ul class="list-actions">
<li class="action action-retakephotos">
<a class="retake-photos" href="#">Retake Your Photos</a>
</li>
</ul>
</div>
</li>
<li class="review-task">
<li class="review-task review-task-contribution">
<h4 class="title">Check Your Contribution Level</h4>
<div class="copy">
<p>Please confirm your contribution for this course:</p>
</div>
<ul class="contribution-options">
<li class="contribution-option">
<ul class="contribution-options list-fields">
<li class="contribution-option field">
<input type="radio" id="contribution-25" name="contribution">
<label for="contribution-25">
<span class="deco-denomination">$</span>
<span class="label-value">25</span>
<span class="denomination-name">USD</span>
<span class="denomination-name"><abbr title="United States Dollars"><abbr title="United States Dollars">USD</abbr></abbr></span>
</label>
</li>
<li class="contribution-option">
<li class="field contribution-option">
<input type="radio" id="contribution-50" name="contribution">
<label for="contribution-50">
<span class="deco-denomination">$</span>
<span class="label-value">50</span>
<span class="denomination-name">USD</span>
<span class="denomination-name"><abbr title="United States Dollars">USD</abbr></span>
</label>
</li>
<li class="contribution-option">
<li class="field contribution-option">
<input type="radio" id="contribution-100" name="contribution">
<label for="contribution-100">
<span class="deco-denomination">$</span>
<span class="label-value">100</span>
<span class="denomination-name">USD</span>
<span class="denomination-name"><abbr title="United States Dollars">USD</abbr></span>
</label>
</li>
<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">
<label for="contribution-other"><span class="sr">Other</span></label>
......@@ -484,12 +505,14 @@
</label>
<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>
<input type="text" size="5" id="contribution-other-amt" name="contribution-other-amt" id="contribution-other-amt" />
<span class="denomination-name"><abbr title="United States Dollars">USD</abbr></span>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</div>
......@@ -497,19 +520,16 @@
<span class="help help-inline">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</span>
<ol class="wizard-steps">
<li class="wizard-step">
<li class="wizard-step step-match">
<input type="checkbox" name="match" id="confirm_pics_good" />
<label for="confirm_pics_good">Yes! My details all match.</label>
</li>
<li class="wizard-step step-proceed">
<form id="pay_form" method="post" action="${purchase_endpoint}">
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<input type="hidden" name="course_id" value="${course_id | h}" />
<ul class="list-fields">
<li class="field field-match">
<input type="checkbox" name="match" id="confirm_pics_good" />
<label for="match">Yes! My details all match.</label>
</li>
</ul>
<input type="button" id="pay_button" value="Go to Step 4: Secure Payment" name="payment">
<button type="submit" class="action-primary" id="pay_button">Go to Step 4: Secure Payment</button>
<!-- <input class="action-primary" type="button" id="pay_button" value="Go to Step 4: Secure Payment" name="payment"> -->
</form>
</li>
</ol>
......@@ -524,7 +544,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>
......
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