Skip to content

E
edx-platform
Commit 5202bdf8 by David Ormsbee
Options

Merge branch 'ormsbee/verify2' into ormsbee/verifyuser3 

Conflicts:
	common/templates/course_modes/choose.html
	lms/templates/verify_student/photo_verification.html
parents a8d7b997 81a56a35
Showing with 585 additions and 57 deletions
lms/static/sass/application.scss.mako
......@@ -44,6 +44,7 @@
// base - elements
@import 'elements/typography';
@import 'elements/controls';
// base - specific views
@import 'views/verification';
......
lms/static/sass/base/_mixins.scss
......@@ -41,24 +41,38 @@
@return #{$pxval / $base}em;
}
// Line-height
// line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
// ====================
//-----------------
// Theme Mixin Styles
//-----------------
// theme mixin styles
@mixin login_register_h1_style {}
@mixin footer_references_style {}
// ====================
// extends - UI - visual link
.ui-fake-link {
cursor: pointer;
}
// extends - UI - functional disable
.ui-disabled {
pointer-events: none;
outline: none;
}
// extends - UI - depth levels
.ui-depth0 { z-index: 0; }
.ui-depth1 { z-index: 10; }
.ui-depth2 { z-index: 100; }
.ui-depth3 { z-index: 1000; }
.ui-depth4 { z-index: 10000; }
.ui-depth5 { z-index: 100000; }
// extends -hidden elems - screenreaders
.text-sr {
border: 0;
......@@ -70,3 +84,39 @@
position: absolute;
width: 1px;
}
// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
.ui-no-list {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
li, dt, dd {
margin: 0;
padding: 0;
}
}
// extends - text - image-replacement hidden text
.text-hide {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
// extends - text - wrapping
.text-wrap {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
// extends - text - text overflow by ellipsis
.text-truncated {
@include box-sizing(border-box);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
lms/static/sass/base/_variables.scss
......@@ -15,7 +15,7 @@ $fg-min-width: 810px;
// ====================
// FONTS
$sans-serif: 'Open Sans', $verdana;
$sans-serif: 'Open Sans', $verdana, sans-serif;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif;
$serif: $georgia;
......@@ -35,7 +35,17 @@ $very-light-text: #fff;
// COLORS: misc.
$white: rgb(255,255,255);
$white-t0: rgba($white, 0.125);
$white-t1: rgba($white, 0.25);
$white-t2: rgba($white, 0.5);
$white-t3: rgba($white, 0.75);
$black: rgb(0,0,0);
$black-t0: rgba($black, 0.125);
$black-t1: rgba($black, 0.25);
$black-t2: rgba($black, 0.5);
$black-t3: rgba($black, 0.75);
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
......@@ -47,6 +57,7 @@ $dark-gray: rgb(51, 51, 51);
$border-color: rgb(200, 200, 200);
$sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170);
$green: rgb(37, 184, 90);
// COLORS: old variables
......@@ -63,11 +74,17 @@ $m-gray-d1: #7D7F83;
$m-gray-d2: #707276;
$m-gray-d3: #646668;
$m-gray-d4: #050505;
$m-gray-t0: rgba($m-gray,0.125);
$m-gray-t1: rgba($m-gray,0.25);
$m-gray-t2: rgba($m-gray,0.50);
$m-gray-t3: rgba($m-gray,0.75);
$m-blue: #1AA1DE;
$m-blue-l1: #2BACE6;
$m-blue-l2: #42B5E9;
$m-blue-l3: #59BEEC;
$m-blue-l4: tint($m-blue,90%);
$m-blue-l5: tint($m-blue,95%);
$m-blue-d1: #1790C7;
$m-blue-d2: #1580B0;
$m-blue-d3: #126F9A;
......@@ -81,6 +98,30 @@ $m-pink-d1: #A0255B;
$m-pink-d2: #8C204F;
$m-pink-d3: #771C44;
$m-green: rgb(0, 136, 1);
$m-green-s1: rgb(96, 188, 97);
$m-green-l1: tint($m-green,20%);
$m-green-l2: tint($m-green,40%);
$m-green-l3: tint($m-green,60%);
$m-green-l4: tint($m-green,90%);
$m-green-l5: tint($m-green,95%);
$m-green-d1: shade($m-green,20%);
$m-green-d2: shade($m-green,40%);
$m-green-d3: shade($m-green,60%);
$m-green-d4: shade($m-green,90%);
$m-green-t0: rgba($m-green,0.125);
$m-green-t1: rgba($m-green,0.25);
$m-green-t2: rgba($m-green,0.50);
$m-green-t3: rgba($m-green,0.75);
// ====================
// shadows
$shadow: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4);
// ====================
$m-base-font-size: em(15);
......
lms/static/sass/elements/_controls.scss 0 → 100644
// lms - elements - controls
// ====================
.btn {
@include box-sizing(border-box);
@include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
display: inline-block;
cursor: pointer;
text-decoration: none;
&:hover, &:active {
text-decoration: none;
}
&.disabled, &[disabled] {
cursor: default;
pointer-events: none;
}
}
.btn-pill {
border-radius: $baseline/5;
}
.btn-rounded {
border-radius: ($baseline/2);
}
.btn-edged {
border-radius: ($baseline/10);
}
// primary button
.btn-primary {
@extend .t-weight3;
@extend .btn;
@extend .btn-edged;
border: none;
padding: ($baseline*0.75) $baseline;
text-align: center;
&:hover, &:active {
}
&.current, &.active {
&:hover, &:active {
}
}
&.disabled, &.is-disabled, &[disabled] {
background: $m-gray-l2;
color: $white-t3;
}
}
// 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;
box-shadow: 0 2px 1px 0 $m-blue-d4;
background: $m-blue-d3;
color: $white;
&:hover, &:active {
background: $m-blue-d1;
color: $white;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-blue-d2;
background: $m-blue;
color: $m-blue-d2;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-blue-d3;
color: $m-blue-d3;
}
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// pink primary button
.btn-primary-pink {
@extend .btn-primary;
box-shadow: 0 2px 1px 0 $m-pink-d2;
background: $m-pink;
color: $white;
&:hover, &:active {
background: $m-pink-l3;
color: $white;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-pink-d1;
background: $m-pink-l2;
color: $m-pink-d1;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-pink-d2;
color: $m-pink-d3;
}
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// green primary button
.btn-primary-green {
@extend .btn-primary;
box-shadow: 0 2px 1px 0 $m-green-d2;
background: $m-green-d1;
color: $white;
&:hover, &:active {
background: $m-green-s1;
color: $white;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $m-green;
background: $m-green-l2;
color: $m-green;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $m-green-d1;
color: $m-green-d1;
}
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// ====================
// application: canned actions
.btn {
font-family: $f-sans-serif;
}
.btn-large {
@extend .t-action1;
@extend .t-weight3;
display: block;
padding:($baseline*0.75) ($baseline*1.5);
}
.btn-avg {
@extend .t-action2;
@extend .t-weight3;
}
.btn-blue {
@extend .btn-primary-blue;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
.btn-pink {
@extend .btn-primary-pink;
margin-bottom: $baseline;
&:last-child {
margin-bottom: none;
}
}
lms/static/sass/elements/_typography.scss
......@@ -171,3 +171,147 @@
.t-icon-solo {
@include line-height(0);
}
// ====================
// typography weights
.t-weight1 {
font-weight: 300;
}
.t-weight2 {
font-weight: 400;
}
.t-weight3 {
font-weight: 500;
}
.t-weight4 {
font-weight: 600;
}
.t-weight5 {
font-weight: 700;
}
// ====================
// application: canned headings
.hd-lv1 {
@extend .t-title1;
@extend .t-weight1;
color: $m-gray-d4;
margin: 0 0 ($baseline*2) 0;
}
.hd-lv1-alt {
@extend .t-title2;
@extend .t-weight1;
color: $m-gray-d4;
margin: 0 0 ($baseline*2) 0;
}
.hd-lv2 {
@extend .t-title4;
@extend .t-weight1;
margin: 0 0 ($baseline*0.75) 0;
border-bottom: 1px solid $m-gray-l3;
padding-bottom: ($baseline/2);
color: $m-gray-d4;
}
.hd-lv2-alt {
@extend .t-title4;
@extend .t-weight1;
margin: 0 0 ($baseline*0.75) 0;
border-bottom: 1px solid $m-gray-t1;
padding-bottom: ($baseline/2);
color: $m-blue-d1;
text-transform: uppercase;
}
.hd-lv3 {
@extend .t-title6;
@extend .t-weight4;
margin: 0 0 ($baseline/4) 0;
color: $m-gray-d4;
}
.hd-lv3-alt {
@extend .t-title6;
@extend .t-weight3;
margin: 0 0 ($baseline/4) 0;
color: $m-gray-d4;
}
.hd-lv4 {
@extend .t-title6;
@extend .t-weight2;
margin: 0 0 $baseline 0;
color: $m-gray-d4;
}
.hd-lv4-alt {
@extend .t-title6;
@extend .t-weight4;
margin: 0 0 ($baseline) 0;
color: $m-gray-d4;
text-transform: uppercase;
}
.hd-lv5 {
@extend .t-title7;
@extend .t-weight4;
margin: 0 0 ($baseline/4) 0;
color: $m-gray-d4;
}
// application: canned copy
.copy-base {
@extend .t-copy-base;
color: $m-gray-d2;
}
.copy-lead1 {
@extend .t-copy-lead2;
color: $m-gray;
}
.copy-detail {
@extend .t-copy-sub1;
@extend .t-weight3;
color: $m-gray-d1;
}
.copy-metadata {
@extend .t-copy-sub2;
color: $m-gray-d1;
.copy-metadata-value {
@extend .t-weight2;
}
.copy-metadata-value {
@extend .t-weight4;
}
}
// application: canned links
.copy-link {
border-bottom: 1px dotted transparent;
&:hover, &:active {
border-color: $m-blue-d2;
}
}
.copy-badge {
@extend .t-title8;
@extend .t-weight5;
border-radius: ($baseline/5);
padding: ($baseline/2) $baseline;
text-transform: uppercase;
}
lms/templates/verify_student/show_requirements.html
......@@ -2,70 +2,154 @@
<%! 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">
<section class="wrapper">
<header class="page-header header-white">
<h2 class="title header-white-title">You are registering for ${course_id} (ID Verified)</h2>
<header class="page-header">
<h2 class="title">
<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>
<div class="wrapper-progress">
<section class="progress">
<h3 class="sr title">Your Progress</h3>
<section class="progress">
<header class="section-head">
<h3 class="sr">Your Progress</h3>
</header>
<!--<span class="progress-line"></span><span class="progress-line-done"></span>-->
<ol>
<li class="progress-step current" id="progress-step0"><span class="sr">Current Step: </span> <span class="mini number"></span> Intro</li>
<li class="progress-step" id="progress-step1"><span class="number">1</span> Take Photo</li>
<li class="progress-step" id="progress-step2"> <span class="number">2</span> Take ID Photo</li>
<li class="progress-step" id="progress-step3"> <span class="number">3</span> Confirm Submission</li>
<li class="progress-step" id="progress-step4"> <span class="number">4</span> Make Payment</li>
<li class="progress-step" id="progress-step5"><span class="number"><i class="icon-ok"></i></span> Confirmation</li>
</ol>
</section>
<section class="reqs-section">
<header class="section-head">
<ol class="progress-steps">
<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="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="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="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="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="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>
<div class="wrapper-content-main">
<article class="content-main">
<h3 class="title">What You Will Need to Register</h3>
</header>
<p>There are a few things you will need to register as an ID verified student:</p>
<div class="reqs">
<div class="req1 req">
<h4>Identification</h4>
<div class="art"><i class="icon-id"></i></div>
<p>A photo identification document <span class="tip">a drivers license, passport, student ID, or other ID with your name and picture on it</span></p>
</div>
<div class="req2 req">
<h4>Webcam</h4>
<i class="icon-facetime-video"></i>
<p>A webcam and a modern browser <span class="tip">Firefox, Chrome, or Opera</span></p>
<div class="instruction">
<p>There are a few things you will need to register as an ID verified student:</p>
</div>
<div class="req3 req">
<h4>Credit or Debit Card</h4>
<i class="icon-credit-card"></i>
<p>A major credit or debit card <span class="tip">Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club</span></p>
</div>
</div>
<ul class="list-reqs">
<li class="req req-1 req-id">
<h4 class="title">Identification</h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a></p>
<p class="tip">Change your mind? <a href="">You can always Audit.</a></p>
</div>
</section>
<div class="copy">
<p>
<span class="copy-super">A photo identification document</span>
<span class="copy-sub">a drivers license, passport, student ID, or other ID with your name and picture on it</span>
</p>
</div>
</li>
<li class="req req-2 req-webcam">
<h4 class="title">Webcam</h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<section class="support">
<p class="tip">Missing something? <a href="">You can always Audit the course</a>.</p>
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
</section>
<div class="copy">
<p>
<span class="copy-super">A webcam and a modern browser</span>
<span class="copy-sub">Firefox, Chrome, or Opera</span>
</p>
</div>
</li>
</section>
<li class="req req-3 req-payment">
<h4 class="title">Credit or Debit Card</h4>
<div class="placeholder-art">
<i class="icon-credit-card"></i>
</div>
<div class="copy">
<p>
<span class="copy-super">A major credit or debit card</span>
<span class="copy-sub">Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club</span>
</p>
</div>
</li>
</ul>
<nav class="nav-wizard">
<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 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>
</article>
</div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<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>
</li>
<li class="help-item">
<h3 class="title">Change your mind?</h3>
<div class="copy">
<p>You can always <a href="">Audit the course for free</a> without verifying.</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section>
</div>
</%block>
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