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

improve logic, appearance of birthdate step select elements

Browse source
This commit is contained in:
Ben Wheeler 2019-08-21 03:56:40 +02:00
parent af13ec037c
commit 6285784cd2
2 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -108,16 +108,21 @@ class BirthDateStep extends React.Component {
'join-flow-select-month', 'join-flow-select-month',
{fail: errors.birth_month} {fail: errors.birth_month}
)} )}
error={errors.birth_month} /* hide month (left side) error, if year (right side) error exists */
error={errors.birth_year ? null : errors.birth_month}
id="birth_month" id="birth_month"
name="birth_month" name="birth_month"
options={birthMonthOptions} options={birthMonthOptions}
validate={this.validateSelect} validate={this.validateSelect}
validationClassName="validation-birthdate-input" validationClassName={classNames(
'validation-birthdate-month',
'validation-left'
)}
/> />
<FormikSelect <FormikSelect
className={classNames( className={classNames(
'join-flow-select', 'join-flow-select',
'join-flow-select-year',
{fail: errors.birth_year} {fail: errors.birth_year}
)} )}
error={errors.birth_year} error={errors.birth_year}
@ -125,7 +130,7 @@ class BirthDateStep extends React.Component {
name="birth_year" name="birth_year"
options={birthYearOptions} options={birthYearOptions}
validate={this.validateSelect} validate={this.validateSelect}
validationClassName="validation-birthdate-input" validationClassName="validation-birthdate-year"
/> />
</div> </div>
</JoinFlowStep> </JoinFlowStep>

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

@ -38,8 +38,13 @@
transform: translate(21.5625rem, 0); transform: translate(21.5625rem, 0);
} }
.validation-birthdate-input { .validation-birthdate-month {
transform: translate(8.75rem, .25rem); transform: translate(-9.25rem, 0);
width: 7.25rem;
}
.validation-birthdate-year {
transform: translate(8.75rem, 0);
width: 7.25rem; width: 7.25rem;
} }
@ -55,9 +60,22 @@
} }
} }
.select .join-flow-select {
height: 3.5rem;
background-color: white;
border-color: $box-shadow-light-gray;
font-size: 1rem;
font-weight: 500;
padding-right: 3.25rem;
}
.select .join-flow-select-month { .select .join-flow-select-month {
width: 9.125rem;
margin-right: .5rem; margin-right: .5rem;
width: 9.125rem;
}
.select .join-flow-select-year {
width: 9.125rem;
} }
.select .join-flow-select-country { .select .join-flow-select-country {