Fix filter UI responsiveness and ordering

sharetribe · Mar 25, 2020 · eba47bd · eba47bd
1 parent 62a3134
commit eba47bd
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 25 deletions.
diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css
@@ -2,8 +2,13 @@
 
 .root {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   background-color: var(--matterColorBright);
+}
+
+.filterWrapper {
+  display: flex;
+  justify-content: space-between;
   position: relative;
 }
 
@@ -24,6 +29,8 @@
   line-height: 20px;
   margin-top: 9px;
   margin-bottom: 11px;
+  margin-left: auto;
+  margin-right: 8px;
 
   /* parent uses flexbox: this defines minimum width for text "6 results" */
   flex-basis: 55px;

diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js
@@ -69,7 +69,7 @@ const SearchFiltersComponent = props => {
   } = props;
 
   const hasNoResult = listingsAreLoaded && resultsCount === 0;
-  const classes = classNames(rootClassName || css.root, { [css.longInfo]: hasNoResult }, className);
+  const classes = classNames(rootClassName || css.root, className);
 
   const keywordLabel = intl.formatMessage({
     id: 'SearchFilters.keywordLabel',
@@ -197,22 +197,23 @@ const SearchFiltersComponent = props => {
 
   return (
     <div className={classes}>
-      <div className={css.filters}>
-        {priceFilterElement}
-        {dateRangeFilterElement}
-        {keywordFilterElement}
-        {toggleSearchFiltersPanelButton}
-      </div>
-
-      {sortBy}
-
-      {listingsAreLoaded && resultsCount > 0 ? (
-        <div className={css.searchResultSummary}>
-          <span className={css.resultsFound}>
-            <FormattedMessage id="SearchFilters.foundResults" values={{ count: resultsCount }} />
-          </span>
+      <div className={css.filterWrapper}>
+        <div className={css.filters}>
+          {priceFilterElement}
+          {dateRangeFilterElement}
+          {keywordFilterElement}
+          {toggleSearchFiltersPanelButton}
         </div>
-      ) : null}
+
+        {listingsAreLoaded && resultsCount > 0 ? (
+          <div className={css.searchResultSummary}>
+            <span className={css.resultsFound}>
+              <FormattedMessage id="SearchFilters.foundResults" values={{ count: resultsCount }} />
+            </span>
+          </div>
+        ) : null}
+        {sortBy}
+      </div>
 
       {hasNoResult ? (
         <div className={css.noSearchResults}>

diff --git a/src/components/SortBy/SortByPopup.css b/src/components/SortBy/SortByPopup.css
@@ -1,13 +1,6 @@
 @import '../../marketplace.css';
 
 .root {
-  display: inline-block;
-  margin-left: auto;
-  margin-right: 8px;
-
-  &:last-of-type {
-    padding-right: 0;
-  }
 }
 
 .icon {
@@ -84,7 +77,6 @@
   color: var(--matterColor);
   margin-left: 30px;
   margin-right: 30px;
-  margin-bottom: 24px;
 }
 
 .menuItem {