Connect labels with their form fields

This commit is contained in:
Franz Liedke 2020-01-24 15:26:20 +01:00
parent e70444d934
commit 1e6d7efdc0
2 changed files with 13 additions and 14 deletions

View File

@ -73,8 +73,10 @@ export default class MailPage extends Page {
className: 'MailPage-MailSettings', className: 'MailPage-MailSettings',
children: [ children: [
<div className="MailPage-MailSettings-input"> <div className="MailPage-MailSettings-input">
<label>{app.translator.trans('core.admin.email.from_label')}</label> <label>
<input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} /> {app.translator.trans('core.admin.email.from_label')}
<input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} />
</label>
</div> </div>
] ]
})} })}
@ -84,8 +86,10 @@ export default class MailPage extends Page {
className: 'MailPage-MailSettings', className: 'MailPage-MailSettings',
children: [ children: [
<div className="MailPage-MailSettings-input"> <div className="MailPage-MailSettings-input">
<label>{app.translator.trans('core.admin.email.driver_label')}</label> <label>
<Select value={this.values.mail_driver()} options={Object.keys(this.driverFields).reduce((memo, val) => ({...memo, [val]: val}), {})} onchange={this.values.mail_driver} /> {app.translator.trans('core.admin.email.driver_label')}
<Select value={this.values.mail_driver()} options={Object.keys(this.driverFields).reduce((memo, val) => ({...memo, [val]: val}), {})} onchange={this.values.mail_driver} />
</label>
</div> </div>
] ]
})} })}
@ -101,8 +105,10 @@ export default class MailPage extends Page {
children: [ children: [
<div className="MailPage-MailSettings-input"> <div className="MailPage-MailSettings-input">
{fieldKeys.map(field => [ {fieldKeys.map(field => [
<label>{app.translator.trans(`core.admin.email.${field}_label`)}</label>, <label>
this.renderField(field), {app.translator.trans(`core.admin.email.${field}_label`)}
{this.renderField(field)}
</label>,
this.status.errors[field] && <p className='ValidationError'>{this.status.errors[field]}</p>, this.status.errors[field] && <p className='ValidationError'>{this.status.errors[field]}</p>,
])} ])}
</div> </div>

View File

@ -22,18 +22,11 @@
.MailPage-MailSettings-input { .MailPage-MailSettings-input {
label { label {
margin-bottom: 5px; display: block;
}
.FormControl {
margin-bottom: 7px; margin-bottom: 7px;
} }
.Select { .Select {
display: block; display: block;
} }
:last-child {
margin-bottom: 0;
}
} }