diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index 3185fb71..bc2b33ca 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -3,28 +3,7 @@ .root { display: flex; justify-content: space-between; - height: 40px; -} - -.searchResultSummary { - @apply --marketplaceH4FontStyles; - line-height: 20px; - margin-top: 9px; - - display: none; - - @media (--viewportMedium) { - display: block; - } -} - -.searchResultSummaryMobile { - display: flex; - justify-content: space-between; - background-color: var(--matterColorBright); - width: 100vw; - padding: 1px 24px 14px 24px; /* sticky result summary in mobile */ position: sticky; @@ -32,10 +11,28 @@ z-index: 9; @media (--viewportMedium) { - display: none; + position: unset; + top: unset; + z-index: unset; } } +.searchResultSummary { + @apply --marketplaceH4FontStyles; + line-height: 20px; + margin-top: 9px; +} + +.searchResultSummaryMobile { + @apply --marketplaceH3FontStyles; + margin-top: 8px; + + display: flex; + justify-content: space-between; + + background-color: var(--matterColorBright); +} + .mapIcon { /* Font */ @apply --marketplaceTinyFontStyles; @@ -48,6 +45,6 @@ border-radius: 3px; width: 72px; height: 35px; - margin-top: 23px; padding: 9px 22px; + margin: 0; } diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index 052042f4..4025131d 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -9,8 +9,11 @@ import { SelectSingleCustomAttribute } from '../../components'; import routeConfiguration from '../../routeConfiguration'; import { createResourceLocatorString } from '../../util/routes'; import config from '../../config'; +import { withViewport } from '../../util/contextHelpers'; import css from './SearchFilters.css'; +const MAX_MOBILE_SCREEN_WIDTH = 768; + const SearchFiltersComponent = props => { const { rootClassName, @@ -20,9 +23,12 @@ const SearchFiltersComponent = props => { resultsCount, searchInProgress, onMapIconClick, + viewport, history, } = props; + const isMobileLayout = viewport.width < MAX_MOBILE_SCREEN_WIDTH; + const loadingResults = ; const resultsFound = ( @@ -32,9 +38,7 @@ const SearchFiltersComponent = props => { const noResults = ; const resultsFoundMobile = ( -

- -

+ ); const classes = classNames(rootClassName || css.root, className); @@ -63,7 +67,7 @@ const SearchFiltersComponent = props => { /> ) : null; - return ( + const desktopFilters = (
{categoryFilter}
@@ -72,19 +76,25 @@ const SearchFiltersComponent = props => { {listingsAreLoaded && resultsCount === 0 ? noResults : null} {searchInProgress ? loadingResults : null}
+ + ); + const mobileFilters = ( +
-
- {listingsAreLoaded && resultsCount > 0 ? resultsFoundMobile : null} - {listingsAreLoaded && resultsCount === 0 ? noResults : null} - {searchInProgress ? loadingResults : null} -
-
- -
+ {listingsAreLoaded && resultsCount > 0 ? resultsFoundMobile : null} + {listingsAreLoaded && resultsCount === 0 ? noResults : null} + {searchInProgress ? loadingResults : null} +
+
+
); + + const filters = isMobileLayout ? mobileFilters : desktopFilters; + + return filters; }; const { object, string, bool, number, func, shape } = PropTypes; @@ -105,12 +115,18 @@ SearchFiltersComponent.propTypes = { searchingInProgress: bool, onMapIconClick: func.isRequired, + // form withViewport + viewport: shape({ + width: number.isRequired, + height: number.isRequired, + }).isRequired, + // from withRouter history: shape({ push: func.isRequired, }).isRequired, }; -const SearchFilters = withRouter(SearchFiltersComponent); +const SearchFilters = withViewport(withRouter(SearchFiltersComponent)); export default SearchFilters; diff --git a/src/components/SelectSingleCustomAttribute/SelectSingleCustomAttribute.css b/src/components/SelectSingleCustomAttribute/SelectSingleCustomAttribute.css index 58008438..80869310 100644 --- a/src/components/SelectSingleCustomAttribute/SelectSingleCustomAttribute.css +++ b/src/components/SelectSingleCustomAttribute/SelectSingleCustomAttribute.css @@ -15,6 +15,7 @@ padding: 0 16px 2px 16px; width: auto; + height: 40px; min-height: 0; border-radius: 4px; @@ -34,6 +35,7 @@ padding: 0 16px 2px 16px; width: auto; + height: 40px; min-height: 0; border-radius: 4px; } diff --git a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap index 31c8163d..25401370 100644 --- a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap +++ b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap @@ -20,7 +20,7 @@ exports[`SearchPageComponent matches snapshot 1`] = `
-