From e5cede572aaadc95a5ec893d3ce6c14cbd8310b1 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Mon, 26 Aug 2013 18:36:56 -0400 Subject: [PATCH 1/3] fixing up some styling on vcerts --- common/templates/course_modes/choose.html | 14 +- lms/static/sass/base/_mixins.scss | 4 +- lms/static/sass/views/_verification.scss | 171 ++++++++++++++++-- .../verify_student/photo_verification.html | 18 +- .../verify_student/show_requirements.html | 109 +++++------ 5 files changed, 214 insertions(+), 102 deletions(-) diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html index 679a32ae9c..ad46dab2c5 100644 --- a/common/templates/course_modes/choose.html +++ b/common/templates/course_modes/choose.html @@ -54,7 +54,6 @@

Sign up as a verified student and work toward a Certificate of Achievement.

-
Select your contribution for this course: @@ -78,7 +77,7 @@
-

+

Why do I have to pay? What if I don't meet all the requirements?

@@ -87,6 +86,10 @@
Why do I have to pay?
Your payment helps cover the costs of verification. As a non-profit, edX keeps these costs as low as possible, Your payment will also help edX with our mission to provide quality education to anyone.
+
I'd like to pay more than the minimum. Is my contribution tax deductible?
+
Please check with your tax advisor to determine whether your contribution is tax deductible.
+ + % if "honor" in modes:
What if I can't afford it?
If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course. @@ -102,13 +105,10 @@
% endif -
I'd like to pay more than the minimum. Is my contribution tax deductible?
-
Please check with your tax advisor to determine whether your contribution is tax deductible.
- % if "honor" in modes:
What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?
If you don't have a webcam, credit or debit card or acceptable ID, you can opt to simply audit this course, or select to work towards a free Honor Code Certificate of Achievement for this course by checking the box below. Then click the Select Certificate button to complete registration. We won't ask you to verify your identity. -

+

% endif @@ -125,7 +125,7 @@

- To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. View requirements + To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. View requirements

