style: review design

mission-apprentissage · Jan 6, 2025 · 0fbbcba · 0fbbcba
1 parent b01d514
commit 0fbbcba
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 26 deletions.
diff --git a/ui/app/(accompagnateur)/context/FormationDetailsContext.tsx b/ui/app/(accompagnateur)/context/FormationDetailsContext.tsx
@@ -16,9 +16,13 @@ type DetailsHeaderSizeParams = {
 const FormationDetailsContext = createContext<{
   headersSize: DetailsHeaderSize;
   setHeadersSize: (params: DetailsHeaderSizeParams) => void;
+  resumeCollapse?: boolean;
+  setResumeCollapse: (v: boolean | undefined) => void;
 }>({
   headersSize: { headerHeight: 0, resumeHeight: 0 },
   setHeadersSize: (params: DetailsHeaderSizeParams) => {},
+  resumeCollapse: undefined,
+  setResumeCollapse: (v: boolean | undefined) => {},
 });
 
 const FormationDetailsProvider = ({
@@ -29,6 +33,7 @@ const FormationDetailsProvider = ({
   children: React.ReactNode;
 }) => {
   const [headersSize, setHeadersSize] = useState({ headerHeight: 0, resumeHeight: 0 });
+  const [resumeCollapse, setResumeCollapse] = useState<boolean | undefined>(undefined);
   const matomo = useMatomo();
 
   useEffect(() => {
@@ -48,6 +53,8 @@ const FormationDetailsProvider = ({
       value={{
         headersSize,
         setHeadersSize: setHeaderSizeCb,
+        resumeCollapse,
+        setResumeCollapse,
       }}
     >
       {children}

diff --git a/ui/app/(accompagnateur)/details/[id]/FormationContent.tsx b/ui/app/(accompagnateur)/details/[id]/FormationContent.tsx
@@ -26,9 +26,9 @@ const FormationContent = React.memo(function ({ formationDetail }: { formationDe
 
   const cssAnchor = css`
     ${theme.breakpoints.up("md")} {
-      scroll-margin-top: calc(${headersSize.headerHeight}px + ${headersSize.resumeHeight || 0}px);
+      scroll-margin-top: calc(${headersSize.headerHeight}px + ${headersSize.resumeHeight || 0}px + 2px);
     }
-    scroll-margin-top: calc(${headersSize.headerHeight || 0}px);
+    scroll-margin-top: calc(${headersSize.headerHeight || 0}px + 2px);
   `;
 
   useScrollToLocation();

diff --git a/ui/app/(accompagnateur)/details/[id]/FormationHeader.tsx b/ui/app/(accompagnateur)/details/[id]/FormationHeader.tsx
@@ -20,23 +20,17 @@ import Link from "#/app/components/Link";
 import { TagApprentissage } from "#/app/(accompagnateur)/components/Apprentissage";
 import { formatLibelle, formatStatut } from "#/app/utils/formation";
 import { useFormationsDetails } from "../../context/FormationDetailsContext";
-import { useHideOnScroll } from "../../hooks/useHideOnScroll";
 
 const FormationHeader = React.memo(function ({ formationDetail }: { formationDetail: FormationDetail }) {
   const theme = useTheme();
   const searchParams = useSearchParams();
   const longitude = searchParams.get("longitude");
   const latitude = searchParams.get("latitude");
 
-  const isDownSm = useMediaQuery<Theme>((theme) => theme.breakpoints.down("md"));
-
-  const { headersSize, setHeadersSize } = useFormationsDetails();
+  const { setHeadersSize, resumeCollapse } = useFormationsDetails();
   const refHeader = React.useRef<HTMLElement>(null);
   const stickyHeaderSize = useSize(refHeader);
 
-  const hideonScroll = useHideOnScroll(refHeader);
-  const hideResumeTag = isDownSm ? undefined : hideonScroll;
-
   const { formationEtablissement, formation, etablissement } = formationDetail;
 
   useEffect(() => {
@@ -109,6 +103,8 @@ const FormationHeader = React.memo(function ({ formationDetail }: { formationDet
           background-color: #fff;
           z-index: 99;
           display: flex;
+
+          visibility: ${resumeCollapse ? "hidden" : "inherit"};
         `}
       >
         <Grid container>
@@ -214,7 +210,7 @@ const FormationHeader = React.memo(function ({ formationDetail }: { formationDet
         >
           <Divider variant="middle" style={{ marginTop: 0, marginBottom: 0 }} />
         </BoxContainer>
-        <FormationResume formationDetail={formationDetail} hideTag={hideResumeTag} />
+        <FormationResume formationDetail={formationDetail} />
       </BoxContainer>
     </>
   );

diff --git a/ui/app/(accompagnateur)/details/[id]/FormationResume.tsx b/ui/app/(accompagnateur)/details/[id]/FormationResume.tsx
@@ -15,7 +15,8 @@ import Divider from "#/app/components/Divider";
 import { useScrollspy } from "../../hooks/useScrollSpy";
 import { useSize } from "../../hooks/useSize";
 import { useFormationsDetails } from "../../context/FormationDetailsContext";
-import { Theme } from "@mui/material";
+import { Theme, useMediaQuery } from "@mui/material";
+import { useHideOnScroll } from "../../hooks/useHideOnScroll";
 
 interface FormationResumeBlockProps {
   title: string;
@@ -284,7 +285,7 @@ const FormationResume = React.memo(function ({
   const { headersSize } = useFormationsDetails();
   const activeId = useScrollspy(
     ["la-formation", "l-admission", "poursuite-etudes", "acces-emploi"],
-    headersSize.headerHeight + headersSize.resumeHeight + 1
+    headersSize.headerHeight + headersSize.resumeHeight + 3
   );
 
   useEffect(() => {
@@ -364,22 +365,23 @@ const FormationResume = React.memo(function ({
 });
 FormationResume.displayName = "FormationResume";
 
-const FormationResumeHideTagFix = React.memo(function ({
-  formationDetail,
-  hideTag,
-}: {
-  formationDetail: FormationDetail;
-  hideTag?: boolean;
-}) {
+const FormationResumeHideTagFix = React.memo(function ({ formationDetail }: { formationDetail: FormationDetail }) {
   const theme = useTheme();
-  const { headersSize, setHeadersSize } = useFormationsDetails();
+  const isDownSm = useMediaQuery<Theme>((theme) => theme.breakpoints.down("md"));
+  const { headersSize, setHeadersSize, setResumeCollapse } = useFormationsDetails();
   const refResume = React.useRef<HTMLElement>(null);
   const stickyResumeSize = useSize(refResume);
+  const hideonScroll = useHideOnScroll(refResume, headersSize.headerHeight + 2);
+  const hideResumeTag = isDownSm ? undefined : hideonScroll;
 
   useEffect(() => {
     setHeadersSize({ resumeHeight: stickyResumeSize?.height || 0 });
   }, [setHeadersSize, stickyResumeSize]);
 
+  useEffect(() => {
+    setResumeCollapse(hideResumeTag);
+  }, [hideResumeTag]);
+
   return (
     <BoxContainer>
       <Box style={{ display: "grid", gridTemplateColumns: "1fr" }}>
@@ -396,7 +398,7 @@ const FormationResumeHideTagFix = React.memo(function ({
                 padding-left: 1.25rem;
               `}
             >
-              <FormationResume formationDetail={formationDetail} hideTag={hideTag} />
+              <FormationResume formationDetail={formationDetail} hideTag={hideResumeTag} />
 
               <Divider
                 variant="middle"
@@ -418,7 +420,7 @@ const FormationResumeHideTagFix = React.memo(function ({
             `}
             ref={refResume}
           >
-            {hideTag !== undefined && <FormationResume hideTag={true} formationDetail={formationDetail} />}
+            {hideResumeTag !== undefined && <FormationResume hideTag={true} formationDetail={formationDetail} />}
           </BoxContainer>
         </Box>
         <Box style={{ gridRowStart: 1, gridColumnStart: 1, visibility: "hidden" }}>

diff --git a/ui/app/(accompagnateur)/hooks/useHideOnScroll.ts b/ui/app/(accompagnateur)/hooks/useHideOnScroll.ts
@@ -1,7 +1,7 @@
 import { useWindowScroll } from "@uidotdev/usehooks";
 import { useEffect, useState } from "react";
 
-export const useHideOnScroll = (ref: React.RefObject<HTMLElement>) => {
+export const useHideOnScroll = (ref: React.RefObject<HTMLElement>, offset: number) => {
   const [hide, setHide] = useState(true);
   const [scrollPosition] = useWindowScroll();
 
@@ -14,12 +14,12 @@ export const useHideOnScroll = (ref: React.RefObject<HTMLElement>) => {
     const headerStyle = window.getComputedStyle(ref.current);
     const marginSize = parseFloat(headerStyle.marginTop);
 
-    if (boundingBox.y <= marginSize) {
+    if (boundingBox.y - offset <= marginSize) {
       setHide(true);
-    } else if (boundingBox.y > marginSize) {
+    } else if (boundingBox.y - offset > marginSize + 1) {
       setHide(false);
     }
-  }, [ref, scrollPosition]);
+  }, [ref, scrollPosition, offset]);
 
   return hide;
 };