From 2e821be65fa5f00d237ef6eb36bc5061fccee533 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Tue, 20 Aug 2013 16:04:48 -0400 Subject: [PATCH] adding some standard sass bits to LMS and bare bones sass for verification --- lms/static/sass/base/_mixins.scss | 6 + lms/static/sass/elements/_typography.scss | 178 ++++++++++++++++++ lms/static/sass/views/_verification.scss | 28 +++ lms/templates/verify_student/face_upload.html | 84 +++++---- 4 files changed, 259 insertions(+), 37 deletions(-) create mode 100644 lms/static/sass/elements/_typography.scss create mode 100644 lms/static/sass/views/_verification.scss diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index e2074f1976..8ee4559e36 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -1,3 +1,6 @@ +// lms - utilities - mixins and extends +// ==================== + // mixins - font sizing @mixin font-size($sizeValue: 16){ font-size: $sizeValue + px; @@ -44,6 +47,9 @@ } + + + //----------------- // Theme Mixin Styles //----------------- diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss new file mode 100644 index 0000000000..157d3d60df --- /dev/null +++ b/lms/static/sass/elements/_typography.scss @@ -0,0 +1,178 @@ +// 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); +} diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss new file mode 100644 index 0000000000..e65901ab50 --- /dev/null +++ b/lms/static/sass/views/_verification.scss @@ -0,0 +1,28 @@ +// lms - views - verification flow +// ==================== + +body.register.verification { + + .page-header { + @extend .t-title3; + + + + .title { + + } + } + + .progress { + + } + + .block-photo { + + + } + + + + +} diff --git a/lms/templates/verify_student/face_upload.html b/lms/templates/verify_student/face_upload.html index 662934c20d..5f2c7959bc 100644 --- a/lms/templates/verify_student/face_upload.html +++ b/lms/templates/verify_student/face_upload.html @@ -1,6 +1,14 @@ <%! from django.utils.translation import ugettext as _ %> <%! from django.core.urlresolvers import reverse %> <%inherit file="../main.html" /> +<%block name="bodyclass">register verification + +<%block name="js_extra"> + + + <%block name="content">
@@ -12,19 +20,19 @@

Your Progress

    -
  1. Current: Step 1 Take Your Photo
    2. -
  2. Step 2 ID Photo
    3. -
  3. Step 3 Review
    4. -
  4. Step 4 Payment
    5. -
  5. Finished Confirmation
    6. +
  6. Current: Step 1 Take Your Photo
    7. +
  7. Step 2 ID Photo
    8. +
  8. Step 3 Review
    9. +
  9. Step 4 Payment
    10. +
  10. Finished Confirmation
-
-

Take Your Photo

+
+

Take Your Photo

Use your webcam to take a picture of your face so we can match it with the picture on your ID.

@@ -97,8 +105,8 @@ -
-

Take Your Photo

+
+

Take Your Photo

Use your webcam to take a picture of your face so we can match it with the picture on your ID.

@@ -153,40 +161,14 @@ -
-

Verify Your Submission

+
+

Verify Your Submission

Make sure we can verify your identity with the photos and information below.

Check Your Name

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.

Edit my name

- -
@@ -248,4 +230,32 @@
+ + + +