% endif diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index 8ee4559e36..3dd7cb42a2 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -4,13 +4,13 @@ // mixins - font sizing @mixin font-size($sizeValue: 16){ font-size: $sizeValue + px; - font-size: ($sizeValue/10) + rem; + // font-size: ($sizeValue/10) + rem; } // mixins - line height @mixin line-height($fontSize: auto){ line-height: ($fontSize*1.48) + px; - line-height: (($fontSize/10)*1.48) + rem; + // line-height: (($fontSize/10)*1.48) + rem; } // image-replacement hidden text diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index fdb2fe36bf..01c37f5892 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -16,17 +16,19 @@ body.register.verification { input { font-style: normal; font-weight: 400; + margin-right: ($baseline/5); } - label { font-style: normal; font-family: 'Open Sans', sans-serif; font-weight: 400; } + + .faq { - font-size: 12px; + @extend .t-copy-sub2; label { font-size: 12px; @@ -60,17 +62,18 @@ body.register.verification { } .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; - font-size: em(13); } .page-header { .title { - @include font-size(18); + @include font-size(28); + @include line-height(28); margin-bottom: $baseline; border-bottom: 1px solid #ccc; padding-bottom: 20px; @@ -81,9 +84,9 @@ body.register.verification { } .title { - @extend .t-title9; + @extend .t-title5; margin-bottom: ($baseline/2); - font-weight: bold; + font-weight: 300; } @@ -124,10 +127,16 @@ body.register.verification { margin-bottom: 0; padding: 0; - a { + 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; &:hover { text-decoration: none; @@ -159,24 +168,39 @@ body.register.verification { } - .progress, - .steps { + .progress { @include clearfix; + position: relative; margin-bottom: $baseline; + border-bottom: 1px solid #ccc; + padding-bottom: $baseline; ol { margin: 0; padding: 0; } + .progress-step { + @extend .t-copy-sub1; + position: relative; + z-index: 200; display: inline-block; width: 15%; - padding: ($baseline/2) $baseline; + padding: ($baseline/2) 0; text-align: center; - font-size: 12px; color: #ccc; &.current { + color: #000; + + .number { + border: 4px solid #000; + color: #000; + } + } + + + &.done { color: #008801; .number { @@ -186,6 +210,8 @@ body.register.verification { } } + + .number { height: 2em; width: 2em; @@ -193,11 +219,38 @@ body.register.verification { margin: 0 auto ($baseline/2); border: 4px solid #ddd; border-radius: 20px; + background-color: #fff; line-height: 2em; text-align: center; color: #ccc; } + .mini { + height: .5em; + width: .5em; + margin-bottom: 1.5em; + } + + .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); } @@ -219,13 +272,13 @@ body.register.verification { 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; - font-size: 24px; color: #aaa; text-align: center; } @@ -267,7 +320,8 @@ body.register.verification { } .title { - @extend .t-title7; + @extend .t-title4; + font-weight: bold; } .m-btn-primary { @@ -293,7 +347,7 @@ body.register.verification { width: 32%; p { - font-size: 14px; + @extend .t-copy-sub1; } } } @@ -301,16 +355,89 @@ body.register.verification { // requirements page &.requirements { - .req { - width: 30%; + + .section-head .title { + @extend .t-title4; display: inline-block; - margin-right: $baseline; + margin: ($baseline/4) 0; + } + + .reqs { + margin: $baseline; + } + + .req { + width: 27%; + display: inline-block; + margin-right: 1%; + border: 1px solid #ddd; + padding: $baseline 2%; text-align: center; vertical-align: top; + + // for placement only + .placeholder-art { + height: 150px; + width: 150px; + margin: $baseline auto; + background-color: #eee; + + i { + font-size: 24px; + } + } + } .next-step { float: right; + + .tip { + margin-top: $baseline; + } + + } + + hr { + margin: ($baseline*2); + } + + .steps-section { + + .section-head { + margin-bottom: ($baseline); + } + + .step { + width: 60%; + margin-left: 3%; + padding: ($baseline) ($baseline*1.5); + + .step-title { + @extend .t-title5; + font-weight: bold; + } + + .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; + } + + .copy { + @extend .t-copy-base; + margin-left: 65px; + } + } + } } @@ -369,9 +496,13 @@ body.register.verification { display: block; background-color: $blue; color: $white; - padding: ($baseline*.25) ($baseline*.5); border: none; + i { + padding: ($baseline*.25) ($baseline*.5); + display: block; + } + &:hover { } @@ -439,6 +570,10 @@ body.register.verification { .next-step { width: 45%; float: right; + + .tip { + margin-top: $baseline; + } } .support { diff --git a/lms/templates/verify_student/photo_verification.html b/lms/templates/verify_student/photo_verification.html index 8346b05917..b78d539c67 100644 --- a/lms/templates/verify_student/photo_verification.html +++ b/lms/templates/verify_student/photo_verification.html @@ -171,19 +171,23 @@

You are registering for ${course_name} (ID Verified)

+
-

Your Progress

+
+

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. Intro
    7. +
  7. Current Step: 1 Take Photo
    8. +
  8. 2 Take ID Photo
    9. +
  9. 3 Confirm Submission
    10. +
  10. 4 Make Payment
    11. +
  11. Confirmation
-

Take Your Photo

diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html index 9e4780be0f..7fc14730b6 100644 --- a/lms/templates/verify_student/show_requirements.html +++ b/lms/templates/verify_student/show_requirements.html @@ -7,89 +7,62 @@
-
-

You are registering for ${course_id} (ID Verified)

-
+
+

You are registering for ${course_id} (ID Verified)

+
-
-

Your Progress

-
    -
  1. Current Step: 1 Take Photo
    2. -
  2. 2 Take ID Photo
    3. -
  3. 3 Confirm Submission
    4. -
  4. 4 Make Payment
    5. -
  5. Finished Confirmation
    6. -
-
-
-

What You Will Need to Register

+
+
+

Your Progress

+
+ +
    +
  1. Current Step: Intro
    2. +
  2. 1 Take Photo
    3. +
  3. 2 Take ID Photo
    4. +
  4. 3 Confirm Submission
    5. +
  5. 4 Make Payment
    6. +
  6. Confirmation
    7. +
+
-

There are a few things you will need to register as an ID verified student :

-
-
-

Identification

-

A photo identification document like a drivers license, passport, or student ID.

-
+
+
+

What You Will Need to Register

+
-
-

Webcam

-

A webcam that connects to your computer and a modern browser.

-
+

There are a few things you will need to register as an ID verified student:

+
+
+

Identification

+
+

A photo identification document a drivers license, passport, student ID, or other ID with your name and picture on it

+
+ +
+

Webcam

+
+

