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

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

@ -13,7 +13,34 @@
&:last-child {
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 {