NPO-Accounting/houdini
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix bootstrap and make inputs larger

Browse source
This commit is contained in:
Eric Schultz 2018-10-01 15:04:04 -05:00
parent 1f4314a31e
commit 60760fbb8d
5 changed files with 26 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
javascripts/src/components/registration_page/NonprofitInfoForm.tsx
View file

@ -51,34 +51,44 @@ class NonprofitInfoForm extends React.Component<NonprofitInfoFormProps & Injecte
render() { render() {
return <fieldset > return <fieldset >
<BasicField field={this.props.form.$("organization_name")} <BasicField field={this.props.form.$("organization_name")}
label={this.props.intl.formatMessage({id:'registration.wizard.nonprofit.name.label' })} label={this.props.intl.formatMessage({id:'registration.wizard.nonprofit.name.label' })}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.name.placeholder'})} placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.name.placeholder'})}
inputClassNames={"input-lg"}
/> />
<BasicField field={this.props.form.$('website')} <BasicField field={this.props.form.$('website')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.website.label'})} label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.website.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.website.placeholder'})}/> placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.website.placeholder'})}
inputClassNames={"input-lg"}/>
<TwoColumnFields> <TwoColumnFields>
<BasicField field={this.props.form.$('org_email')} <BasicField field={this.props.form.$('org_email')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.email.label'})} label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.email.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.email.placeholder'})}/> placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.email.placeholder'})}
inputClassNames={"input-lg"}/>
<BasicField field={this.props.form.$('org_phone')} <BasicField field={this.props.form.$('org_phone')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.phone.label'})} label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.phone.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.phone.placeholder'})}/> placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.phone.placeholder'})}
inputClassNames={"input-lg"}/>
</TwoColumnFields> </TwoColumnFields>
<ThreeColumnFields> <ThreeColumnFields>
<BasicField field={this.props.form.$('city')} <BasicField field={this.props.form.$('city')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.city.label'})} label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.city.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.city.placeholder'})}/> placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.city.placeholder'})}
inputClassNames={"input-lg"}/>
<BasicField field={this.props.form.$('state')} <BasicField field={this.props.form.$('state')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.state.label'})} label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.state.label'})}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.state.placeholder'})}/> placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.state.placeholder'})}
inputClassNames={"input-lg"}/>
<BasicField field={this.props.form.$('zip')} <BasicField field={this.props.form.$('zip')}
label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.zip.label' })} label={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.zip.label' })}
placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.zip.placeholder'})}/> placeholder={this.props.intl.formatMessage({id: 'registration.wizard.nonprofit.zip.placeholder'})}
inputClassNames={"input-lg"}/>
</ThreeColumnFields> </ThreeColumnFields>
<ProgressableButton onClick={this.props.form.onSubmit} className="button" disabled={!this.props.form.isValid} buttonText={this.props.intl.formatMessage({id: this.props.buttonText})} <ProgressableButton onClick={this.props.form.onSubmit} className="button" disabled={!this.props.form.isValid} buttonText={this.props.intl.formatMessage({id: this.props.buttonText})}
inProgress={this.props.form.submitting || this.props.form.container().submitting} disableOnProgress={true}/> inProgress={this.props.form.submitting || this.props.form.container().submitting} disableOnProgress={true}/>
</fieldset> </fieldset>

2
javascripts/src/components/registration_page/RegistrationPage.tsx
View file

@ -16,7 +16,7 @@ class RegistrationPage extends React.Component<RegistrationPageProps & InjectedI
render() { render() {
return <div className="container"><h1><FormattedMessage id="registration.get_started.header"/></h1><p><FormattedMessage id="registration.get_started.description"/></p><RegistrationWizard/></div> return <div className="tw-bs"><div className="container"><h1><FormattedMessage id="registration.get_started.header"/></h1><p><FormattedMessage id="registration.get_started.description"/></p><RegistrationWizard/></div></div>
} }
} }

6
javascripts/src/components/registration_page/UserInfoForm.tsx
View file

