From 71ba54a963b12da9abaae2bc0caa8bbee4156e5f Mon Sep 17 00:00:00 2001 From: Jillian Vogel Date: Fri, 28 Apr 2017 14:20:22 +0930 Subject: [PATCH] Updates combined Register, Login, and Password Reset views as per new design * Reorders form fields, and updates labels, placeholders, and tip text * Increases clickable area for links and labels. * Removes "*" markers from required fields, and instead adds "(optional)" labels to visible optional fields. * Updates font colors and sizes, and removes box shadows * Adds custom drop-down styles * Improves responsive design scaling for small screens * Make Terms of Service and Honor Code open in new window to avoid losing form field values. --- .../pages/lms/login_and_register.py | 2 +- common/test/acceptance/tests/lms/test_lms.py | 2 +- lms/envs/common.py | 8 +- .../js/student_account/views/AccessView.js | 7 +- .../js/student_account/views/FormView.js | 9 +- .../js/student_account/views/LoginView.js | 1 + .../views/PasswordResetView.js | 1 + .../course/layout/_courseware_header.scss | 2 +- lms/static/sass/elements/_controls.scss | 21 ++- lms/static/sass/partials/base/_variables.scss | 1 + lms/static/sass/shared/_header.scss | 2 +- lms/static/sass/views/_login-register.scss | 131 ++++++++---------- lms/templates/navigation.html | 4 +- .../student_account/form_field.underscore | 28 ++-- .../student_account/login.underscore | 29 ++-- .../student_account/password_reset.underscore | 8 +- .../student_account/register.underscore | 34 ++--- .../djangoapps/user_api/tests/test_views.py | 33 +++-- openedx/core/djangoapps/user_api/views.py | 23 +-- 19 files changed, 175 insertions(+), 171 deletions(-) diff --git a/common/test/acceptance/pages/lms/login_and_register.py b/common/test/acceptance/pages/lms/login_and_register.py index 974300c977..6544698a98 100644 --- a/common/test/acceptance/pages/lms/login_and_register.py +++ b/common/test/acceptance/pages/lms/login_and_register.py @@ -220,7 +220,7 @@ class CombinedLoginAndRegisterPage(PageObject): if favorite_movie: self.q(css="#register-favorite_movie").fill(favorite_movie) if terms_of_service: - self.q(css="#register-honor_code").click() + self.q(css="label[for='register-honor_code']").click() # Submit it self.q(css=".register-button").click() diff --git a/common/test/acceptance/tests/lms/test_lms.py b/common/test/acceptance/tests/lms/test_lms.py index f2a828397d..c3c5095666 100644 --- a/common/test/acceptance/tests/lms/test_lms.py +++ b/common/test/acceptance/tests/lms/test_lms.py @@ -341,7 +341,7 @@ class RegisterFromCombinedPageTest(UniqueCourseTest): # Verify that the expected errors are displayed. errors = self.register_page.wait_for_errors() - self.assertIn(u'Please enter your Public username.', errors) + self.assertIn(u'Please enter your Public Username.', errors) self.assertIn( u'You must agree to the édX Terms of Service and Honor Code', errors diff --git a/lms/envs/common.py b/lms/envs/common.py index c711197190..e347937791 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -2446,13 +2446,13 @@ REGISTRATION_EXTRA_FIELDS = { } REGISTRATION_FIELD_ORDER = [ - "email", - "confirm_email", "name", - "username", - "password", "first_name", "last_name", + "username", + "email", + "confirm_email", + "password", "city", "state", "country", diff --git a/lms/static/js/student_account/views/AccessView.js b/lms/static/js/student_account/views/AccessView.js index 424b74a35a..435cc9d3dd 100644 --- a/lms/static/js/student_account/views/AccessView.js +++ b/lms/static/js/student_account/views/AccessView.js @@ -205,7 +205,8 @@ toggleForm: function(e) { var type = $(e.currentTarget).data('type'), $form = $('#' + type + '-form'), - $anchor = $('#' + type + '-anchor'), + scrollX = window.scrollX, + scrollY = window.scrollY, queryParams = url('?'), queryStr = queryParams.length > 0 ? '?' + queryParams : ''; @@ -224,7 +225,6 @@ this.element.hide($(this.el).find('.submission-success')); this.element.hide($(this.el).find('.form-wrapper')); this.element.show($form); - this.element.scrollTop($anchor); // Update url without reloading page if (type != 'institution_login') { @@ -234,6 +234,9 @@ // Focus on the form $('#' + type).focus(); + + // Maintain original scroll position + window.scrollTo(scrollX, scrollY); }, /** diff --git a/lms/static/js/student_account/views/FormView.js b/lms/static/js/student_account/views/FormView.js index d164904157..a458a12da8 100644 --- a/lms/static/js/student_account/views/FormView.js +++ b/lms/static/js/student_account/views/FormView.js @@ -35,7 +35,13 @@ fields: [], // String to append to required label fields - requiredStr: '*', + requiredStr: '', + + /* + Translators: This string is appended to optional field labels on the student login, registration, and + profile forms. + */ + optionalStr: gettext('(optional)'), submitButton: '', @@ -94,6 +100,7 @@ html.push(_.template(fieldTpl)($.extend(data[i], { form: this.formType, requiredStr: this.requiredStr, + optionalStr: this.optionalStr, supplementalText: data[i].supplementalText || '', supplementalLink: data[i].supplementalLink || '' }))); diff --git a/lms/static/js/student_account/views/LoginView.js b/lms/static/js/student_account/views/LoginView.js index 3a90c91dbf..25587a2058 100644 --- a/lms/static/js/student_account/views/LoginView.js +++ b/lms/static/js/student_account/views/LoginView.js @@ -20,6 +20,7 @@ }, formType: 'login', requiredStr: '', + optionalStr: '', submitButton: '.js-login', formSuccessTpl: formSuccessTpl, formStatusTpl: formStatusTpl, diff --git a/lms/static/js/student_account/views/PasswordResetView.js b/lms/static/js/student_account/views/PasswordResetView.js index a9b0baf70d..46007ce311 100644 --- a/lms/static/js/student_account/views/PasswordResetView.js +++ b/lms/static/js/student_account/views/PasswordResetView.js @@ -17,6 +17,7 @@ formType: 'password-reset', requiredStr: '', + optionalStr: '', submitButton: '.js-reset', diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 4be09feba5..09a2472e3f 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -66,7 +66,7 @@ box-shadow: 0 1px 2px $shadow-l1; height: auto; padding: ($baseline/4) 0 ($baseline/2) 0; - border-bottom: 1px solid $outer-border-color; + border-bottom: 1px solid $header-border-color; background: $header-bg; line-height: 1.4; diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss index 31363b535d..9582ee7472 100644 --- a/lms/static/sass/elements/_controls.scss +++ b/lms/static/sass/elements/_controls.scss @@ -76,6 +76,7 @@ border: none; padding: ($baseline*0.75) $baseline; text-align: center; + text-shadow: none; &:hover, &:active, &:focus { @@ -142,7 +143,6 @@ // blue primary button %btn-primary-blue { @extend %btn-primary; - box-shadow: 0 2px 1px 0 $m-blue-d4; background: $m-blue-d3; color: $white; @@ -152,12 +152,10 @@ } &.current, &.active { - box-shadow: inset 0 2px 1px 1px $m-blue-d2; background: $m-blue; color: $m-blue-d2; &:hover, &:active, &:focus { - box-shadow: inset 0 2px 1px 1px $m-blue-d3; color: $m-blue-d3; } } @@ -473,3 +471,20 @@ box-shadow: none !important; } } + +// enlarge the clickable area of a control. +%expand-clickable-area { + position: relative; + + &, &:link, &:visited, &:hover, &:active, &:focus { + &:after { + content: " "; + position: absolute; + left: 0; + top: calc( 50% - #{($baseline * 1.1)}); + min-height: ($baseline * 2.2); + width: 100%; + cursor: pointer; + } + } +} diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss index c4e4db398d..a17f900f2c 100644 --- a/lms/static/sass/partials/base/_variables.scss +++ b/lms/static/sass/partials/base/_variables.scss @@ -466,6 +466,7 @@ $container-bg: $white !default; // header $header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)) !default; $header-bg: $white !default; +$header-border-color: $blue !default; $header-graphic-super-color: $m-blue-d1 !default; $header-graphic-sub-color: $m-gray-d2 !default; $header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif !default; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index bd7226cb7f..d59c790587 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -3,7 +3,7 @@ .header-global { @extend %ui-depth1; - border-bottom: 1px solid $gray-l1; + border-bottom: 2px solid $header-border-color; box-shadow: 0 1px 5px 0 $shadow-l1; background: $header-bg; position: relative; diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index 4ed38d1fba..f58c1878a0 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -10,13 +10,29 @@ background: $white; min-height: 100%; width: 100%; + padding-left: ($baseline/2); + padding-right: ($baseline/2); $third-party-button-height: ($baseline*1.75); h2 { - @extend %t-title5; + @extend %t-title4; + margin-top: $baseline; + letter-spacing: normal; + font-family: $sans-serif; + color: $uxpl-blue-hover-active; + } + + h3 { + @extend %t-title6; + @extend %t-light; margin: 0; letter-spacing: normal; font-family: $sans-serif; + color: $gray-d4; + } + + a, label { + @extend %expand-clickable-area; } .instructions { @@ -68,27 +84,22 @@ } } - form, - .wrapper-other-login { - border: 1px solid $gray-l4; - border-radius: ($baseline/4); - padding: 0 ($baseline*1.25) $baseline ($baseline*1.25); - } - .section-title { position: relative; - margin: 20px 0 10px; + margin: $baseline 0 ($baseline/2); &.lines { - margin-bottom: 20px; + margin-bottom: $baseline; + margin-top: $baseline; + text-align: center; &:after { position: absolute; left: 0; - top: 12px; + top: ($baseline/2); width: 100%; height: 1px; - background: $gray-l4; + background: $gray-l3; content: ''; z-index: 5; } @@ -125,18 +136,13 @@ .form-type, .toggle-form { @include box-sizing(border-box); - max-width: 650px; + max-width: 600px; min-width: 250px; margin: 0 auto; - padding: { - left: $baseline; // Don't want to override any top or bottom (CR) - right: $baseline; // Don't want to override any top or bottom (CR) - bottom: ($baseline/2); - } } .toggle-form { - text-align: center // Centers the text and buttons + @extend %t-action1; } .note { @@ -149,7 +155,8 @@ /** The forms **/ .form-wrapper { - padding-top: ($baseline + 5); + padding-top: $baseline; + padding-bottom: $baseline; form { @include clearfix(); @@ -161,22 +168,8 @@ } } - .login-form { - margin-bottom: $baseline; - - &:focus { - outline: none; - } - } - - .password-reset-form { - padding-bottom: ($baseline + 5); - - &:focus { - outline: none; - } - } - + .login-form, + .password-reset-form, .register-form { &:focus { outline: none; @@ -204,7 +197,7 @@ clear: both; position: relative; width: 100%; - margin: ($baseline/2) 0 ($baseline/4) 0; + margin: ($baseline/2) 0 0 0; &.select-year_of_birth { @include margin-left(15px); @@ -219,6 +212,7 @@ /** FROM _accounts.scss - start **/ label, input, + select, textarea { height: auto; line-height: 1.5em; @@ -235,7 +229,8 @@ label { display: block; - margin: 0 0 6px 0; + margin: 0; + color: $black; &.inline { display: inline; @@ -244,13 +239,12 @@ &.error { color: $red; } - + &[for="register-data_sharing_consent"], &[for="register-honor_code"], &[for="register-terms_of_service"] { display: inline-block; margin: 5px 5px 0 0; - width: 90%; vertical-align: top; } @@ -275,7 +269,7 @@ text-decoration: none; text-shadow: none; font-family: $sans-serif; - + &:hover, &:focus { text-decoration: underline; @@ -286,6 +280,7 @@ select, textarea { display: block; + height: 32px; width: 100%; margin: 0 0 ($baseline/4); padding: 0 ($baseline/2); @@ -301,7 +296,12 @@ &.checkbox { display: inline; width: auto; + height: auto; margin-right: ($baseline/4); + + & + label { + display: inline; + } } &.error { @@ -309,31 +309,29 @@ } } - input { - height: 32px; - } - textarea { resize: none; - - &.long { - height: ($baseline*5); - } + height: ($baseline*5); } select { - width: 100%; + background: transparent; + opacity: 0.85; + border: none; + outline: solid 1px $gray-l3; + cursor: pointer; - &.error { - border-color: tint($red,50%); + &:active, &:focus { + outline: auto; } } + .tip, .label-optional { + @extend %t-copy-sub1; + color: $gray-d2; + } .tip { - @extend %t-copy-sub2; display: block; - margin: 0 0 ($baseline/2) 0; - color: $base-font-color; } /** FROM _accounts.scss - end **/ } @@ -356,12 +354,11 @@ .action-primary { @extend %btn-primary-blue; - width: 100%; - margin-top: 1em; - padding: ($baseline/2); + padding: 1ex 1em; text-transform: none; font-weight: 600; letter-spacing: normal; + margin-top: $baseline; .icon { @extend %sso-icon; @@ -377,7 +374,7 @@ position: relative; margin-right: ($baseline/4); - margin-bottom: $baseline; + margin-bottom: ($baseline/4); border-color: $lightGrey1; width: $baseline*6.5; height: $third-party-button-height; @@ -426,10 +423,6 @@ border: 1px solid #A5382B; color: $white; } - - &:hover { - box-shadow: 0 2px 1px 0 #8D3024; - } } &.button-oa2-facebook { @@ -445,10 +438,6 @@ border: 1px solid #263A62; color: $white; } - - &:hover { - box-shadow: 0 2px 1px 0 #30487C; - } } &.button-oa2-linkedin-oauth2 { @@ -464,10 +453,6 @@ border: 1px solid #06527D; color: $white; } - - &:hover { - box-shadow: 0 2px 1px 0 #005D8E; - } } &.button-oa2-azuread-oauth2 { @@ -483,10 +468,6 @@ border: 1px solid $microsoft-blue; color: $white; } - - &:hover { - box-shadow: 0 2px 1px 0 darken($microsoft-blue, 10%); - } } } diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index 7f90e06758..5ca116a8c7 100644 --- a/lms/templates/navigation.html +++ b/lms/templates/navigation.html @@ -151,11 +151,11 @@ site_status_msg = get_site_status_msg(course_id) %endif % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
  • - ${_("Register")} + ${_("Register")}
    • % elif static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')):
  • - ${_("Register")} + ${_("Register")}
    • % endif % endif diff --git a/lms/templates/student_account/form_field.underscore b/lms/templates/student_account/form_field.underscore index 4ea63bebba..3dcf58fdfb 100644 --- a/lms/templates/student_account/form_field.underscore +++ b/lms/templates/student_account/form_field.underscore @@ -1,12 +1,13 @@
    <% if ( type !== 'checkbox' ) { %> <% } %> + <%= label %> + <% if ( required && requiredStr && (type !== 'hidden') ) { %><%= requiredStr %><% } %> + <% if ( !required && optionalStr && (type !== 'hidden') ) { %><%= optionalStr %><% } %> <% if (supplementalLink && supplementalText) { %>
    - <%- supplementalText %> + <%- supplementalText %>
    <% } %> <% } %> @@ -31,7 +32,7 @@ <% if ( instructions ) { %> <%= instructions %><% } %> <% if (supplementalLink && supplementalText) { %>
    - <%- supplementalText %> + <%- supplementalText %>
    <% } %> <% } else if ( type === 'textarea' ) { %> @@ -53,10 +54,17 @@ <% if ( instructions ) { %> <%= instructions %><% } %> <% if (supplementalLink && supplementalText) { %>
    - <%- supplementalText %> + <%- supplementalText %>
    <% } %> <% } else { %> + <% if ( type === 'checkbox' ) { %> + <% if (supplementalLink && supplementalText) { %> +
    + <%- supplementalText %> +
    + <% } %> + <% } %> <% if ( type === 'checkbox' ) { %> <% } %> <% if ( instructions ) { %> <%= instructions %><% } %> - <% if (supplementalLink && supplementalText) { %> -
    - <%- supplementalText %> -
    - <% } %> <% } %> <% if( form === 'login' && name === 'password' ) { %> diff --git a/lms/templates/student_account/login.underscore b/lms/templates/student_account/login.underscore index 83f6fc45ee..8bb806a945 100644 --- a/lms/templates/student_account/login.underscore +++ b/lms/templates/student_account/login.underscore @@ -1,13 +1,16 @@ -