Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates combined Register, Login, and Password Reset views as per new design

Browse Source 
* 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.
This commit is contained in:
Jillian Vogel
2017-04-28 14:20:22 +09:30
committed by Jesse Shapiro
parent cd56cc56cd
commit 71ba54a963
19 changed files with 175 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
lms/static/js/student_account/views/AccessView.js
View File

@@ -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);
},
/**

9
lms/static/js/student_account/views/FormView.js
View File

@@ -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 || ''
})));

1
lms/static/js/student_account/views/LoginView.js
View File

@@ -20,6 +20,7 @@
},
formType: 'login',
requiredStr: '',
optionalStr: '',
submitButton: '.js-login',
formSuccessTpl: formSuccessTpl,
formStatusTpl: formStatusTpl,

1
lms/static/js/student_account/views/PasswordResetView.js
View File

@@ -17,6 +17,7 @@
formType: 'password-reset',
requiredStr: '',
optionalStr: '',
submitButton: '.js-reset',

2
lms/static/sass/course/layout/_courseware_header.scss
View File

@@ -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;

21
lms/static/sass/elements/_controls.scss
View File

@@ -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;
}
}
}

1
lms/static/sass/partials/base/_variables.scss
View File

@@ -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;

2
lms/static/sass/shared/_header.scss
View File

@@ -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;

131
lms/static/sass/views/_login-register.scss
View File

@@ -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%);
}
}
}