From 352f284624bfe1f42e0ea3659ec043dc335eeaa2 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 8 Jan 2013 11:37:26 -0500 Subject: [PATCH] pearson registration - revised UI states for reg form, simplified markup for form fields, synched button styles/text b/t registration form and dashboard --- lms/static/sass/multicourse/_dashboard.scss | 14 ++- .../multicourse/_testcenter-register.scss | 106 ++++++++++++++++- lms/templates/dashboard.html | 6 +- lms/templates/test_center_register.html | 108 ++++++++++-------- 4 files changed, 175 insertions(+), 59 deletions(-) diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index abee5d77c3..a309816cb4 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -410,7 +410,7 @@ margin: 20px 0 10px; padding: 15px 20px; font-family: $sans-serif; - background: #fffcf0; + background: tint($yellow,70%); border: 1px solid #ccc; .message-copy { @@ -498,18 +498,28 @@ } } + .contact-button { + @include button(simple, $blue); + } + .exam-button { @include button(simple, $pink); + } + + .button { float: right; padding: 9px 18px 10px; font-size: 13px; - font-weight: 400; + font-weight: bold; + letter-spacing: 0; &:hover { text-decoration: none; } } + + &.is-shown { display: block; } diff --git a/lms/static/sass/multicourse/_testcenter-register.scss b/lms/static/sass/multicourse/_testcenter-register.scss index aae752e2ca..f0736e5308 100644 --- a/lms/static/sass/multicourse/_testcenter-register.scss +++ b/lms/static/sass/multicourse/_testcenter-register.scss @@ -71,11 +71,21 @@ $red: rgb(178, 6, 16); @include border-radius(3px); @include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.2)); - .instructions { + .instructions, .note { margin: 0; padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5); font-family: $sans-serif; font-size: 14px; + color: tint($base-font-color, 20%); + + strong { + font-weight: normal; + } + + .title, .indicator { + color: $base-font-color; + font-weight: 700; + } } fieldset { @@ -84,11 +94,11 @@ $red: rgb(178, 6, 16); } .form-actions { + @include clearfix(); padding: ($baseline*1.5); button[type="submit"] { display: block; - width: 100%; @include button(simple, $blue); @include box-sizing(border-box); @include border-radius(3px); @@ -98,6 +108,23 @@ $red: rgb(178, 6, 16); text-align: center; } + .action-primary { + float: left; + width: flex-grid(5,8); + margin-right: flex-gutter(2); + } + + .action-secondary { + display: block; + float: left; + width: flex-grid(2,8); + margin-top: $baseline; + padding: ($baseline/4); + font-size: 13px; + text-align: right; + text-transform: uppercase; + } + &.error { } @@ -224,7 +251,7 @@ $red: rgb(178, 6, 16); display: block; float: left; border-bottom: none; - margin: 0 ($baseline) 0 0; + margin: 0 $baseline ($baseline/2) 0; padding-bottom: 0; input, textarea { @@ -239,7 +266,7 @@ $red: rgb(178, 6, 16); } } - &.postal { + &.postal-2 { border-bottom: none; margin-bottom: 0; padding-bottom: 0; @@ -268,7 +295,6 @@ $red: rgb(178, 6, 16); padding: $baseline ($baseline*1.5) 0 ($baseline*1.5); font-family: $sans-serif; font-size: 13px; - text-align: right; &.is-hidden { display: none; @@ -343,7 +369,7 @@ $red: rgb(178, 6, 16); top: 0; right: $baseline; margin-left: $baseline; - content: "testing"; + content: "not started"; text-transform: uppercase; font-size: 11px; font-weight: normal; @@ -408,6 +434,18 @@ $red: rgb(178, 6, 16); } } + &.status-initial { + + &:before { + background: transparent; + border: 1px dotted gray; + } + + .title:after { + color: gray; + } + } + &:hover { .details, .item { @@ -438,6 +476,10 @@ $red: rgb(178, 6, 16); background: tint($yellow,70%); font-size: 14px; + .title { + font-size: 14px; + } + .label, .value { display: inline-block; } @@ -556,6 +598,58 @@ $red: rgb(178, 6, 16); font-size: 14px; } + // registration status + &.message-flash { + display: block; + @include border-radius(3px); + position: relative; + margin: 0 0 ($baseline*2) 0; + border: 1px solid #ccc; + padding-top: ($baseline*0.75); + background: tint($yellow,70%); + font-size: 14px; + + .message-title, .message-copy { + font-family: $sans-serif; + font-size: 14px; + } + + .message-title { + font-weight: bold; + margin: 0 0 ($baseline/4) 0; + } + + .contact-button { + @include button(simple, $blue); + } + + .exam-button { + @include button(simple, $pink); + } + + .button { + position: absolute; + top: ($baseline/4); + right: $baseline; + margin: ($baseline/2) 0 0 0; + padding: ($baseline/2) $baseline; + font-size: 13px; + font-weight: bold; + + &:hover { + text-decoration: none; + } + } + + &.message-action { + + .message-title, .message-copy { + width: 65%; + } + } + } + + // submission error &.submission-error { border: 1px solid tint($red,85%); diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index c4da396b0d..ab31de1aed 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -228,8 +228,8 @@ % if registration is None and testcenter_exam_info.is_registering():
- Register for Pearson exam -

