Fix filter paddings

swisstopo · Jul 22, 2024 · 2232330 · 2232330
1 parent c4a77e1
commit 2232330
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/src/client/src/commons/menu/mainView/menuComponents/menuItems.tsx b/src/client/src/commons/menu/mainView/menuComponents/menuItems.tsx
@@ -4,7 +4,7 @@ import { Button, Stack } from "@mui/material";
 
 export const MenuItems = ({ reset }: MenuItemsProps) => {
   return (
-    <Stack direction="row" justifyContent="space-around" sx={{ marginTop: 3 }}>
+    <Stack direction="row" justifyContent="space-around" sx={{ marginTop: "24px" }}>
       <Button
         sx={{ width: "100%", marginLeft: 0, height: "48px" }}
         data-cy="reset-filter-button"

diff --git a/src/client/src/commons/menu/mainView/sideDrawer.tsx b/src/client/src/commons/menu/mainView/sideDrawer.tsx
@@ -15,7 +15,7 @@ export const SideDrawer = ({ drawerOpen, drawerContent }: SideDrawerProps) => {
         <Paper
           sx={{
             width: "360px",
-            height: "calc(100vh - 70px)",
+            height: "calc(100vh - 84px)",
             padding: "16px",
             backgroundColor: theme.palette.background.lightgrey,
             boxShadow: theme.palette.boxShadow + " 2px 6px 6px 0px",

diff --git a/src/client/src/commons/search/editor/FilterChips.tsx b/src/client/src/commons/search/editor/FilterChips.tsx
@@ -22,7 +22,7 @@ const FilterChips = ({ activeFilters, setFilter }: FilterChipsProps) => {
   };
 
   return (
-    <Box sx={{ marginTop: "24px", marginBottom: "14px" }}>
+    <Box sx={{ marginBottom: "14px" }}>
       {activeFilters.map((filter, index) => {
         const filterLabel = filter.key === "role" ? t("status") : t(filter.key);
         return (

diff --git a/src/client/src/commons/search/editor/filterComponent.jsx b/src/client/src/commons/search/editor/filterComponent.jsx
@@ -24,6 +24,7 @@ import { FilterContext } from "../../../components/filter/filterContext.tsx";
 
 class FilterComponent extends React.Component {
   static contextType = FilterContext;
+
   constructor(props) {
     super(props);
     this.handleFilterReset = this.handleFilterReset.bind(this);
@@ -183,13 +184,15 @@ class FilterComponent extends React.Component {
 
     return (
       <Stack direction="column" sx={{ height: "100%" }}>
-        <Box sx={{ flexGrow: 1, overflow: "auto", scrollbarGutter: "stable" }}>
-          <SideDrawerHeader title={t("searchfilters")} toggleDrawer={toggleDrawer} />
+        <SideDrawerHeader title={t("searchfilters")} toggleDrawer={toggleDrawer} />
+        {this.state.activeFilters.length > 0 && (
           <FilterChips
             setPolygonSelectionEnabled={setPolygonSelectionEnabled}
             activeFilters={this.state.activeFilters}
             setFilter={setFilter}
           />
+        )}
+        <Box sx={{ flexGrow: 1, overflow: "auto", scrollbarGutter: "stable" }}>
           <Button
             onClick={() => {
               this.handlePolygonFilterClick();