From 62f5a62f81771f0f9d0dae426fcbdf44aa0b0693 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?=
 <francoischalifour@users.noreply.github.com>
Date: Thu, 7 May 2020 16:22:19 +0200
Subject: [PATCH] fix(mobile): adjust mobile filtering design (#112)

---
 src/App.scss               | 34 +++++++++++-----------------------
 src/components/Slider.scss |  4 ++--
 src/hooks/useMatchMedia.js |  6 +++---
 3 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 63eb9ad5..334d4d62 100644
--- 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
index a77f09a2..43166af2 100644
--- 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
index 07b63536..394ff6e9 100644
--- 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,7 +13,7 @@ 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);
@@ -21,7 +21,7 @@ export function useMatchMedia(config) {
     return () => {
       mediaQuery.removeListener(onChange);
     };
-  }, [config.styles.breakpoints.sm]);
+  }, [config.styles.breakpoints.md]);
 
   return { isMobile };
 }