Registration for the Pearson exam is now open and will close on ${testcenter_exam_info.registration_end_date_text}

+ Register for Pearson exam +

Registration for the Pearson exam is now open and will close on ${testcenter_exam_info.registration_end_date_text}

% endif @@ -245,10 +245,12 @@ % if registration.is_rejected():
+ Contact exam-help@edx.org

Your registration for the Pearson exam has been rejected. Please check the information you provided, and try to correct any demographic errors. Otherwise contact someone at edX or Pearson, or just scream for help.

+
% endif % if not registration.is_accepted() and not registration.is_rejected(): diff --git a/lms/templates/test_center_register.html b/lms/templates/test_center_register.html index 855d707295..fb1d70506b 100644 --- a/lms/templates/test_center_register.html +++ b/lms/templates/test_center_register.html @@ -90,7 +90,7 @@
-

${get_course_about_section(course, 'university')} ${course.number} ${course.title}

+

${get_course_about_section(course, 'university')} ${course.number} ${course.title}

% if registration:

Your Pearson VUE Proctored Exam Registration

@@ -101,9 +101,28 @@
-
- + % if registration: + + +
+

Your registration for the Pearson exam has been rejected

+

Please check the information you provided, and try to correct any demographic errors. Otherwise contact someone at edX or Pearson, or just scream for help.

+ Contact exam-help@edx.org
+ + +
+

Your registration for the Pearson exam has been accepted

+

Your registration number is 12345678901 (Write this down! You’ll need it to schedule your exam.)

+ Schedule Pearson exam +
+ + +
+

Your registration for the Pearson exam is pending

+

Once your information is accepted, it will be forwarded to Pearson and you will be able to schedule an exam.

+
+ % endif
@@ -113,11 +132,11 @@ % if registration:

- Please complete the following form to update your demographic information used in your Pearson VUE Proctored Exam. Required fields are noted by bold text and an asterisk (*). + Please complete the following form to update your demographic information used in your Pearson VUE Proctored Exam. Required fields are noted by bold text and an asterisk (*).

% else:

- Please provide the following demographic information to register for a Pearson VUE Proctored Exam. Required fields are noted by bold text and an asterisk (*). + Please provide the following demographic information to register for a Pearson VUE Proctored Exam. Required fields are noted by bold text and an asterisk (*).

% endif @@ -132,23 +151,23 @@
    -
  1. +
    3. -
  3. +
    5. -
  5. +
    7. -
  7. +
    9. -
  9. +
    11. @@ -159,34 +178,34 @@
      -
    1. +
    3. -
      +
      -
      +
      -
      4. -
    4. -
      - - -
      -
      +
      5. +
    5. + + +
      6. +
    6. +
      -
      +
      -
      +
      @@ -199,30 +218,30 @@
      1. -
        +
        -
        +
        -
        +
      2. -
        +
        -
        +
        3. -
      3. +
        5. @@ -239,9 +258,9 @@ % endif % if registration: -

        Fields below this point are not part of your demographic information, and are not editable currently.

        +

        Note: Accomodation requests, which need to be reviewed in detail, will add significant delay to the registration process.

        % else: -

        Fields below this point are not part of your demographic information, and cannot be changed once submitted.

        +

        Note: Accommodation requests are not part of your demographic information, and cannot be changed once submitted. Accomodation requests, which need to be reviewed in detail, will add significant delay to the registration process.

        % endif
        @@ -268,8 +287,10 @@
        % if registration: + Cancel Update % else: + Cancel Registration % endif
        @@ -290,15 +311,15 @@