diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index b0a0a125aa..31cd12c100 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -2,8 +2,13 @@ .root { display: flex; - justify-content: space-between; + flex-direction: column; background-color: var(--matterColorBright); +} + +.filterWrapper { + display: flex; + justify-content: space-between; position: relative; } @@ -24,6 +29,8 @@ line-height: 20px; margin-top: 9px; margin-bottom: 11px; + margin-left: auto; + margin-right: 8px; /* parent uses flexbox: this defines minimum width for text "6 results" */ flex-basis: 55px; diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index 4a262d2f90..d0478147b6 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -69,7 +69,7 @@ const SearchFiltersComponent = props => { } = props; const hasNoResult = listingsAreLoaded && resultsCount === 0; - const classes = classNames(rootClassName || css.root, { [css.longInfo]: hasNoResult }, className); + const classes = classNames(rootClassName || css.root, className); const keywordLabel = intl.formatMessage({ id: 'SearchFilters.keywordLabel', @@ -197,22 +197,23 @@ const SearchFiltersComponent = props => { return (
-
- {priceFilterElement} - {dateRangeFilterElement} - {keywordFilterElement} - {toggleSearchFiltersPanelButton} -
- - {sortBy} - - {listingsAreLoaded && resultsCount > 0 ? ( -
- - - +
+
+ {priceFilterElement} + {dateRangeFilterElement} + {keywordFilterElement} + {toggleSearchFiltersPanelButton}
- ) : null} + + {listingsAreLoaded && resultsCount > 0 ? ( +
+ + + +
+ ) : null} + {sortBy} +
{hasNoResult ? (
diff --git a/src/components/SortBy/SortByPopup.css b/src/components/SortBy/SortByPopup.css index a9cde4197b..7970a600a7 100644 --- a/src/components/SortBy/SortByPopup.css +++ b/src/components/SortBy/SortByPopup.css @@ -1,13 +1,6 @@ @import '../../marketplace.css'; .root { - display: inline-block; - margin-left: auto; - margin-right: 8px; - - &:last-of-type { - padding-right: 0; - } } .icon { @@ -84,7 +77,6 @@ color: var(--matterColor); margin-left: 30px; margin-right: 30px; - margin-bottom: 24px; } .menuItem {