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}