feat(mobile): display current refinements in filters panel (#123)

algolia · May 11, 2020 · 017c572 · 017c572
1 parent 7c6a5e7
commit 017c572
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 7 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -554,9 +554,9 @@
   height: 40px;
   justify-content: center;
   left: 50%;
+  min-width: 112px;
   position: fixed;
   transform: translateX(-50%);
-  width: 112px;
   z-index: 3;
   @media (--algolia-theme-breakpoint-sm-max) {
     bottom: 2rem;
@@ -569,6 +569,14 @@
   width: 16px;
 }
 
+.uni-FiltersButton-Count {
+  background: rgba(255, 255, 255, 0.32);
+  border-radius: 9999px;
+  margin-left: 0.5rem;
+  min-width: 22px;
+  padding: 2px 6px;
+}
+
 /* Container & Overlay */
 
 .uni-Container {

diff --git a/src/components/CurrentRefinements.js b/src/components/CurrentRefinements.js
@@ -82,12 +82,18 @@ function getRefinement(refinement, config) {
 
 export const CurrentRefinements = connectCurrentRefinements(
   function CurrentRefinements({ items, refine }) {
-    const { config } = useAppContext();
+    const { config, setSearchContext } = useAppContext();
 
     const refinements = items.reduce((acc, current) => {
       return [...acc, ...getRefinement(current, config)];
     }, []);
 
+    React.useEffect(() => {
+      setSearchContext({
+        refinementCount: refinements.length,
+      });
+    }, [setSearchContext, refinements.length]);
+
     if (refinements.length === 0) {
       return null;
     }

diff --git a/src/components/CurrentRefinements.scss b/src/components/CurrentRefinements.scss
@@ -1,7 +1,7 @@
 .ais-CurrentRefinements {
   padding-top: 1rem;
-  @media (--algolia-theme-breakpoint-sm-max) {
-    padding-top: 0.5rem;
+  @media (--algolia-theme-breakpoint-md-max) {
+    padding: 0 0 1rem;
   }
 }
 
@@ -26,11 +26,17 @@
 
 .ais-CurrentRefinements-label {
   padding: 4px 4px 4px 8px;
+  @media (--algolia-theme-breakpoint-md-max) {
+    padding: 0.5rem;
+  }
 }
 
 .ais-CurrentRefinements-categoryLabel {
   font-weight: bold;
   padding: 4px 6px 4px 0;
+  @media (--algolia-theme-breakpoint-md-max) {
+    padding: 0.5rem 0.5rem 0.5rem 0;
+  }
 }
 
 .ais-CurrentRefinements-delete {
@@ -41,4 +47,7 @@
   cursor: pointer;
   height: 100%;
   padding: 0 6px;
+  @media (--algolia-theme-breakpoint-md-max) {
+    padding: 0 0.5rem;
+  }
 }
diff --git a/src/components/FiltersButton.js b/src/components/FiltersButton.js
@@ -1,8 +1,11 @@
 import React from 'react';
 
 import { FilterIcon } from './FilterIcon';
+import { useSearchContext } from '../hooks';
 
 export function FiltersButton({ onClick }) {
+  const { refinementCount } = useSearchContext();
+
   return (
     <button
       data-layout="mobile"
@@ -11,6 +14,9 @@ export function FiltersButton({ onClick }) {
     >
       <FilterIcon />
       Filters
+      {refinementCount > 0 && (
+        <span className="uni-FiltersButton-Count">{refinementCount}</span>
+      )}
     </button>
   );
 }
diff --git a/src/components/Panel.scss b/src/components/Panel.scss
@@ -20,7 +20,10 @@
 }
 
 .ais-Panel-body {
-  margin-top: 1rem;
+  padding-top: 1rem;
+  @media (--algolia-theme-breakpoint-md-max) {
+    padding: 1rem 0;
+  }
 }
 
 .ais-Panel-noRefinement {

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -17,7 +17,7 @@ import { SeeResultsButton } from './SeeResultsButton';
 import { ResetButton } from './ResetButton';
 
 export function Search(props) {
-  const { config, view, searchParameters } = useAppContext();
+  const { config, view, searchParameters, isMobile } = useAppContext();
   const { isSearchStalled } = useSearchContext();
 
   const filtersAnchor = React.useRef();
@@ -79,6 +79,7 @@ export function Search(props) {
                     Close
                   </button>
                 </header>
+                {isMobile && <CurrentRefinements />}
                 <Refinements />
               </div>
               <footer className="uni-Refinements-footer" data-layout="mobile">
@@ -119,7 +120,7 @@ export function Search(props) {
                   </div>
                 </div>
               </div>
-              <CurrentRefinements />
+              {!isMobile && <CurrentRefinements />}
             </header>
 
             <main className="uni-BodyContent">