maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-31 02:26:50 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move search filter padding to the filter container

Browse source
This commit is contained in:
Hannu Lyytikainen 2018-01-12 10:54:06 +02:00
parent 5cc6ecc973
commit fe0bbbe324
3 changed files with 7 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/SearchFilters/SearchFilters.css
View file

@ -4,17 +4,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: var(--matterColorBright); background-color: var(--matterColorBright);
/* sticky result summary in mobile */
position: sticky;
top: 0;
z-index: 11;
@media (--viewportMedium) {
position: static;
top: unset;
z-index: unset;
}
} }
.searchResultSummary { .searchResultSummary {

2
src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.js
View file

@ -22,7 +22,7 @@ class SelectSingleFilterMobileComponent extends Component {
intl, intl,
} = this.props; } = this.props;
const selectOption = option => { const selectOption = (option) => {
onSelect(customAttribute, option); onSelect(customAttribute, option);
}; };

16
src/containers/SearchPage/SearchPage.css
View file

@ -31,10 +31,10 @@
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 2px 24px 96px 24px; padding: 2px 0 96px 0;
@media (--viewportMedium) { @media (--viewportMedium) {
padding: 18px 24px 96px 24px; padding: 18px 0 96px 0;
/** /**
* .container is using flexbox, * .container is using flexbox,
* This specifies that searchResultContainer is taking 60% from the viewport width * This specifies that searchResultContainer is taking 60% from the viewport width
@ -64,25 +64,20 @@
.searchFilters { .searchFilters {
display: none; display: none;
padding: 16px 0;
@media (--viewportMedium) { @media (--viewportMedium) {
display: block; display: flex;
padding: 0; padding: 0 24px;
margin-top: 3px; margin-top: 3px;
margin-bottom: 21px; margin-bottom: 21px;
} }
} }
.searchFiltersMobile { .searchFiltersMobile {
padding: 16px 0; padding: 16px 24px;
@media (--viewportMedium) { @media (--viewportMedium) {
display: none; display: none;
padding: 0;
margin-top: 3px;
margin-bottom: 21px;
} }
} }
@ -90,6 +85,7 @@
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 24px;
} }
.newSearchInProgress { .newSearchInProgress {