scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-27 05:11:42 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions1

trying heights

Browse source
This commit is contained in:
Ben Wheeler 2019-08-17 00:52:52 -04:00
parent 96a7d01cdc
commit f2c4a4ade3
9 changed files with 81 additions and 53 deletions

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

@ -89,6 +89,7 @@ class BirthDateStep extends React.Component {
description={this.props.intl.formatMessage({id: 'registration.private'})}
headerImgSrc="/images/hoc/getting-started.jpg"
infoMessage={this.props.intl.formatMessage({id: 'registration.birthDateStepInfo'})}
innerClassName="join-flow-inner-birthdate-step"
title={this.props.intl.formatMessage({id: 'registration.birthDateStepTitle'})}
waiting={isSubmitting}
onSubmit={handleSubmit}

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

@ -69,6 +69,7 @@ class CountryStep extends React.Component {
<JoinFlowStep
description={this.props.intl.formatMessage({id: 'registration.countryStepDescription'})}
headerImgSrc="/images/hoc/getting-started.jpg"
innerClassName="join-flow-inner-country-step"
title={this.props.intl.formatMessage({id: 'registration.countryStepTitle'})}
waiting={isSubmitting}
onSubmit={handleSubmit}

2
src/components/join-flow/email-step.jsx
View file

@ -73,7 +73,7 @@ class EmailStep extends React.Component {
/>
)}
headerImgSrc="/images/hoc/getting-started.jpg"
innerContentClassName="modal-inner-content-email"
innerClassName="join-flow-inner-email-step"
nextButton={this.props.intl.formatMessage({id: 'registration.createAccount'})}
title={this.props.intl.formatMessage({id: 'registration.emailStepTitle'})}
waiting={isSubmitting}

2
src/components/join-flow/gender-step.jsx
View file

@ -80,9 +80,9 @@ class GenderStep extends React.Component {
} = props;
return (
<JoinFlowStep
className="join-flow-gender-step"
description={this.props.intl.formatMessage({id: 'registration.genderStepDescription'})}
infoMessage={this.props.intl.formatMessage({id: 'registration.genderStepInfo'})}
innerClassName="join-flow-inner-gender-step"
title={this.props.intl.formatMessage({id: 'registration.genderStepTitle'})}
waiting={isSubmitting}
onSubmit={handleSubmit}

81
src/components/join-flow/join-flow-step.jsx
View file

@ -11,68 +11,67 @@ require('./join-flow-step.scss');
const JoinFlowStep = ({
children,
className,
innerClassName,
description,
footerContent,
headerImgSrc,
infoMessage,
innerContentClassName,
nextButton,
onSubmit,
title,
waiting
}) => (
<form onSubmit={onSubmit}>
{headerImgSrc && (
<div className="join-flow-header-image">
<img src={headerImgSrc} />
<div className="join-flow-outer-content">
{headerImgSrc && (
<div className="join-flow-header-image">
<img src={headerImgSrc} />
</div>
)}
<div>
<ModalInnerContent
className={classNames(
'join-flow-inner-content',
innerClassName
)}
>
{title && (
<ModalTitle
className="join-flow-title"
title={title}
/>
)}
{description && (
<div className="join-flow-description">
{description}
{infoMessage && (
<InfoButton message={infoMessage} />
)}
</div>
)}
{children}
</ModalInnerContent>
</div>
)}
<div>
<ModalInnerContent
className={classNames(
'join-flow-inner-content',
className,
innerContentClassName
)}
>
{title && (
<ModalTitle
className="join-flow-title"
title={title}
/>
)}
{description && (
<div className="join-flow-description">
{description}
{infoMessage && (
<InfoButton message={infoMessage} />
)}
</div>
)}
{children}
</ModalInnerContent>
{footerContent && (
<div className="join-flow-footer-message">
{footerContent}
</div>
)}
<NextStepButton
content={nextButton}
waiting={waiting}
/>
</div>
{footerContent && (
<div className="join-flow-footer-message">
{footerContent}
</div>
)}
<NextStepButton
content={nextButton}
waiting={waiting}
/>
</form>
);
JoinFlowStep.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
description: PropTypes.string,
footerContent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
headerImgSrc: PropTypes.string,
infoMessage: PropTypes.string,
innerContentClassName: PropTypes.string,
innerClassName: PropTypes.string,
nextButton: PropTypes.node,
onSubmit: PropTypes.func,
title: PropTypes.string,

22
src/components/join-flow/join-flow-step.scss
View file

@ -1,6 +1,19 @@
@import "../../colors";
@import "../../frameless";
.join-flow-outer-content {
height: 32.5rem;
}
.join-flow-inner-content {
box-shadow: none;
width: calc(100% - 5.875rem);
/* must use padding for top, rather than margin, because margins will collapse */
margin: 0 auto;
padding: 2.3125rem 0 2.5rem;
font-size: .875rem;
}
.join-flow-title {
color: $type-gray;
font-size: 1.875rem;
@ -15,15 +28,6 @@
text-align: center;
}
.join-flow-inner-content {
box-shadow: none;
width: calc(100% - 5.875rem);
/* must use padding for top, rather than margin, because margins will collapse */
margin: 0 auto;
padding: 2.3125rem 0 2.5rem;
font-size: .875rem;
}
/* overflow will only work if this class is set on parent of img, not img itself */
.join-flow-header-image {
width: 100%;

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

@ -74,8 +74,29 @@
margin: 0 auto;
}
.join-flow-gender-step {
.join-flow-inner-username-step {
padding-top: 2.75rem;
}
.join-flow-inner-birthdate-step {
padding-top: 3.5rem;
}
.join-flow-inner-gender-step {
/* need height so that flex will adjust children proportionately */
height: 27.375rem;
padding-top: 2.5rem;
}
.join-flow-inner-country-step {
padding-top: 3.25rem;
}
.join-flow-inner-email-step {
padding-top: 3rem;
}
.join-flow-inner-welcome-step {
padding-top: 3rem;
}

1
src/components/join-flow/username-step.jsx
View file

@ -118,6 +118,7 @@ class UsernameStep extends React.Component {
description={this.props.intl.formatMessage({
id: 'registration.usernameStepDescriptionNonEducator'
})}
innerClassName="join-flow-inner-username-step"
title={this.props.intl.formatMessage({id: 'general.joinScratch'})}
waiting={isSubmitting}
onSubmit={handleSubmit}

1
src/components/join-flow/welcome-step.jsx
View file

@ -45,6 +45,7 @@ class WelcomeStep extends React.Component {
id: 'registration.welcomeStepDescriptionNonEducator'
})}
headerImgSrc="/images/hoc/getting-started.jpg"
innerClassName="join-flow-inner-welcome-step"
nextButton={
<React.Fragment>
<FormattedMessage id="registration.makeProject" />