4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Footer working

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-29 18:15:04 +02:00
parent ef4d30784a
commit 0c01457484
7 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Assets/Icons/vertical-separator.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="14" viewBox="0 0 2 14" fill="none">
<path d="M1 1L0.999999 13" stroke="#47535D" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 186 B

24
src/front/Components/DesignSystem/Footer/classes.module.scss
View File

@ -3,17 +3,24 @@
.root { .root {
border-top: 1px solid var(--footer-border, #d7dce0); border-top: 1px solid var(--footer-border, #d7dce0);
background: var(--footer-background, #fff); background: var(--footer-background, #fff);
padding: var(--spacing-1-5) 0;
.sub-root { .sub-root {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Radius-lg, 16px); gap: var(--Radius-lg, 16px);
white-space: nowrap; white-space: nowrap;
}
@media (max-width: 1023px) { .desktop {
padding: 0 12px; padding: var(--spacing-1-5, 12px) var(--Radius-xl, 24px);
} }
.tablet {
padding: var(--spacing-1-5, 12px) var(--Radius-xl, 24px);
}
.mobile {
padding: var(--spacing-1-5, 12px) var(--Radius-lg, 16px);
} }
&[data-has-left-padding="true"] { &[data-has-left-padding="true"] {
@ -22,12 +29,7 @@
} }
} }
&[data-is-sticky="true"] { @media (max-width: 660px) or (min-width: 1023px) {
position: sticky;
bottom: 0;
}
@media (max-width: 660px) or (min-width: 769px) {
.tablet { .tablet {
display: none; display: none;
} }
@ -39,7 +41,7 @@
} }
} }
@media (max-width: 769px) { @media (max-width: 1023px) {
.desktop { .desktop {
display: none; display: none;
} }

10
src/front/Components/DesignSystem/Footer/desktop.tsx
View File

@ -3,6 +3,8 @@ import classes from "./classes.module.scss";
import Link from "next/link"; import Link from "next/link";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard"; import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard";
import VerticalSeparator from "@Assets/Icons/vertical-separator.svg";
import Image from "next/image";
type IProps = { type IProps = {
className?: string; className?: string;
@ -14,11 +16,11 @@ export default function Desktop({ className }: IProps) {
return ( return (
<div className={[classes["sub-root"], className].join(" ")}> <div className={[classes["sub-root"], className].join(" ")}>
<Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Copyright lecoffre 2024</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Copyright lecoffre 2024</Link>
<span className={classes["separator"]} /> <Image src={VerticalSeparator} alt="Separator" />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Juridiques</Link>
<span className={classes["separator"]} /> <Image src={VerticalSeparator} alt="Separator" />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_CONFIDENTIALITE)}>Politique de confidentialité</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_CONFIDENTIALITE)}>Politique de confidentialité</Link>
<span className={classes["separator"]} /> <Image src={VerticalSeparator} alt="Separator" />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Politique des cookies</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Politique des cookies</Link>
</div> </div>
); );

9
src/front/Components/DesignSystem/Footer/index.tsx
View File

@ -7,10 +7,9 @@ import Tablet from "./tablet";
type IProps = { type IProps = {
className?: string; className?: string;
hasLeftPadding?: boolean; hasLeftPadding?: boolean;
isSticky?: boolean;
}; };
export default function Footer({ className, hasLeftPadding = false, isSticky = false }: IProps) { export default function Footer({ className, hasLeftPadding = false }: IProps) {
const footerRef = React.useRef<HTMLDivElement>(null); const footerRef = React.useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (!footerRef.current) return; if (!footerRef.current) return;
@ -18,11 +17,7 @@ export default function Footer({ className, hasLeftPadding = false, isSticky = f
document.documentElement.style.setProperty("--footer-height", `${footerHeight}px`); document.documentElement.style.setProperty("--footer-height", `${footerHeight}px`);
}); });
return ( return (
<footer <footer className={[classes["root"], className].join(" ")} data-has-left-padding={hasLeftPadding} ref={footerRef}>
className={[classes["root"], className].join(" ")}
data-has-left-padding={hasLeftPadding}
data-is-sticky={isSticky}
ref={footerRef}>
<Mobile className={classes["mobile"]} /> <Mobile className={classes["mobile"]} />
<Tablet className={classes["tablet"]} /> <Tablet className={classes["tablet"]} />
<Desktop className={classes["desktop"]} /> <Desktop className={classes["desktop"]} />

6
src/front/Components/DesignSystem/Footer/mobile.tsx
View File

@ -3,6 +3,8 @@ import classes from "./classes.module.scss";
import Link from "next/link"; import Link from "next/link";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard"; import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard";
import VerticalSeparator from "@Assets/Icons/vertical-separator.svg";
import Image from "next/image";
type IProps = { type IProps = {
className?: string; className?: string;
@ -14,9 +16,9 @@ export default function Mobile({ className }: IProps) {
return ( return (
<div className={[classes["sub-root"], className].join(" ")}> <div className={[classes["sub-root"], className].join(" ")}>
<Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Lecoffre 2024</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Lecoffre 2024</Link>
<span className={classes["separator"]} /> <Image src={VerticalSeparator} alt="Separator" />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>Juridiques</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>Juridiques</Link>
<span className={classes["separator"]} /> <Image src={VerticalSeparator} alt="Separator" />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Cookies</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Cookies</Link>
</div> </div>
); );

15
src/front/Components/DesignSystem/Footer/tablet.tsx
View File

@ -3,7 +3,8 @@ import classes from "./classes.module.scss";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard"; import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard";
import Link from "next/link"; import Link from "next/link";
import VerticalSeparator from "@Assets/Icons/vertical-separator.svg";
import Image from "next/image";
type IProps = { type IProps = {
className?: string; className?: string;
}; };
@ -12,13 +13,13 @@ const legalPages = Module.getInstance().get().modules.pages.Legal.pages.LegalInf
export default function Tablet({ className }: IProps) { export default function Tablet({ className }: IProps) {
return ( return (
<div className={[classes["sub-root"], className].join(" ")}> <div className={[classes["sub-root"], className].join(" ")}>
<Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Lecoffre 2024</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Copyright lecoffre 2024</Link>
<span className={classes["separator"]} /> <Image src={VerticalSeparator} alt="Separator" />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Juridiques</Link>
<span className={classes["separator"]} /> <Image src={VerticalSeparator} alt="Separator" />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_CONFIDENTIALITE)}>Politique de confidentialité</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_CONFIDENTIALITE)}>Politique de confidentialité</Link>
<span className={classes["separator"]} /> <Image src={VerticalSeparator} alt="Separator" />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Politique des cookies</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Gestion des cookies</Link>
</div> </div>
); );
} }

1
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
View File

@ -28,6 +28,7 @@
.background-image-container { .background-image-container {
position: fixed; position: fixed;
z-index: -1;
width: 50vw; width: 50vw;
top: 83px; top: 83px;
right: 0; right: 0;