A webcam and a modern browser Firefox, Chrome, or Opera

+
-

Credit or Debit Card

-

A major credit or debit card.

+

Credit or Debit Card

+
+

A major credit or debit card Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club

+
-
- -

Missing something? You can always Audit the course.

-
- -
- -
-

Steps to get Verified

- -
-

Go to Step 1: Take my Photo

-
- -

1 Take Your Photo

-

To verify your identity, we need a clear and well-lit photo of your face to match it with your ID.

- -

2Take a photo of your ID

-

To verify your identity, we need a clear and well-lit photo of your ID to match it with your face.

- -

3 Verify your submissions

-

Review your photos to verify they are correct.

- -

4 Submit payment

-

Pay for your course using a major credit of debit cards.

-
    -
  • Cards accepted:
    • -
  • Visa
    • -
  • Master Card
    • -
  • Maestro
    • -
  • Amex
    • -
  • Discover
    • -
  • JCB (provided it has the Discover logo on the card)
    • -
  • Diners Club
    • -
  • ...need to list several more once firm
    • -
- -

You're Ready to Start Learning

- -

You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.

Go to Step 1: Take my Photo

+

Change your mind? You can always Audit.

+
+

Missing something? You can always Audit the course.

More questions? Check out our FAQs.

-

Change your mind? You can always Audit the course for free without verifying.

