scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-03 12:27:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #3181 from benjiwheeler/join-flow-validation-positioning

Browse source 
better validation positioning on birthdate step
This commit is contained in:
Benjamin Wheeler 2019-07-29 18:57:36 -04:00 committed by GitHub
commit 687130eacf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/formik-forms/formik-select.jsx
View file

@ -24,7 +24,7 @@ const FormikSelect = ({
</option>
));
return (
<div className="select">
<div className="select row-with-tooltip">
<Field
className={classNames(
className

1
src/components/forms/validation-message.scss
View file

@ -17,6 +17,7 @@
min-height: 1rem;
overflow: visible;
color: $type-white;
z-index: 1;
&:before {
display: block;

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

@ -110,7 +110,7 @@ class BirthDateStep extends React.Component {
name="birth_month"
options={birthMonthOptions}
validate={this.validateSelect}
validationClassName="validation-full-width-input"
validationClassName="validation-birthdate-input"
/>
<FormikSelect
className={classNames(
@ -122,7 +122,7 @@ class BirthDateStep extends React.Component {
name="birth_year"
options={birthYearOptions}
validate={this.validateSelect}
validationClassName="validation-full-width-input"
validationClassName="validation-birthdate-input"
/>
</div>
</JoinFlowStep>

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

@ -22,6 +22,23 @@
transform: translate(21.5625rem, 0);
}
.validation-birthdate-input {
transform: translate(8.75rem, .25rem);
width: 7.25rem;
}
@media #{$intermediate-and-smaller} {
.validation-full-width-input {
transform: unset;
margin-bottom: .75rem;
}
.validation-birthdate-input {
transform: unset;
width: 8rem;
}
}
.select .join-flow-select {
width: 9.125rem;
}