From 770ec2dbb33f0736374b1f5e9a0471225c2cc3a1 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Mon, 26 Aug 2013 09:56:04 -0400 Subject: [PATCH] adjusting the progress bar styling for vcerts --- lms/static/sass/views/_verification.scss | 40 +++++- .../verify_student/show_requirements.html | 114 +++++++++--------- 2 files changed, 94 insertions(+), 60 deletions(-) diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index f42c7ddfd9..fdb2fe36bf 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -159,15 +159,45 @@ body.register.verification { } - .progress { - /* background: transparent url('../images/vcert-steps.png') no-repeat 0 0; - height: 50px; - text-indent: -9999px; -*/ + .progress, + .steps { + @include clearfix; + margin-bottom: $baseline; + + ol { + margin: 0; + padding: 0; + } .progress-step { display: inline-block; + width: 15%; padding: ($baseline/2) $baseline; + text-align: center; + font-size: 12px; + color: #ccc; + + &.current { + color: #008801; + + .number { + border: 4px solid #008801; + color: #008801; + } + } } + + .number { + height: 2em; + width: 2em; + display: block; + margin: 0 auto ($baseline/2); + border: 4px solid #ddd; + border-radius: 20px; + line-height: 2em; + text-align: center; + color: #ccc; + } + } diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html index 99b3459105..b794317311 100644 --- a/lms/templates/verify_student/show_requirements.html +++ b/lms/templates/verify_student/show_requirements.html @@ -14,81 +14,85 @@

Your Progress

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

What You Will Need to Register

+
+

What You Will Need to Register

-

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.

+

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.

+
+ +
+

Webcam

+

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

+
+ +
+

Credit or Debit Card

+

A major credit or debit card.

+
-
-

Webcam

-

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

-
- -
-

Credit or Debit Card

-

A major credit or debit card.

-
-
- -

Missing something? You can always take the Audit track.

+

Missing something? You can always Audit the course.

+
-

Steps to get Verified

+
+

Steps to get Verified

-
-

Go to Step 1: Take my Photo

-
+
+

Go to Step 1: Take my Photo

+
-

Step 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.

+

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.

-

Step 2: Take 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.

+

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.

-

Step 3: Verify your submissions

-

Review your photos to verify they are correct.

+

3 Verify your submissions

+

Review your photos to verify they are correct.

-

Step 4: Submit payment

-

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

- +

4 Submit payment

+

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

+ -

You're Ready to Start Learning

+

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.

+

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

-
+
+

Go to Step 1: Take my Photo

+
+
- +
+

More questions? Check out our FAQs.

+

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

+
-
-

More questions? Check out our FAQs.

-

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