fix sticky filters

dataesr · Mar 27, 2024 · a9b3172 · a9b3172
1 parent 8d39e66
commit a9b3172
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 90 deletions.
diff --git a/client/src/hooks/useScroll.js b/client/src/hooks/useScroll.js
@@ -10,7 +10,6 @@ const useScroll = () => {
     window.addEventListener('scroll', onScroll);
     return () => window.removeEventListener('scroll', onScroll);
   }, [scrollTop]);
-
   return { scrollTop };
 };
 

diff --git a/client/src/layout/Header.jsx b/client/src/layout/Header.jsx
@@ -5,11 +5,9 @@ import {
   Logo,
   Service,
 } from '@dataesr/react-dsfr';
-import { useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 
 import Beta from '../components/beta';
-import useScroll from '../hooks/useScroll';
 
 const {
   VITE_APP_NAME,
@@ -20,76 +18,38 @@ const {
 } = import.meta.env;
 
 export default function Header() {
-  const [isSticky, setIsSticky] = useState(false);
-  const { scrollTop } = useScroll();
-
-  useEffect(() => {
-    if (!isSticky && scrollTop > 68) {
-      setIsSticky(true);
-    }
-    if (isSticky && scrollTop < 20) {
-      setIsSticky(false);
-    }
-  }, [isSticky, scrollTop]);
-
   return (
     // eslint-disable-next-line react/jsx-no-useless-fragment
     <>
       <HeaderWrapper className="header header-sticky">
-        {isSticky ? (
-          <>
-            <Beta />
-            <HeaderBody>
-              <Service
-                asLink={<NavLink to="./" />}
-                className="fr-p-0"
-                description={VITE_DESCRIPTION}
-                title={(
-                  <>
-                    {VITE_APP_NAME}
-                    {VITE_HEADER_TAG && (
-                      <Badge
-                        color={(!VITE_HEADER_TAG_COLOR) ? 'info' : undefined}
-                        colorFamily={VITE_HEADER_TAG_COLOR}
-                        isSmall
-                        text={VITE_HEADER_TAG}
-                      />
-                    )}
-                  </>
-                )}
-              />
-            </HeaderBody>
-          </>
-        ) : (
-          <>
-            <Beta />
-            <HeaderBody>
-              <Logo
-                asLink={<NavLink to="./" />}
-                splitCharacter={9}
-              >
-                {VITE_MINISTER_NAME}
-              </Logo>
-              <Service
-                asLink={<NavLink to="./" />}
-                description={VITE_DESCRIPTION}
-                title={(
-                  <>
-                    {VITE_APP_NAME}
-                    {VITE_HEADER_TAG && (
-                      <Badge
-                        color={(!VITE_HEADER_TAG_COLOR) ? 'info' : undefined}
-                        colorFamily={VITE_HEADER_TAG_COLOR}
-                        isSmall
-                        text={VITE_HEADER_TAG}
-                      />
-                    )}
-                  </>
-                )}
-              />
-            </HeaderBody>
-          </>
-        )}
+        <>
+          <Beta />
+          <HeaderBody>
+            <Logo
+              asLink={<NavLink to="./" />}
+              splitCharacter={9}
+            >
+              {VITE_MINISTER_NAME}
+            </Logo>
+            <Service
+              asLink={<NavLink to="./" />}
+              description={VITE_DESCRIPTION}
+              title={(
+                <>
+                  {VITE_APP_NAME}
+                  {VITE_HEADER_TAG && (
+                    <Badge
+                      color={(!VITE_HEADER_TAG_COLOR) ? 'info' : undefined}
+                      colorFamily={VITE_HEADER_TAG_COLOR}
+                      isSmall
+                      text={VITE_HEADER_TAG}
+                    />
+                  )}
+                </>
+              )}
+            />
+          </HeaderBody>
+        </>
       </HeaderWrapper>
     </>
   );

diff --git a/client/src/pages/filters.jsx b/client/src/pages/filters.jsx
@@ -33,11 +33,9 @@ export default function Filters({ sendQuery }) {
   const { scrollTop } = useScroll();
 
   useEffect(() => {
-    const filters = document.querySelector('.filters');
-    if (!isSticky && filters.offsetTop - scrollTop > 100) {
+    if (!isSticky && scrollTop > 50) {
       setIsSticky(true);
-    }
-    if (isSticky && scrollTop < 50) {
+    } else if (isSticky && scrollTop < 50) {
       setIsSticky(false);
     }
   }, [isSticky, scrollTop]);
@@ -140,7 +138,7 @@ export default function Filters({ sendQuery }) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     <>
       {isSticky ? (
-        <Row alignItems="top">
+        <Row alignItems="top" className="fr-p-3w">
           <Col n="2">
             Filters :
           </Col>
@@ -167,7 +165,7 @@ export default function Filters({ sendQuery }) {
           </Col>
         </Row>
       ) : (
-        <Row gutters alignItems="top" className="fr-p-5w">
+        <Row gutters alignItems="top" className="fr-p-3w">
           <Col n="2">
             <Select
               label="Start year"

diff --git a/client/src/pages/index.jsx b/client/src/pages/index.jsx
@@ -154,16 +154,10 @@ export default function Home() {
 
   return (
     <>
-      <Container as="section" className="filters">
-        <Row>
-          <Col>
-            <Filters
-              sendQuery={sendQuery}
-            />
-          </Col>
-        </Row>
+      <Container fluid as="section" className="filters">
+        <Filters sendQuery={sendQuery} />
       </Container>
-      <Container className="fr-mx-5w fr-pt-2w" as="section">
+      <Container fluid as="section">
         {(isFetching || (isFetched && (allAffiliations?.length ?? 0) === 0)) && (
           <PageSpinner />
         )}

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -11,19 +11,20 @@ body {
 }
 
 .header {
-  animation: 1s ease-in-out 0s normal none 1 running fadeInDown;
-  position: sticky;
+  // position: sticky;
   top: 0;
   width: 100%;
 }
 
 .filters {
-  animation: 1s ease-in-out 0s normal none 1 running fadeInDown;
-  background-color: white;
-  padding: 1em 0;
+  background-color: #E5E5E5;
   position: sticky;
-  top: 68px;
+  top: 0;
   z-index: 2;
+
+  animation: fadeInAnimation ease 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 
 // Sticky part
@@ -38,4 +39,14 @@ body {
       line-height: 35px;
     }
   }
+}
+
+@keyframes fadeInAnimation {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }