From e39801e40bbb06ce7192671416fc35d7f8731d7f Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 10:37:13 +0200 Subject: [PATCH 01/11] margin between filters --- src/components/SearchFilters/SearchFilters.css | 8 ++++++++ src/components/SelectSingleFilter/SelectSingleFilter.css | 1 - 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index 73b3a398..e4433a1a 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -6,6 +6,14 @@ background-color: var(--matterColorBright); } +.filters { + & > *:not(:last-child) { + margin-right: 8px; + margin-bottom: 8px; + height: auto; + } +} + .searchResultSummary { @apply --marketplaceH4FontStyles; line-height: 20px; 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; From 4f8f6c61d34db694bdcc92ef446104c0d681b8de Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 10:38:08 +0200 Subject: [PATCH 02/11] Remove unused prop / function --- src/components/SearchFilters/SearchFilters.js | 1 - src/containers/SearchPage/SearchPage.js | 1 - src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap | 1 - 3 files changed, 3 deletions(-) diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index 64140899..e7b8d5cc 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -129,7 +129,6 @@ SearchFiltersComponent.propTypes = { listingsAreLoaded: bool.isRequired, resultsCount: number, searchingInProgress: bool, - onMapIconClick: func.isRequired, onManageDisableScrolling: func.isRequired, categories: array, amenities: array, 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} From 3a168b882d683858fd02a8c650331de001f1b2d2 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 10:44:45 +0200 Subject: [PATCH 03/11] More space for text: n results. And some baselining --- src/components/SearchFilters/SearchFilters.css | 10 +++++++++- src/components/SearchFilters/SearchFilters.js | 4 +++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index e4433a1a..3c83ea4f 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -18,5 +18,13 @@ @apply --marketplaceH4FontStyles; line-height: 20px; margin-top: 11px; - margin-bottom: 13px; + margin-bottom: 10px; + + /* parent uses flexbox: this defines minimum width for text "6 results" */ + flex-basis: 55px; + flex-shrink: 0; +} + +.resultsFound { + white-space: nowrap; } diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index e7b8d5cc..fe5bba5f 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -34,7 +34,9 @@ const SearchFiltersComponent = props => { const loadingResults = ; const resultsFound = ( - + + + ); const noResults = ; From bf7a8336823999d644a6ef32eb5a5af6c4ee07f7 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 10:52:42 +0200 Subject: [PATCH 04/11] No search results: wrap result text to next line --- .../SearchFilters/SearchFilters.css | 15 +++++++++ src/components/SearchFilters/SearchFilters.js | 31 +++++++++---------- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index 3c83ea4f..af8f3333 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -6,6 +6,10 @@ background-color: var(--matterColorBright); } +.longInfo { + flex-wrap: wrap; +} + .filters { & > *:not(:last-child) { margin-right: 8px; @@ -25,6 +29,17 @@ flex-shrink: 0; } +.noSearchResults { + @apply --marketplaceH4FontStyles; + line-height: 20px; + margin-top: 13px; + margin-bottom: 12px; + + /* parent uses flexbox: this defines minimum width for text "6 results" */ + flex-basis: 100%; + flex-shrink: 0; +} + .resultsFound { white-space: nowrap; } diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index fe5bba5f..cf2159d6 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -31,17 +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', @@ -106,11 +97,19 @@ const SearchFiltersComponent = props => { {amenitiesFilter} -
- {listingsAreLoaded && resultsCount > 0 ? resultsFound : null} - {listingsAreLoaded && resultsCount === 0 ? noResults : null} - {searchInProgress ? loadingResults : null} -
+ {listingsAreLoaded && resultsCount > 0 ? ( +
+ + + +
+ ) : null} + + {listingsAreLoaded && resultsCount === 0 ? ( +
+ +
+ ) : null} ); }; From 76c807eca6d0c55793013091ae48e312cf5a0b0a Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 10:53:44 +0200 Subject: [PATCH 05/11] Loading search results: show loading text on top of searchFilters area. --- .../SearchFilters/SearchFilters.css | 20 +++++++++++++++++++ src/components/SearchFilters/SearchFilters.js | 6 ++++++ 2 files changed, 26 insertions(+) diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index af8f3333..311fd6b0 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -4,6 +4,7 @@ display: flex; justify-content: space-between; background-color: var(--matterColorBright); + position: relative; } .longInfo { @@ -40,6 +41,25 @@ 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: 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 cf2159d6..ace92dc0 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -110,6 +110,12 @@ const SearchFiltersComponent = props => { ) : null} + + {searchInProgress ? ( +
+ +
+ ) : null} ); }; From d9501ca2f96261806cf64511060994792718d03a Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 10:55:20 +0200 Subject: [PATCH 06/11] SearchPage: error already has paddings (given by searchResultContainer) --- src/containers/SearchPage/SearchPage.css | 5 ----- 1 file changed, 5 deletions(-) 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 { From 6b29e9c759c87b1a41bf6151d9014cca8a78db63 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 11:06:48 +0200 Subject: [PATCH 07/11] SearchFilters baselining --- src/components/SearchFilters/SearchFilters.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index 311fd6b0..98181b9a 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -22,8 +22,8 @@ .searchResultSummary { @apply --marketplaceH4FontStyles; line-height: 20px; - margin-top: 11px; - margin-bottom: 10px; + margin-top: 9px; + margin-bottom: 11px; /* parent uses flexbox: this defines minimum width for text "6 results" */ flex-basis: 55px; @@ -32,8 +32,10 @@ .noSearchResults { @apply --marketplaceH4FontStyles; + + /* Reserves 48px of vertical space */ line-height: 20px; - margin-top: 13px; + margin-top: 16px; margin-bottom: 12px; /* parent uses flexbox: this defines minimum width for text "6 results" */ @@ -55,7 +57,7 @@ height: 100%; /* Layout */ - padding: 0 24px; + padding: 9px 24px 0 24px; margin: 0; background-color: var(--matterColorBright); } From ace44824fdd4b23a7a9ef4c6c006f2b3c88bf456 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 11:38:43 +0200 Subject: [PATCH 08/11] Select(Single/Multiple)Filter for mobile: baseline adjustments --- .../SelectMultipleFilterMobile.css | 10 +++++++--- .../SelectSingleFilterMobile.css | 14 +++++++------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css index 777e23b0..e5c15a4a 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: 47px; 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 { diff --git a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css index e2f281d2..367ff371 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: 47px; 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 { @@ -82,10 +86,6 @@ &:hover .menuItemBorder { width: 6px; } - - &:last-child { - margin-bottom: 18px; - } } .clearButton { From 0a71cb83d8f166e22046b32ef46c8d91a5375309 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 13:06:40 +0200 Subject: [PATCH 09/11] Closed state changes --- .../SelectMultipleFilterMobile.css | 5 +++-- .../SelectSingleFilterMobile/SelectSingleFilterMobile.css | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css index e5c15a4a..702be8e9 100644 --- a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css +++ b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css @@ -2,7 +2,7 @@ .root { padding-top: 24px; - padding-bottom: 47px; + padding-bottom: 17px; border-bottom: 1px solid var(--matterColorNegative); } @@ -33,8 +33,9 @@ } .optionsContainerOpen { - padding-left: 20px; height: auto; + padding-left: 20px; + padding-bottom: 30px; } .optionsContainerClosed { diff --git a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css index 367ff371..cac9e1cb 100644 --- a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css +++ b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css @@ -2,7 +2,7 @@ .root { padding-top: 24px; - padding-bottom: 47px; + padding-bottom: 17px; border-bottom: 1px solid var(--matterColorNegative); } @@ -34,6 +34,7 @@ .optionsContainerOpen { height: auto; + padding-bottom: 30px; } .optionsContainerClosed { From dea7b5dd9ab6ee8819efff50085ac1566a88ce5a Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 13:12:32 +0200 Subject: [PATCH 10/11] Adding: 'cursor: pointer;' to mobile labels --- .../SelectMultipleFilterMobile/SelectMultipleFilterMobile.css | 1 + .../SelectSingleFilterMobile/SelectSingleFilterMobile.css | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css index 702be8e9..a512f850 100644 --- a/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css +++ b/src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css @@ -30,6 +30,7 @@ text-align: left; border: none; padding: 0; + cursor: pointer; } .optionsContainerOpen { diff --git a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css index cac9e1cb..c726fdf6 100644 --- a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css +++ b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css @@ -30,6 +30,7 @@ text-align: left; border: none; padding: 0; + cursor: pointer; } .optionsContainerOpen { From bf3b7d75746bb4fc89847c40fcc0392f9ed45d91 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 20 Feb 2018 13:46:34 +0200 Subject: [PATCH 11/11] Review changes --- src/components/SearchFilters/SearchFilters.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index ace92dc0..12205f00 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -105,7 +105,7 @@ const SearchFiltersComponent = props => { ) : null} - {listingsAreLoaded && resultsCount === 0 ? ( + {hasNoResult ? (