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 13:17:09 +02:00
parent 447babc386
commit 8e2f666a68
5 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,13 +8,12 @@
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;
gap: var(--Radius-lg, 16px); gap: var(--Radius-lg, 16px);
white-space: nowrap; white-space: nowrap;
padding: 0 360px; padding: var(--spacing-1-5, 12px) var(--Radius-xl, 24px);
//make it sticky //make it sticky
@media (max-width: 1023px) { @media (max-width: 1023px) {

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

@ -1,20 +1,25 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Link from "next/link";
import Module from "@Front/Config/Module";
import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard";
type IProps = { type IProps = {
className?: string; className?: string;
}; };
const legalPages = Module.getInstance().get().modules.pages.Legal.pages.LegalInformations.props.path;
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> <span>© Copyright lecoffre 2024</span>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<a href="/terms">Conditions d'utilisation</a> <Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<a href="/privacy">Politique de confidentialité</a> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_CONFIDENTIALITE)}>Politique de confidentialité</Link>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<a href="/cookies">Politique des cookies</a> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Politique des cookies</Link>
</div> </div>
); );
} }

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

@ -1,18 +1,23 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Link from "next/link";
import Module from "@Front/Config/Module";
import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard";
type IProps = { type IProps = {
className?: string; className?: string;
}; };
const legalPages = Module.getInstance().get().modules.pages.Legal.pages.LegalInformations.props.path;
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> <span>© Lecoffre 2024</span>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<a href="/terms">Juridiques</a> <Link href={legalPages.replace("[legalUid]", ELegalOptions.LEGAL_MENTIONS)}>Juridiques</Link>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<a href="/cookies">Cookies</a> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Cookies</Link>
</div> </div>
); );
} }

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

@ -1,20 +1,24 @@
import React from "react"; import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Module from "@Front/Config/Module";
import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard";
import Link from "next/link";
type IProps = { type IProps = {
className?: string; className?: string;
}; };
const legalPages = Module.getInstance().get().modules.pages.Legal.pages.LegalInformations.props.path;
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> <span>© Lecoffre 2024</span>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<a href="/terms">Conditions d'utilisation</a> <Link href={legalPages.replace("[legalUid]", ELegalOptions.CGU)}>Conditions d'utilisation</Link>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<a href="/privacy">Politique de confidentialité</a> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_CONFIDENTIALITE)}>Politique de confidentialité</Link>
<span className={classes["separator"]} /> <span className={classes["separator"]} />
<a href="/cookies">Politique des cookies</a> <Link href={legalPages.replace("[legalUid]", ELegalOptions.POLITIQUE_DE_GESTION_DES_COOKIES)}>Politique des cookies</Link>
</div> </div>
); );
} }

10
src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss
View File

@ -5,10 +5,14 @@
.content { .content {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
min-height: calc(100vh - var(--header-height));
height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height));
.right-side { .right-side {
min-width: calc(100% - 336px); min-width: calc(100% - 336px);
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
.right-side-content { .right-side-content {
overflow-y: auto; overflow-y: auto;
padding: var(--spacing-lg, 24px); padding: var(--spacing-lg, 24px);
@ -25,6 +29,10 @@
@media (max-width: $screen-m) { @media (max-width: $screen-m) {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
.right-side {
min-width: 100%;
}
} }
} }
} }