@ -47,18 +47,22 @@ class UserInfoForm extends React.Component<UserInfoFormProps & InjectedIntlProps
<BasicField field={this.props.form.$("name")} <BasicField field={this.props.form.$("name")}
label={ label={
this.props.intl.formatMessage({id: "registration.wizard.contact.name.label"})} this.props.intl.formatMessage({id: "registration.wizard.contact.name.label"})}
placeholder={this.props.intl.formatMessage({id: "registration.wizard.contact.name.placeholder"})}/> placeholder={this.props.intl.formatMessage({id: "registration.wizard.contact.name.placeholder"})}
inputClassNames={"input-lg"}/>
<BasicField field={this.props.form.$('email')} <BasicField field={this.props.form.$('email')}
label={this.props.intl.formatMessage({id: "registration.wizard.contact.email.label"})} label={this.props.intl.formatMessage({id: "registration.wizard.contact.email.label"})}
placeholder={this.props.intl.formatMessage({id: "registration.wizard.contact.email.placeholder"})} placeholder={this.props.intl.formatMessage({id: "registration.wizard.contact.email.placeholder"})}
inputClassNames={"input-lg"}
/> />
</TwoColumnFields> </TwoColumnFields>
<BasicField field={this.props.form.$('password')} <BasicField field={this.props.form.$('password')}
label={this.props.intl.formatMessage({id:'registration.wizard.contact.password.label'})} label={this.props.intl.formatMessage({id:'registration.wizard.contact.password.label'})}
inputClassNames={"input-lg"}
/> />
<BasicField field={this.props.form.$('password_confirmation')} <BasicField field={this.props.form.$('password_confirmation')}
label={this.props.intl.formatMessage({id:'registration.wizard.contact.password_confirmation.label'})} label={this.props.intl.formatMessage({id:'registration.wizard.contact.password_confirmation.label'})}
inputClassNames={"input-lg"}
/> />

4
javascripts/src/components/session_login_page/SessionLoginForm.tsx
View file

@ -105,9 +105,9 @@ class InnerSessionLoginForm extends React.Component<SessionLoginFormProps & Inje
return <form onSubmit={this.form.onSubmit}> return <form onSubmit={this.form.onSubmit}>
<BasicField field={this.form.$('email')} <BasicField field={this.form.$('email')}
label={this.props.intl.formatMessage({id: 'login.email'})}/> label={this.props.intl.formatMessage({id: 'login.email'})} inputClassNames={"input-lg"}/>
<BasicField field={this.form.$('password')} <BasicField field={this.form.$('password')}
label={this.props.intl.formatMessage({id: 'login.password'})}/> label={this.props.intl.formatMessage({id: 'login.password'})} inputClassNames={"input-lg"}/>
{errorDiv} {errorDiv}
<div className={'form-group'}> <div className={'form-group'}>
<ProgressableButton onClick={this.form.onSubmit} className="button" disabled={!this.form.isValid || this.form.submitting} inProgress={this.form.submitting} <ProgressableButton onClick={this.form.onSubmit} className="button" disabled={!this.form.isValid || this.form.submitting} inProgress={this.form.submitting}

4
javascripts/src/components/session_login_page/SessionLoginPage.tsx
View file

@ -11,11 +11,11 @@ export interface SessionLoginPageProps
class SessionLoginPage extends React.Component<SessionLoginPageProps & InjectedIntlProps, {}> { class SessionLoginPage extends React.Component<SessionLoginPageProps & InjectedIntlProps, {}> {
render() { render() {
return <div className="container"><div className="row"><div className={'col-sm-6'}> return <div className="tw-bs"><div className="container"><div className="row"><div className={'col-sm-6'}>
<h1><FormattedMessage id="login.header"/></h1> <h1><FormattedMessage id="login.header"/></h1>
<SessionLoginForm buttonText="login.login" buttonTextOnProgress="login.logging_in"/> <SessionLoginForm buttonText="login.login" buttonTextOnProgress="login.logging_in"/>
</div></div> </div></div>
</div>; </div></div>;
} }
} }