fix(mobile): adjust mobile filtering design (#112)

algolia · May 7, 2020 · 62f5a62 · 62f5a62
1 parent 638442c
commit 62f5a62
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 28 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -234,7 +234,7 @@
     box-shadow: -30px 0 50px 0 rgba(0, 0, 0, 0.4);
     display: flex;
     flex-direction: column;
-    height: calc(100% - 4rem);
+    height: 100%;
     position: relative;
     transform: translateX(120vh);
     transition: transform 300ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
@@ -243,9 +243,6 @@
       transition: none;
     }
   }
-  @media (--algolia-theme-breakpoint-sm-max) {
-    height: 100%;
-  }
 }
 
 .uni-Refinements-scrollable {
@@ -318,36 +315,34 @@
   margin-right: 60px;
   max-width: 260px;
   @media (--algolia-theme-breakpoint-md-max) {
+    bottom: 0;
     height: 100%;
     left: 6rem;
     margin: 0;
     max-width: 100%;
     pointer-events: none;
     position: fixed;
-    right: 2rem;
-    top: 2rem;
-    width: calc(100% - 8rem);
+    right: 0;
+    top: 0;
+    width: calc(100% - 6rem);
     z-index: 2;
   }
   @media (--algolia-theme-breakpoint-sm-max) {
-    bottom: 0;
     left: 3rem;
-    right: 0;
-    top: 0;
     width: calc(100% - 3rem);
   }
 }
 
 .uni-LeftPanel-Overlay {
   background: rgba(0, 0, 0, 0.5);
-  bottom: 2rem;
+  bottom: 0;
   content: '';
   display: block;
-  left: 2rem;
+  left: 0;
   opacity: 0;
   position: fixed;
-  right: 2rem;
-  top: 2rem;
+  right: 0;
+  top: 0;
   transition: opacity 300ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
   will-change: opacity;
   z-index: 2;
@@ -357,12 +352,6 @@
   @media (--algolia-theme-breakpoint-md-max) {
     pointer-events: none;
   }
-  @media (--algolia-theme-breakpoint-sm-max) {
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: 0;
-  }
 }
 
 .uni-RightPanel {
@@ -597,18 +586,17 @@
   font-family: var(--algolia-theme-text-fontFamily);
   -webkit-font-smoothing: antialiased;
   left: 0;
+  margin: 2rem;
   overflow-x: hidden;
   overflow-y: scroll;
   position: fixed;
   right: 0;
   top: 0;
-  @media (--algolia-theme-breakpoint-sm-min) {
-    margin: 2rem;
-  }
   * {
     outline-color: var(--algolia-theme-color-primary);
   }
   @media (--algolia-theme-breakpoint-md-max) {
+    margin: 0;
     &.uni-Container--filtering {
       overflow: hidden;
       .uni-LeftPanel {

diff --git a/src/components/Slider.scss b/src/components/Slider.scss
@@ -34,7 +34,7 @@
     transform: translate(-50%, -50%);
     width: 16px;
     z-index: 1;
-    @media (--algolia-theme-breakpoint-lg-max) {
+    @media (--algolia-theme-breakpoint-md-max) {
       height: 1.5rem;
       width: 1.5rem;
     }
@@ -44,7 +44,7 @@
 .uni-Slider-bar {
   display: block;
   padding: 0 8px;
-  @media (--algolia-theme-breakpoint-lg-max) {
+  @media (--algolia-theme-breakpoint-md-max) {
     padding: 0 0.75rem;
   }
 }

diff --git a/src/hooks/useMatchMedia.js b/src/hooks/useMatchMedia.js
@@ -3,7 +3,7 @@ import React from 'react';
 export function useMatchMedia(config) {
   const [isMobile, setIsMobile] = React.useState(
     () =>
-      !window.matchMedia(`(min-width: ${config.styles.breakpoints.sm}px)`)
+      !window.matchMedia(`(min-width: ${config.styles.breakpoints.md}px)`)
         .matches
   );
 
@@ -13,15 +13,15 @@ export function useMatchMedia(config) {
     }
 
     const mediaQuery = window.matchMedia(
-      `(min-width: ${config.styles.breakpoints.sm}px)`
+      `(min-width: ${config.styles.breakpoints.md}px)`
     );
 
     mediaQuery.addListener(onChange);
 
     return () => {
       mediaQuery.removeListener(onChange);
     };
-  }, [config.styles.breakpoints.sm]);
+  }, [config.styles.breakpoints.md]);
 
   return { isMobile };
 }