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

✨ Footer everywhere

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-29 13:35:34 +02:00
parent d99148d3bd
commit 68ee0483e5
6 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@
font-size: 12px; font-size: 12px;
font-weight: var(--font-text-weight-regular, 400); font-weight: var(--font-text-weight-regular, 400);
letter-spacing: 0.06px; letter-spacing: 0.06px;
.sub-root { .sub-root {
display: flex; display: flex;
align-items: center; align-items: center;
@ -21,7 +22,18 @@
} }
} }
@media (max-width: 660px) or (min-width: 768px) { &[data-has-left-padding="true"] {
.desktop {
padding: var(--spacing-1-5, 12px) var(--spacing-15, 120px);
}
}
&[data-is-sticky="true"] {
position: sticky;
bottom: 0;
}
@media (max-width: 660px) or (min-width: 769px) {
.tablet { .tablet {
display: none; display: none;
} }

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

@ -13,7 +13,7 @@ const legalPages = Module.getInstance().get().modules.pages.Legal.pages.LegalInf
export default function Desktop({ className }: IProps) { export default function Desktop({ className }: IProps) {
return ( return (
<div className={[classes["sub-root"], className].join(" ")}> <div className={[classes["sub-root"], className].join(" ")}>
<span>© Copyright lecoffre 2024</span> <Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Copyright lecoffre 2024</Link>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link>
<span className={classes["separator"]} /> <span className={classes["separator"]} />

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

@ -6,14 +6,16 @@ import Tablet from "./tablet";
type IProps = { type IProps = {
className?: string; className?: string;
hasLeftPadding?: boolean;
isSticky?: boolean;
}; };
export default function Footer({ className }: IProps) { export default function Footer({ className, hasLeftPadding = false, isSticky = false }: IProps) {
useEffect(() => { useEffect(() => {
document.documentElement.style.setProperty("--footer-height", `43px`); document.documentElement.style.setProperty("--footer-height", `43px`);
}); });
return ( return (
<footer className={[classes["root"], className].join(" ")}> <footer className={[classes["root"], className].join(" ")} data-has-left-padding={hasLeftPadding} data-is-sticky={isSticky}>
<Mobile className={classes["mobile"]} /> <Mobile className={classes["mobile"]} />
<Tablet className={classes["tablet"]} /> <Tablet className={classes["tablet"]} />
<Desktop className={classes["desktop"]} /> <Desktop className={classes["desktop"]} />

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

@ -13,7 +13,7 @@ const legalPages = Module.getInstance().get().modules.pages.Legal.pages.LegalInf
export default function Mobile({ className }: IProps) { export default function Mobile({ className }: IProps) {
return ( return (
<div className={[classes["sub-root"], className].join(" ")}> <div className={[classes["sub-root"], className].join(" ")}>
<span>© Lecoffre 2024</span> <Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Lecoffre 2024</Link>
<span className={classes["separator"]} /> <span className={classes["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"]} /> <span className={classes["separator"]} />

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

@ -12,7 +12,7 @@ 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(" ")}>
<span>© Lecoffre 2024</span> <Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>© Lecoffre 2024</Link>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link> <Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link>
<span className={classes["separator"]} /> <span className={classes["separator"]} />

2
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
View File

@ -5,6 +5,7 @@ import Image, { StaticImageData } from "next/image";
import React, { ReactNode, useEffect } from "react"; import React, { ReactNode, useEffect } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Footer from "@Front/Components/DesignSystem/Footer";
type IProps = { type IProps = {
title: string; title: string;
@ -45,6 +46,7 @@ export default function DefaultDoubleSidePage(props: IProps) {
<Image alt={"right side image"} src={image} className={classes["background-image"]} priority /> <Image alt={"right side image"} src={image} className={classes["background-image"]} priority />
</div> </div>
)} )}
<Footer hasLeftPadding isSticky />
</div> </div>
); );
} }