fix: input + label alignment
This commit is contained in:
parent
b67eeeaa68
commit
9658cefa55
|
@ -63,7 +63,7 @@ class FileSelector extends React.PureComponent<Props> {
|
||||||
type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
|
type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormRow verticallyCentered padded>
|
<FormRow>
|
||||||
<Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
|
<Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
|
||||||
<input
|
<input
|
||||||
webkitdirectory="true"
|
webkitdirectory="true"
|
||||||
|
|
|
@ -95,7 +95,7 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
<Form onSubmit={this.handleSubmit}>
|
<Form onSubmit={this.handleSubmit}>
|
||||||
<FormRow padded verticallyCentered>
|
<FormRow padded>
|
||||||
<FormField type="select" name="country-codes" onChange={this.handleSelect}>
|
<FormField type="select" name="country-codes" onChange={this.handleSelect}>
|
||||||
{countryCodes.map(country => (
|
{countryCodes.map(country => (
|
||||||
<option key={country.countryCallingCode} value={country.countryCallingCode}>
|
<option key={country.countryCallingCode} value={country.countryCallingCode}>
|
||||||
|
|
|
@ -73,7 +73,7 @@ class WalletSend extends React.PureComponent<Props> {
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</FormRow>
|
</FormRow>
|
||||||
<FormRow padded>
|
<FormRow>
|
||||||
<FormField
|
<FormField
|
||||||
type="text"
|
type="text"
|
||||||
name="address"
|
name="address"
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import * as SETTINGS from 'constants/settings';
|
import * as SETTINGS from 'constants/settings';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { FormField, FormFieldPrice } from 'component/common/form';
|
import { FormField, FormFieldPrice, FormRow } from 'component/common/form';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import Page from 'component/page';
|
import Page from 'component/page';
|
||||||
import FileSelector from 'component/common/file-selector';
|
import FileSelector from 'component/common/file-selector';
|
||||||
|
@ -287,6 +287,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className="card__content">
|
<div className="card__content">
|
||||||
|
<FormRow>
|
||||||
<FormField
|
<FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="autoplay"
|
name="autoplay"
|
||||||
|
@ -294,7 +295,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
checked={autoplay}
|
checked={autoplay}
|
||||||
postfix={__('Autoplay media files')}
|
postfix={__('Autoplay media files')}
|
||||||
/>
|
/>
|
||||||
|
</FormRow>
|
||||||
|
|
||||||
|
<FormRow>
|
||||||
<FormField
|
<FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="auto_download"
|
name="auto_download"
|
||||||
|
@ -302,7 +305,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
checked={autoDownload}
|
checked={autoDownload}
|
||||||
postfix={__('Automatically download new content from your subscriptions')}
|
postfix={__('Automatically download new content from your subscriptions')}
|
||||||
/>
|
/>
|
||||||
|
</FormRow>
|
||||||
|
|
||||||
|
<FormRow>
|
||||||
<FormField
|
<FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="show_nsfw"
|
name="show_nsfw"
|
||||||
|
@ -313,6 +318,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction. '
|
'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction. '
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
</FormRow>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
@ -359,6 +365,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className="card__content">
|
<div className="card__content">
|
||||||
|
<FormRow>
|
||||||
<FormField
|
<FormField
|
||||||
name="theme_select"
|
name="theme_select"
|
||||||
type="select"
|
type="select"
|
||||||
|
@ -372,6 +379,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</FormField>
|
</FormField>
|
||||||
|
</FormRow>
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
+ .card__content {
|
+ .card__content {
|
||||||
padding-top: var(--spacing-vertical-medium);
|
margin-top: var(--spacing-vertical-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.card__header--flat) {
|
&:not(.card__header--flat) {
|
||||||
|
|
|
@ -1,8 +1,4 @@
|
||||||
.form-field {
|
.form-field {
|
||||||
&:not(:last-of-type) {
|
|
||||||
margin-bottom: var(--spacing-vertical-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.form-field--disabled {
|
&.form-field--disabled {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -91,6 +87,12 @@
|
||||||
padding-left: var(--spacing-vertical-small);
|
padding-left: var(--spacing-vertical-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Keeps radio buttons aligned with the labels
|
||||||
|
// This can probably be done in a better way, but after setting align-items: center on the parent, the label is still off a bit.
|
||||||
|
input[type='radio'] + .form-field__postfix {
|
||||||
|
padding-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.form-field__select-wrapper {
|
.form-field__select-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
.form-row {
|
.form-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
&:not(&--vertically-centered) {
|
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|
||||||
|
&:not(.form-row--padded):not(:last-of-type) {
|
||||||
|
margin-bottom: var(--spacing-vertical-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-field {
|
.form-field {
|
||||||
|
@ -32,8 +33,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row--padded {
|
.form-row--padded {
|
||||||
padding-top: var(--spacing-vertical-medium);
|
// Ignore the class name, margin allows these to collapse with other items
|
||||||
padding-bottom: var(--spacing-vertical-medium);
|
margin-top: var(--spacing-vertical-large);
|
||||||
|
margin-bottom: var(--spacing-vertical-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row--right {
|
.form-row--right {
|
||||||
|
|
Loading…
Reference in a new issue