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',
{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"
name="birth_month"
options={birthMonthOptions}
validate={this.validateSelect}
validationClassName="validation-birthdate-input"
validationClassName={classNames(
'validation-birthdate-month',
'validation-left'
)}
/>
<FormikSelect
className={classNames(
'join-flow-select',
'join-flow-select-year',
{fail: errors.birth_year}
)}
error={errors.birth_year}
@ -125,7 +130,7 @@ class BirthDateStep extends React.Component {
name="birth_year"
options={birthYearOptions}
validate={this.validateSelect}
validationClassName="validation-birthdate-input"
validationClassName="validation-birthdate-year"
/>
</div>
</JoinFlowStep>

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

@ -38,8 +38,13 @@
transform: translate(21.5625rem, 0);
}
.validation-birthdate-input {
transform: translate(8.75rem, .25rem);
.validation-birthdate-month {
transform: translate(-9.25rem, 0);
width: 7.25rem;
}
.validation-birthdate-year {
transform: translate(8.75rem, 0);
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 {
width: 9.125rem;
margin-right: .5rem;
width: 9.125rem;
}
.select .join-flow-select-year {
width: 9.125rem;
}
.select .join-flow-select-country {