scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #3395 from benjiwheeler/join-flow-responsive-validation

Browse source 
make validations be the same width as inputs…
This commit is contained in:
Benjamin Wheeler 2019-09-24 12:09:43 -04:00 committed by GitHub
commit 779520aa2a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/join-flow/birthdate-step.jsx
View file

@ -117,6 +117,7 @@ class BirthDateStep extends React.Component {
options={birthMonthOptions}
validate={this.validateSelect}
validationClassName={classNames(
'validation-birthdate',
'validation-birthdate-month',
'validation-left'
)}
@ -135,7 +136,10 @@ class BirthDateStep extends React.Component {
name="birth_year"
options={birthYearOptions}
validate={this.validateSelect}
validationClassName="validation-birthdate-year"
validationClassName={classNames(
'validation-birthdate',
'validation-birthdate-year'
)}
/* eslint-disable react/jsx-no-bind */
onFocus={() => setFieldError('birth_year', null)}
/* eslint-enable react/jsx-no-bind */

5
src/components/join-flow/country-step.jsx
View file

@ -93,7 +93,10 @@ class CountryStep extends React.Component {
name="country"
options={this.countryOptions}
validate={this.validateSelect}
validationClassName="validation-full-width-input"
validationClassName={classNames(
'validation-full-width-input',
'validation-country'
)}
/* eslint-disable react/jsx-no-bind */
onFocus={() => setFieldError('country', null)}
/* eslint-enable react/jsx-no-bind */

18
src/components/join-flow/join-flow-steps.scss
View file

@ -56,11 +56,25 @@
.validation-full-width-input {
transform: unset;
margin-bottom: .75rem;
max-width: 100%;
}
.validation-birthdate-input {
.validation-country {
top: .5rem;
}
.validation-birthdate {
transform: unset;
width: 8rem;
top: .5rem;
width: 19rem;
}
.validation-birthdate-month {
margin-right: -9.25rem;
}
.validation-birthdate-year {
margin-left: -9.625rem;
}
}