diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index 73b3a398..98181b9a 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -4,11 +4,64 @@ display: flex; justify-content: space-between; background-color: var(--matterColorBright); + position: relative; +} + +.longInfo { + flex-wrap: wrap; +} + +.filters { + & > *:not(:last-child) { + margin-right: 8px; + margin-bottom: 8px; + height: auto; + } } .searchResultSummary { @apply --marketplaceH4FontStyles; line-height: 20px; - margin-top: 11px; - margin-bottom: 13px; + margin-top: 9px; + margin-bottom: 11px; + + /* parent uses flexbox: this defines minimum width for text "6 results" */ + flex-basis: 55px; + flex-shrink: 0; +} + +.noSearchResults { + @apply --marketplaceH4FontStyles; + + /* Reserves 48px of vertical space */ + line-height: 20px; + margin-top: 16px; + margin-bottom: 12px; + + /* parent uses flexbox: this defines minimum width for text "6 results" */ + flex-basis: 100%; + flex-shrink: 0; +} + +.loadingResults { + @apply --marketplaceH4FontStyles; + line-height: 20px; + + /* Cover parent element's space*/ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + + /* Layout */ + padding: 9px 24px 0 24px; + margin: 0; + background-color: var(--matterColorBright); +} + +.resultsFound { + white-space: nowrap; } diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index 64140899..12205f00 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -31,15 +31,8 @@ const SearchFiltersComponent = props => { intl, } = props; - const loadingResults = ; - - const resultsFound = ( - - ); - - const noResults = ; - - const classes = classNames(rootClassName || css.root, className); + const hasNoResult = listingsAreLoaded && resultsCount === 0; + const classes = classNames(rootClassName || css.root, { [css.longInfo]: hasNoResult }, className); const categoryLabel = intl.formatMessage({ id: 'SearchFilters.categoryLabel', @@ -104,11 +97,25 @@ const SearchFiltersComponent = props => { {amenitiesFilter} -
- {listingsAreLoaded && resultsCount > 0 ? resultsFound : null} - {listingsAreLoaded && resultsCount === 0 ? noResults : null} - {searchInProgress ? loadingResults : null} -
+ {listingsAreLoaded && resultsCount > 0 ? ( +
+ + + +
+ ) : null} + + {hasNoResult ? ( +
+ +
+ ) : null} + + {searchInProgress ? ( +
+ +
+ ) : null} ); }; @@ -129,7 +136,6 @@ SearchFiltersComponent.propTypes = { listingsAreLoaded: bool.isRequired, resultsCount: number, searchingInProgress: bool, - onMapIconClick: func.isRequired, onManageDisableScrolling: func.isRequired, categories: array, amenities: array, diff --git a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css index 777e23b0..a512f850 100644 --- a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css +++ b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css @@ -1,15 +1,19 @@ @import '../../marketplace.css'; .root { - padding-bottom: 16px; - margin-top: 30px; + padding-top: 24px; + padding-bottom: 17px; border-bottom: 1px solid var(--matterColorNegative); } .filterLabel, .filterLabelSelected { @apply --marketplaceH3FontStyles; - margin-bottom: 16px; + + /* Baseline adjustment for label text */ + margin-top: 0; + margin-bottom: 12px; + padding: 4px 0 2px 0; } .filterLabel { @@ -26,11 +30,13 @@ text-align: left; border: none; padding: 0; + cursor: pointer; } .optionsContainerOpen { - padding-left: 20px; height: auto; + padding-left: 20px; + padding-bottom: 30px; } .optionsContainerClosed { diff --git a/src/components/SelectSingleFilter/SelectSingleFilter.css b/src/components/SelectSingleFilter/SelectSingleFilter.css index c50c95c3..06edfcff 100644 --- a/src/components/SelectSingleFilter/SelectSingleFilter.css +++ b/src/components/SelectSingleFilter/SelectSingleFilter.css @@ -2,7 +2,6 @@ .root { display: inline-block; - padding-right: 8px; &:last-of-type { padding-right: 0; diff --git a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css index e2f281d2..c726fdf6 100644 --- a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css +++ b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css @@ -1,15 +1,19 @@ @import '../../marketplace.css'; .root { - padding-bottom: 16px; - margin-top: 30px; + padding-top: 24px; + padding-bottom: 17px; border-bottom: 1px solid var(--matterColorNegative); } .filterLabel, .filterLabelSelected { @apply --marketplaceH3FontStyles; - margin-bottom: 16px; + + /* Baseline adjustment for label text */ + margin-top: 0; + margin-bottom: 12px; + padding: 4px 0 2px 0; } .filterLabel { @@ -26,10 +30,12 @@ text-align: left; border: none; padding: 0; + cursor: pointer; } .optionsContainerOpen { height: auto; + padding-bottom: 30px; } .optionsContainerClosed { @@ -82,10 +88,6 @@ &:hover .menuItemBorder { width: 6px; } - - &:last-child { - margin-bottom: 18px; - } } .clearButton { diff --git a/src/containers/SearchPage/SearchPage.css b/src/containers/SearchPage/SearchPage.css index bf3a5253..0a700f65 100644 --- a/src/containers/SearchPage/SearchPage.css +++ b/src/containers/SearchPage/SearchPage.css @@ -56,11 +56,6 @@ .error { color: var(--failColor); - padding-left: 24px; - - @media (--viewportMedium) { - padding-left: 36px; - } } .searchString { diff --git a/src/containers/SearchPage/SearchPage.js b/src/containers/SearchPage/SearchPage.js index c9209182..8010f6f6 100644 --- a/src/containers/SearchPage/SearchPage.js +++ b/src/containers/SearchPage/SearchPage.js @@ -350,7 +350,6 @@ export class SearchPageComponent extends Component { resultsCount={totalItems} searchInProgress={searchInProgress} searchListingsError={searchListingsError} - onMapIconClick={onMapIconClick} onManageDisableScrolling={onManageDisableScrolling} categories={categories} amenities={amenities} diff --git a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap index 82d5c319..f8be673d 100644 --- a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap +++ b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap @@ -47,7 +47,6 @@ exports[`SearchPageComponent matches snapshot 1`] = ` } listingsAreLoaded={true} onManageDisableScrolling={[Function]} - onMapIconClick={[Function]} resultsCount={22} searchInProgress={false} searchListingsError={null}