Merge pull request #713 from sharetribe/searchfilter-tuning

Searchfilter tuning

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;
 }

src/components/SearchFilters/SearchFilters.js

@@ -31,15 +31,8 @@ const SearchFiltersComponent = props => {
     intl,
   } = props;
 
-  const loadingResults = <FormattedMessage id="SearchFilters.loadingResults" />;
-
-  const resultsFound = (
-    <FormattedMessage id="SearchFilters.foundResults" values={{ count: resultsCount }} />
-  );
-
-  const noResults = <FormattedMessage id="SearchFilters.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}
       </div>
 
-      <div className={css.searchResultSummary}>
-        {listingsAreLoaded && resultsCount > 0 ? resultsFound : null}
-        {listingsAreLoaded && resultsCount === 0 ? noResults : null}
-        {searchInProgress ? loadingResults : null}
-      </div>
+      {listingsAreLoaded && resultsCount > 0 ? (
+        <div className={css.searchResultSummary}>
+          <span className={css.resultsFound}>
+            <FormattedMessage id="SearchFilters.foundResults" values={{ count: resultsCount }} />
+          </span>
+        </div>
+      ) : null}
+
+      {hasNoResult ? (
+        <div className={css.noSearchResults}>
+          <FormattedMessage id="SearchFilters.noResults" />
+        </div>
+      ) : null}
+
+      {searchInProgress ? (
+        <div className={css.loadingResults}>
+          <FormattedMessage id="SearchFilters.loadingResults" />
+        </div>
+      ) : null}
     </div>
   );
 };
@@ -129,7 +136,6 @@ SearchFiltersComponent.propTypes = {
   listingsAreLoaded: bool.isRequired,
   resultsCount: number,
   searchingInProgress: bool,
-  onMapIconClick: func.isRequired,
   onManageDisableScrolling: func.isRequired,
   categories: array,
   amenities: array,

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 {

src/components/SelectSingleFilter/SelectSingleFilter.css

@@ -2,7 +2,6 @@
 
 .root {
   display: inline-block;
-  padding-right: 8px;
 
   &:last-of-type {
     padding-right: 0;

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 {

src/containers/SearchPage/SearchPage.css

@@ -56,11 +56,6 @@
 
 .error {
   color: var(--failColor);
-  padding-left: 24px;
-
-  @media (--viewportMedium) {
-    padding-left: 36px;
-  }
 }
 
 .searchString {

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}

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}