Merge pull request #586 from MTES-MCT/fix/scroll

Fix/scroll
MTES-MCT · Nov 5, 2024 · 6f71047 · 6f71047
2 parents 486e760 + 443756e
commit 6f71047
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 50 deletions.
diff --git a/common/assets/styles/root.scss b/common/assets/styles/root.scss
@@ -471,4 +471,8 @@ video:not([href])[controls] {
 
 .MuiChip-filled.MuiChip-colorDefault {
   background-color: var(--background-action-low-blue-france)
+}
+
+main {
+  scroll-margin-top: 75px;
 }
diff --git a/common/utils/scroll.js b/common/utils/scroll.js
diff --git a/web/common/hooks/useScroll.js b/web/common/hooks/useScroll.js
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+function useScroll() {
+  const { hash, pathname, search } = useLocation();
+
+  useEffect(() => {
+    if (hash) {
+      const element = document.querySelector(hash);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+      return;
+    }
+    if (pathname === "/resources/regulations" && search !== "") {
+      return;
+    }
+    const mainElements = document.getElementsByTagName("main");
+    if (mainElements && mainElements[0]) {
+      mainElements[0].scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, [hash, pathname, search]);
+}
+
+export default useScroll;
diff --git a/web/common/hooks/useScrollHash.js b/web/common/hooks/useScrollHash.js
diff --git a/...oller/components/scanQRCode/BackButton.js → ...onents/scanQRCode/ControllerBackButton.js b/...oller/components/scanQRCode/BackButton.js → ...onents/scanQRCode/ControllerBackButton.js
@@ -2,7 +2,7 @@ import React from "react";
 import { LinkButton } from "../../../common/LinkButton";
 import { CONTROLLER_ROUTE_PREFIX } from "../../../common/routes";
 
-export const BackButton = ({ label, route }) => (
+export const ControllerBackButton = ({ label, route }) => (
   <LinkButton
     to={`${CONTROLLER_ROUTE_PREFIX}${route}`}
     priority="tertiary no outline"

diff --git a/web/controller/components/scanQRCode/ControllerQRCodeNotRecognized.js b/web/controller/components/scanQRCode/ControllerQRCodeNotRecognized.js
@@ -4,8 +4,8 @@ import Typography from "@mui/material/Typography";
 import { Header } from "../../../common/Header";
 import { usePageTitle } from "../../../common/UsePageTitle";
 import Notice from "../../../common/Notice";
-import { BackButton } from "./BackButton";
 import { Main } from "../../../common/semantics/Main";
+import { ControllerBackButton } from "./ControllerBackButton";
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -38,7 +38,7 @@ export function ControllerQRCodeNotRecognized() {
         className={`${classes.container} ${classes.whiteSection}`}
         maxWidth="xl"
       >
-        <BackButton label="Scannez un QR Code" route="/scan" />
+        <ControllerBackButton label="Scannez un QR Code" route="/scan" />
         <h3 className={classes.title}>QR Code non reconnu</h3>
         <Typography>
           Nous n'avons pas pu vérifier la validité de ce QR Code. Il se peut que

diff --git a/web/controller/components/scanQRCode/ControllerScanQRCode.js b/web/controller/components/scanQRCode/ControllerScanQRCode.js
@@ -16,7 +16,7 @@ import { CONTROL_TYPES } from "../../utils/useReadControlData";
 import { usePageTitle } from "../../../common/UsePageTitle";
 import Notice from "../../../common/Notice";
 import { Main } from "../../../common/semantics/Main";
-import { BackButton } from "./BackButton";
+import { ControllerBackButton } from "./ControllerBackButton";
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -132,7 +132,7 @@ export function ControllerScanQRCode() {
         className={`${classes.container} ${classes.whiteSection}`}
         maxWidth="xl"
       >
-        <BackButton label="Accueil" route="/home" />
+        <ControllerBackButton label="Accueil" route="/home" />
         <h3 className={classes.titleScan}>Scannez un QR Code Mobilic</h3>
         <Typography>
           Afin d'accéder à l'historique de 28 jours du salarié, positionnez son

diff --git a/web/root.js b/web/root.js
@@ -29,7 +29,6 @@ import {
   getFallbackRoute,
   isAccessible
 } from "./common/routes";
-import { ScrollToTop } from "common/utils/scroll";
 import { SnackbarProvider, useSnackbarAlerts } from "./common/Snackbar";
 import { EnvironmentHeader } from "./common/EnvironmentHeader";
 import { LiveChat } from "./common/LiveChat";
@@ -58,7 +57,7 @@ import UpdatePasswordModal from "./pwa/components/UpdatePassword";
 import AcceptCguModal from "./pwa/modals/AcceptCguModal";
 import RejectedCguModal from "./pwa/modals/RejectedCguModals";
 import merge from "lodash/merge";
-import useScrollToHash from "./common/hooks/useScrollHash";
+import useScroll from "./common/hooks/useScroll";
 
 const matomo = createInstance({
   urlBase: "https://stats.beta.gouv.fr",
@@ -103,7 +102,6 @@ export default function Root() {
                       <LoadingScreenContextProvider>
                         <ModalProvider modalDict={MODAL_DICT}>
                           <RegulationDrawerContextProvider>
-                            <ScrollToTop />
                             <_Root />
                           </RegulationDrawerContextProvider>
                         </ModalProvider>
@@ -125,7 +123,7 @@ function _Root() {
   const store = useStoreSyncedWithLocalStorage();
   const withLoadingScreen = useLoadingScreen();
   const alerts = useSnackbarAlerts();
-  useScrollToHash();
+  useScroll();
 
   const userId = store.userId();
   const controllerId = store.controllerId();