Skip to content

Commit

Permalink
Remove bootstrap cols for bank form
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicofrand
nicofrand committed Aug 6, 2018
1 parent 8077f3a commit f3b6fbf
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 69 deletions.
125 changes: 56 additions & 69 deletions client/components/settings/bank-accesses/form.js
View file
Expand Up @@ -185,21 +185,19 @@ class InitForm extends React.Component {
let maybeCategories = null;
if (this.props.isOnboarding) {
maybeCategories = (
<div className="row">
<div className="col-sm-12">
<input
type="checkbox"
id="default-categories"
checked={this.state.defaultCategoriesEnabled}
onChange={this.handleChangeDefaultCategories}
/>{' '}
<label htmlFor="default-categories">
{$t('client.accountwizard.default_categories')}
</label>
<p>
<small>{$t('client.accountwizard.default_categories_desc')}</small>
</p>
</div>
<div>
<input
type="checkbox"
id="default-categories"
checked={this.state.defaultCategoriesEnabled}
onChange={this.handleChangeDefaultCategories}
/>{' '}
<label htmlFor="default-categories">
{$t('client.accountwizard.default_categories')}
</label>
<p>
<small>{$t('client.accountwizard.default_categories_desc')}</small>
</p>
</div>
);
}
Expand All @@ -209,10 +207,10 @@ class InitForm extends React.Component {
let maybeEmailField = null;
if (this.state.defaultAlertsEnabled) {
maybeEmailField = (
<div>
<div className="alert-email">
<label htmlFor="email">{$t('client.settings.emails.send_to')}</label>
<input
type="text"
type="email"
className="form-element-block"
id="email"
placeholder="me@example.com"
Expand All @@ -223,8 +221,8 @@ class InitForm extends React.Component {
);
}
maybeAlerts = (
<div className="row">
<div className="col-sm-12">
<React.Fragment>
<div>
<input
type="checkbox"
id="default-alerts"
Expand All @@ -237,75 +235,64 @@ class InitForm extends React.Component {
<p>
<small>{$t('client.accountwizard.default_alerts_desc')}</small>
</p>
{maybeEmailField}
</div>
</div>
{maybeEmailField}
</React.Fragment>
);
}

return (
<form className="initform" ref={this.refForm} onSubmit={this.handleSubmit}>
<div className="form-group has-overflow">
<div className="row">
<div className="col-sm-3">
<label htmlFor="bank">{$t('client.accountwizard.bank')}</label>
</div>
<div className="col-sm-9">
<FuzzyOrNativeSelect
id="bank"
className="bankSelect form-element-block"
onChange={this.handleChangeBank}
placeholder={$t('client.general.select')}
clearValueText={$t('client.search.clear')}
clearable={true}
value={selectedBankDescr && selectedBankDescr.uuid}
options={options}
matchProp="label"
noResultsText={$t('client.accountwizard.no_bank_found')}
/>
</div>
</div>
<div className="bank">
<label htmlFor="bank">{$t('client.accountwizard.bank')}</label>
<FuzzyOrNativeSelect
id="bank"
className="bankSelect form-element-block"
onChange={this.handleChangeBank}
placeholder={$t('client.general.select')}
clearValueText={$t('client.search.clear')}
clearable={true}
value={selectedBankDescr && selectedBankDescr.uuid}
options={options}
matchProp="label"
noResultsText={$t('client.accountwizard.no_bank_found')}
/>
</div>

<div className="form-group">
<div className="row">
<div className="col-sm-6">
<label htmlFor="id">{$t('client.settings.login')}</label>
<input
type="text"
className="form-element-block"
placeholder="123456789"
id="id"
onChange={this.handleChangeLogin}
/>
</div>

<div className="col-sm-6">
<label htmlFor="password">{$t('client.settings.password')}</label>
<PasswordInput
onChange={this.handleChangePassword}
id="password"
className="block"
/>
</div>
<div className="credentials">
<div>
<label htmlFor="id">{$t('client.settings.login')}</label>
<input
type="text"
className="form-element-block"
placeholder="123456789"
id="id"
onChange={this.handleChangeLogin}
/>
</div>

<div>
<label htmlFor="password">{$t('client.settings.password')}</label>
<PasswordInput
onChange={this.handleChangePassword}
id="password"
className="block"
/>
</div>
</div>

{maybeCustomFields}
{maybeCategories}
{maybeAlerts}

<div className="form-group">
{maybeCategories}
{maybeAlerts}
</div>

<div className="buttons-toolbar">
<p className="buttons-toolbar">
<input
type="submit"
className="btn btn-primary"
value={$t('client.settings.add_bank_button')}
disabled={isDisabledSubmit}
/>
</div>
</p>
</form>
);
}
Expand Down
43 changes: 43 additions & 0 deletions client/themes/default/style.css
View file
Expand Up @@ -1647,6 +1647,49 @@ span.fa-star {
background-color: #dbae34;
}

/* Bank creation form */
.initform > div {
margin-bottom: 1em;
}

.initform > div:last-child {
margin-bottom: 0;
}

.initform > div.bank,
.initform > div.alert-email {
display: grid;
grid-template-columns: 3fr 9fr;
}

.initform > div.credentials {
display: grid;
grid-template-columns: 6fr 6fr;
grid-gap: 2em;
}

.initform input[type="checkbox"] {
margin-top: 0;
vertical-align: middle;
}

.initform input[type="checkbox"] + label {
display: inline;
}

@media (max-width: 768px) {
.initform > div.bank,
.initform > div.credentials,
.initform > div.alert-email {
grid-template-columns: 12fr;
grid-gap: 0;
}

.initform > div.credentials > div:not(:first-child) {
margin-top: 1em;
}
}

.initform .btn,
.accountwizard-import .btn,
.accountwizard-newbank .btn {
Expand Down

0 comments on commit f3b6fbf

Please sign in to comment.