Skip to content

E
edx-platform
Commit 2e821be6 by Frances Botsford
Options

adding some standard sass bits to LMS and bare bones sass for verification

parent 94c442c9
Showing with 259 additions and 37 deletions
lms/static/sass/base/_mixins.scss
// lms - utilities - mixins and extends
// ====================
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
......@@ -44,6 +47,9 @@
}
//-----------------
// Theme Mixin Styles
//-----------------
......
lms/static/sass/elements/_typography.scss 0 → 100644
// lms - elements - typography
// ====================
// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
// headings/titles
.t-title {
font-family: $f-sans-serif;
}
.t-title1 {
@extend .t-title;
@include font-size(60);
@include line-height(60);
}
.t-title2 {
@extend .t-title;
@include font-size(48);
@include line-height(48);
}
.t-title3 {
@include font-size(36);
@include line-height(36);
}
.t-title4 {
@extend .t-title;
@include font-size(24);
@include line-height(24);
}
.t-title5 {
@extend .t-title;
@include font-size(18);
@include line-height(18);
}
.t-title6 {
@extend .t-title;
@include font-size(16);
@include line-height(16);
}
.t-title7 {
@extend .t-title;
@include font-size(14);
@include line-height(14);
}
.t-title8 {
@extend .t-title;
@include font-size(12);
@include line-height(12);
}
.t-title9 {
@extend .t-title;
@include font-size(11);
@include line-height(11);
}
// ====================
// copy
.t-copy {
font-family: $f-sans-serif;
}
.t-copy-base {
@extend .t-copy;
@include font-size(16);
@include line-height(16);
}
.t-copy-lead1 {
@extend .t-copy;
@include font-size(18);
@include line-height(18);
}
.t-copy-lead2 {
@extend .t-copy;
@include font-size(24);
@include line-height(24);
}
.t-copy-sub1 {
@extend .t-copy;
@include font-size(14);
@include line-height(14);
}
.t-copy-sub2 {
@extend .t-copy;
@include font-size(12);
@include line-height(12);
}
// ====================
// actions/labels
.t-action1 {
@include font-size(18);
@include line-height(18);
}
.t-action2 {
@include font-size(16);
@include line-height(16);
}
.t-action3 {
@include font-size(14);
@include line-height(14);
}
.t-action4 {
@include font-size(12);
@include line-height(12);
}
// ====================
// code
.t-code {
font-family: $f-monospace;
}
// ====================
// icons
.t-icon1 {
@include font-size(48);
@include line-height(48);
}
.t-icon2 {
@include font-size(36);
@include line-height(36);
}
.t-icon3 {
@include font-size(24);
@include line-height(24);
}
.t-icon4 {
@include font-size(18);
@include line-height(18);
}
.t-icon5 {
@include font-size(16);
@include line-height(16);
}
.t-icon6 {
@include font-size(14);
@include line-height(14);
}
.t-icon7 {
@include font-size(12);
@include line-height(12);
}
.t-icon8 {
@include font-size(11);
@include line-height(11);
}
.t-icon9 {
@include font-size(10);
@include line-height(10);
}
lms/static/sass/views/_verification.scss 0 → 100644
// lms - views - verification flow
// ====================
body.register.verification {
.page-header {
@extend .t-title3;
.title {
}
}
.progress {
}
.block-photo {
}
}
lms/templates/verify_student/face_upload.html
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification</%block>
<%block name="js_extra">
<script type="text/javascript">
</script>
</%block>
<%block name="content">
<div class="container">
......@@ -12,19 +20,19 @@
<section class="progress">
<h3 class="sr">Your Progress</h3>
<ol>
<li class="progress-step1"><span class="current">Current: </span>Step 1 Take Your Photo</li>
<li class="progress-step2">Step 2 ID Photo</li>
<li class="progress-step3">Step 3 Review</li>
<li class="progress-step4">Step 4 Payment</li>
<li class="progress-step5">Finished Confirmation</li>
<li class="progress-step" id="progress-step1"><span class="current">Current: </span>Step 1 Take Your Photo</li>
<li class="progress-step" id="progress-step2">Step 2 ID Photo</li>
<li class="progress-step" id="progress-step3">Step 3 Review</li>
<li class="progress-step" id="progress-step4">Step 4 Payment</li>
<li class="progress-step" id="progress-step5">Finished Confirmation</li>
</ol>
</section>
<section id="wrapper">
<div id="wrapper-facephoto">
<h3>Take Your Photo</h3>
<div id="wrapper-facephoto block-photo">
<h3 class="title">Take Your Photo</h3>
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
<div id="facecam">
......@@ -97,8 +105,8 @@
<div id="wrapper-idphoto">
<h3>Take Your Photo</h3>
<div id="wrapper-idphoto block-photo">
<h3 class="title">Take Your Photo</h3>
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
<div id="idcam">
......@@ -153,40 +161,14 @@
<div id="wrapper-review">
<h3>Verify Your Submission</h3>
<div id="wrapper-review block-photo">
<h3 class="title">Verify Your Submission</h3>
<p>Make sure we can verify your identity with the photos and information below.</p>
<div class="review-name">
<h3>Check Your Name</h3>
<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><a href="#">Edit my name</a></p>
<section id="edit-name" class="modal">
<header>
<h4>${_("Edit Your Full Name")}</h4>
</header>
<form id="course-checklists" class="course-checklists" method="post" action="">
<div role="alert" class="status message submission-error" tabindex="-1">
<p class="message-title">${_("The following error occured while editing your name:")}
<span class="message-copy"> </span>
</p>
</div>
<p>
<label for="name">${_('Full Name')}</label>
<input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
</p>
<div class="actions">
<button class="action action-primary" type="submit">${_("Save")}</button>
<button class="action action-secondary action-cancel">${_("Cancel")}</button>
</div>
</form>
<a href="#" rel="view" class="action action-close action-editname-close">
<i class="icon-remove-sign"></i>
<span class="label">close</span>
</a>
</section>
</div>
<div id="review-facephoto">
......@@ -248,4 +230,32 @@
<!--<a href="${reverse('verify_student/photo_id_upload')}">Upload Photo ID</a>-->
</div>
<section id="edit-name" class="modal">
<header>
<h4>${_("Edit Your Full Name")}</h4>
</header>
<form id="course-checklists" class="course-checklists" method="post" action="">
<div role="alert" class="status message submission-error" tabindex="-1">
<p class="message-title">${_("The following error occured while editing your name:")}
<span class="message-copy"> </span>
</p>
</div>
<p>
<label for="name">${_('Full Name')}</label>
<input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
</p>
<div class="actions">
<button class="action action-primary" type="submit">${_("Save")}</button>
<button class="action action-secondary action-cancel">${_("Cancel")}</button>
</div>
</form>
<a href="#" rel="view" class="action action-close action-editname-close">
<i class="icon-remove-sign"></i>
<span class="label">close</span>
</a>
</section>
</%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