bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styles on filter form

Browse source
This commit is contained in:
Mary Kate 2020-08-04 21:57:54 -05:00
parent 69184ef97c
commit ab3f53cb27
2 changed files with 71 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
app/soapbox/features/filters/index.js
View file

@ -139,22 +139,24 @@ class Filters extends ImmutablePureComponent {
<div className='filter-settings-panel'> <div className='filter-settings-panel'>
<fieldset disabled={false}> <fieldset disabled={false}>
<FieldsGroup> <FieldsGroup>
<div className='two-col'>
<SimpleInput <SimpleInput
label={intl.formatMessage(messages.keyword)} label={intl.formatMessage(messages.keyword)}
required required
type='text' type='text'
name='phrase' name='phrase'
onChange={this.handleInputChange} onChange={this.handleInputChange}
/> />
<div className='input with_label required'>
<SelectDropdown <SelectDropdown
label={intl.formatMessage(messages.expires)} label={intl.formatMessage(messages.expires)}
hint={intl.formatMessage(messages.expires_hint)} hint={intl.formatMessage(messages.expires_hint)}
items={expirations} items={expirations}
defaultValue={expirations.never} defaultValue={expirations.never}
onChange={this.handleSelectChange} onChange={this.handleSelectChange}
/> />
</div>
</div>
</FieldsGroup> </FieldsGroup>
<FieldsGroup> <FieldsGroup>
@ -164,30 +166,32 @@ class Filters extends ImmutablePureComponent {
<span className='hint'> <span className='hint'>
<FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' /> <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
</span> </span>
<Checkbox <div className='two-col'>
label={intl.formatMessage(messages.home_timeline)} <Checkbox
name='home_timeline' label={intl.formatMessage(messages.home_timeline)}
checked={this.state.home_timeline} name='home_timeline'
onChange={this.handleCheckboxChange} checked={this.state.home_timeline}
/> onChange={this.handleCheckboxChange}
<Checkbox />
label={intl.formatMessage(messages.public_timeline)} <Checkbox
name='public_timeline' label={intl.formatMessage(messages.public_timeline)}
checked={this.state.public_timeline} name='public_timeline'
onChange={this.handleCheckboxChange} checked={this.state.public_timeline}
/> onChange={this.handleCheckboxChange}
<Checkbox />
label={intl.formatMessage(messages.notifications)} <Checkbox
name='notifications' label={intl.formatMessage(messages.notifications)}
checked={this.state.notifications} name='notifications'
onChange={this.handleCheckboxChange} checked={this.state.notifications}
/> onChange={this.handleCheckboxChange}
<Checkbox />
label={intl.formatMessage(messages.conversations)} <Checkbox
name='conversations' label={intl.formatMessage(messages.conversations)}
checked={this.state.conversations} name='conversations'
onChange={this.handleCheckboxChange} checked={this.state.conversations}
/> onChange={this.handleCheckboxChange}
/>
</div>
</FieldsGroup> </FieldsGroup>

27
app/styles/components/filters.scss
View file

@ -13,7 +13,34 @@
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
}
.fields-group .two-col {
display: flex;
align-items: flex-start;
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
div.input {
width: 45%;
margin-right: 20px;
.label_input {
width: 100%;
}
}
@media(max-width: 485px){
div.input {
width: 100%;
margin-right: 5px;
.label_input {
width: auto;
}
}
}
} }
.filter__container { .filter__container {