scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

make validations be the same width as inputs…

Browse source 
…when window is narrow
This commit is contained in:
Ben Wheeler 2019-09-23 16:18:20 -04:00
parent 10a1094116
commit e901deb398
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} options={birthMonthOptions}
validate={this.validateSelect} validate={this.validateSelect}
validationClassName={classNames( validationClassName={classNames(
'validation-birthdate',
'validation-birthdate-month', 'validation-birthdate-month',
'validation-left' 'validation-left'
)} )}
@ -135,7 +136,10 @@ class BirthDateStep extends React.Component {
name="birth_year" name="birth_year"
options={birthYearOptions} options={birthYearOptions}
validate={this.validateSelect} validate={this.validateSelect}
validationClassName="validation-birthdate-year" validationClassName={classNames(
'validation-birthdate',
'validation-birthdate-year'
)}
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
onFocus={() => setFieldError('birth_year', null)} onFocus={() => setFieldError('birth_year', null)}
/* eslint-enable react/jsx-no-bind */ /* 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" name="country"
options={this.countryOptions} options={this.countryOptions}
validate={this.validateSelect} validate={this.validateSelect}
validationClassName="validation-full-width-input" validationClassName={classNames(
'validation-full-width-input',
'validation-country'
)}
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
onFocus={() => setFieldError('country', null)} onFocus={() => setFieldError('country', null)}
/* eslint-enable react/jsx-no-bind */ /* 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 { .validation-full-width-input {
transform: unset; transform: unset;
margin-bottom: .75rem; margin-bottom: .75rem;
max-width: 100%;
} }
.validation-birthdate-input { .validation-country {
top: .5rem;
}
.validation-birthdate {
transform: unset; transform: unset;
width: 8rem; top: .5rem;
width: 19rem;
}
.validation-birthdate-month {
margin-right: -9.25rem;
}
.validation-birthdate-year {
margin-left: -9.625rem;
} }
} }