From af8339c72d03f133d936ae7e6f4473653af97b01 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 26 Aug 2013 19:25:52 -0400 Subject: [PATCH 2/3] Verification: revised Sass organization - WIP --- lms/static/sass/base/_variables.scss | 75 ++++++----- lms/static/sass/elements/_typography.scss | 13 +- lms/static/sass/views/_verification.scss | 151 ++++++++++++---------- 3 files changed, 133 insertions(+), 106 deletions(-) diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 2028b95efb..62a6320c11 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -1,20 +1,28 @@ +// base $baseline: 20px; +// ==================== + +// LAYOUT: grid $gw-column: 80px; $gw-gutter: 20px; - $fg-column: $gw-column; $fg-gutter: $gw-gutter; $fg-max-columns: 12; $fg-max-width: 1400px; $fg-min-width: 810px; -// fonts +// ==================== + +// FONTS $sans-serif: 'Open Sans', $verdana; $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $body-font-family: $sans-serif; $serif: $georgia; +// ==================== + +// MISC: base fonts/colors $body-font-size: em(14); $body-line-height: golden-ratio(.875em, 1); $base-font-color: rgb(60,60,60); @@ -23,6 +31,9 @@ $base-font-color: rgb(60,60,60); $lighter-base-font-color: rgb(100,100,100); $very-light-text: #fff; +// ==================== + +// COLORS: misc. $white: rgb(255,255,255); $black: rgb(0,0,0); $blue: rgb(29,157,217); @@ -38,11 +49,11 @@ $sidebar-color: rgb(246, 246, 246); $outer-border-color: rgb(170, 170, 170); $green: rgb(37, 184, 90); -// old variables +// COLORS: old variables $light-gray: #ddd; $dark-gray: #333; -// edx.org marketing site variables +// COLORS: edx.org marketing site variables $m-gray: #8A8C8F; $m-gray-l1: #97999B; $m-gray-l2: #A4A6A8; @@ -70,6 +81,8 @@ $m-pink-d1: #A0255B; $m-pink-d2: #8C204F; $m-pink-d3: #771C44; +// ==================== + $m-base-font-size: em(15); $base-font-color: rgb(60,60,60); @@ -90,57 +103,56 @@ $courseware-footer-border: none; $courseware-footer-shadow: none; $courseware-footer-margin: 0px; +// ==================== -// actions +// ACTIONS: general $button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%); $button-bg-color: transparent; $button-bg-hover-color: #fff; -// actions - primary +// ACTIONS: primary $action-primary-bg: $m-blue-d3; $action-primary-fg: $white; $action-primary-shadow: $m-blue-d4; -// focused - hover/active pseudo states +// ACTIONS: primary - focused - hover/active pseudo states $action-primary-focused-bg: $m-blue-d1; $action-primary-focused-fg: $white; -// current or active navigation item +// ACTIONS: primary - current or active navigation item $action-primary-active-bg: $m-blue; $action-primary-active-fg: $m-blue-d3; $action-primary-active-shadow: $m-blue-d2; $action-primary-active-focused-fg: $m-blue-d4; $action-primary-active-focused-shadow: $m-blue-d3; -// disabled +// ACTIONS: disabled $action-primary-disabled-bg: $m-gray-d3; $action-prmary-disabled-fg: $white; - - -// actions - secondary +// ACTIONS: secondary $action-secondary-bg: $m-pink; $action-secondary-fg: $white; $action-secondary-shadow: $m-pink-d2; -// focused - hover/active pseudo states +// ACTIONS: secondary - focused - hover/active pseudo states $action-secondary-focused-bg: $m-pink-l3; $action-secondary-focused-fg: $white; -// current or active navigation item +// ACTIONS: secondary - current or active navigation item $action-secondary-active-bg: $m-pink-l2; $action-secondary-active-fg: $m-pink-d1; $action-secondary-active-shadow: $m-pink-d1; $action-secondary-active-focused-fg: $m-pink-d3; $action-secondary-active-focused-shadow: $m-pink-d2; -// disabled +// ACTIONS: secondary - disabled $action-secondary-disabled-bg: $m-gray-d3; $action-secondary-disabled-fg: $white; +// ==================== - - +// MISC: visual horizontal rules $faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0)); $faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1)); $faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0)); @@ -148,51 +160,54 @@ $faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240 $faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0)); $faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0)); +// MISC: dashboard $dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)); $dashboard-profile-header-color: transparent; $dashboard-profile-color: rgb(252,252,252); $dot-color: $light-gray; +// MISC: course assets $content-wrapper-bg: $white; $course-bg-color: #d6d6d6; $course-bg-image: url(../images/bg-texture.png); $account-content-wrapper-bg: shade($body-bg, 2%); - $course-profile-bg: rgb(245,245,245); $course-header-bg: rgba(255,255,255, 0.93); +// MISC: borders $border-color-1: rgb(190,190,190); $border-color-2: rgb(200,200,200); $border-color-3: rgb(100,100,100); $border-color-4: rgb(252,252,252); +// MISC: links and buttons $link-color: $blue; $link-color-d1: $m-blue-d2; $link-hover: $pink; $site-status-color: $pink; - $button-color: $blue; $button-archive-color: #eee; +// MISC: shadow, form, modal $shadow-color: $blue; +$form-bg-color: #fff; +$modal-bg-color: rgb(245,245,245); +// MISC: sidebar $sidebar-chapter-bg-top: rgba(255, 255, 255, .6); $sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0); $sidebar-chapter-bg: #eee; $sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6); -$form-bg-color: #fff; -$modal-bg-color: rgb(245,245,245); - -//TOP HEADER IMAGE MARGIN +// TOP HEADER IMAGE MARGIN $header_image_margin: -69px; //FOOTER MARGIN $footer_margin: ($baseline/4) 0 ($baseline*1.5) 0; -//----------------- -// CSS BG Images -//----------------- +// ==================== + +// IMAGES: backgrounds $homepage-bg-image: '../images/homepage-bg.jpg'; $login-banner-image: url(../images/bg-banner-login.png); @@ -200,11 +215,11 @@ $register-banner-image: url(../images/bg-banner-register.png); $video-thumb-url: '../images/courses/video-thumb.jpg'; -//----------------- -// Newer variables ported from Studio -//----------------- +// ==================== -// fonts +// SPLINT: new standards + +// SPLINT: fonts $f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index 157d3d60df..477f21565c 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -134,45 +134,40 @@ // 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); +} + +.t-icon-solo { + @include line-height(0); } diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 01c37f5892..b052f84d94 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -1,39 +1,23 @@ // lms - views - verification flow // ==================== -body.register.verification { +// some nasty resets and standard styles +body.register.verification-process { font-family: 'Open Sans', sans-serif; -// some nasty resets and standard styles - h1, h2, h3, h4, h5, h6, p, input { - font-family: 'Open Sans', sans-serif; + // reset: typography - heading + h1, h2, h3, h4, h5 ,h6 { + @extend .t-title; } + // reset: typography - copy + p, ol, ul, dl, input, select, textarea { + font-family: $f-sans-serif; + } + + // reset: copy/text p { - margin-bottom: ($baseline*.75); - } - - input { - font-style: normal; - font-weight: 400; - margin-right: ($baseline/5); - } - - label { - font-style: normal; - font-family: 'Open Sans', sans-serif; - font-weight: 400; - } - - - - .faq { - @extend .t-copy-sub2; - - label { - font-size: 12px; - font-weight: bold; - } + margin-bottom: ($baseline*0.75); } dt { @@ -49,8 +33,33 @@ body.register.verification { margin: ($baseline/4) 0 0 ($baseline/2); } + // reset: forms + input { + font-style: normal; + font-weight: 400; + margin-right: ($baseline/5); + } -// basic reusable bits + label { + font-style: normal; + font-family: 'Open Sans', sans-serif; + font-weight: 400; + } + + .faq { + @extend .t-copy-sub2; + + label { + font-size: 12px; + font-weight: bold; + } + } + + + // ==================== + + + // elements: layout .content-wrapper { background: none repeat scroll 0 0 #F7F7F7; padding-bottom: 0; @@ -61,6 +70,13 @@ body.register.verification { padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5); } + // elements: common UI + .title { + @extend .t-title5; + margin-bottom: ($baseline/2); + font-weight: 300; + } + .tip { @extend .t-copy-sub2; @include transition(color 0.15s ease-in-out 0s); @@ -69,6 +85,11 @@ body.register.verification { color: $lighter-base-font-color; } + + // ==================== + + + // elements: header .page-header { .title { @@ -83,14 +104,7 @@ body.register.verification { } } - .title { - @extend .t-title5; - margin-bottom: ($baseline/2); - font-weight: 300; - } - - - + // elements: page options .pay-options { list-style-type: none; margin: 0; @@ -120,9 +134,10 @@ body.register.verification { vertical-align: middle; } } - } + + // elements - controls .m-btn-primary { margin-bottom: 0; padding: 0; @@ -155,6 +170,7 @@ body.register.verification { } + // 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); @@ -168,6 +184,10 @@ body.register.verification { } + // ==================== + + + // nav/status: progress .progress { @include clearfix; position: relative; @@ -175,7 +195,7 @@ body.register.verification { border-bottom: 1px solid #ccc; padding-bottom: $baseline; - ol { + .progress-steps { margin: 0; padding: 0; } @@ -199,7 +219,6 @@ body.register.verification { } } - &.done { color: #008801; @@ -210,8 +229,6 @@ body.register.verification { } } - - .number { height: 2em; width: 2em; @@ -246,7 +263,6 @@ body.register.verification { width: 20%; background-color: #008801; } - } .support { @@ -254,12 +270,11 @@ body.register.verification { } +// ==================== - - -// select a track page - &.select-track { +// VIEW: select a track + &.step-select-track { .select { @include clearfix(); @@ -353,8 +368,12 @@ body.register.verification { } } -// requirements page - &.requirements { + + // ==================== + + + // VIEW: requirements + &.step-requirements { .section-head .title { @extend .t-title4; @@ -437,14 +456,17 @@ body.register.verification { margin-left: 65px; } } - } - } -// take and review photos page - &.photos { - // for dev placement only + + // ==================== + + + // VIEW: take and review photos + &.step-photos { + + // TEMP: for dev placement only .placeholder-cam, .placeholder-photo { height: 300px; @@ -546,25 +568,21 @@ body.register.verification { float: left; padding-right: $baseline; } - } .photo-tips { width: 45%; float: left; - ul { - margin: 0; - padding: 0; - list-style-type: none; - } - - li { - margin-bottom: $baseline; - } - - + ul { + margin: 0; + padding: 0; + list-style-type: none; + } + li { + margin-bottom: $baseline; + } } .next-step { @@ -589,5 +607,4 @@ body.register.verification { margin-right: $baseline; } } - } From bae9c307ef1cfa43b117c243289f811a12f79abb Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 26 Aug 2013 19:26:28 -0400 Subject: [PATCH 3/3] Verification: revised semantic classes/organization - WIP --- common/templates/course_modes/choose.html | 4 +-- .../verify_student/photo_verification.html | 34 +++++++++---------- .../verify_student/show_requirements.html | 2 +- 3 files changed, 19 insertions(+), 21 deletions(-) diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html index ad46dab2c5..c5c20fb859 100644 --- a/common/templates/course_modes/choose.html +++ b/common/templates/course_modes/choose.html @@ -2,13 +2,13 @@ <%! from django.core.urlresolvers import reverse %> <%inherit file="../main.html" /> -<%block name="bodyclass">register verification select-track +<%block name="bodyclass">register verification-process step-select-track <%block name="js_extra">