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

✨ Adding footer

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-29 13:02:47 +02:00
parent 6eae754bc8
commit 447babc386
3 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React from "react"; import React, { useEffect } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Mobile from "./mobile"; import Mobile from "./mobile";
import Desktop from "./desktop"; import Desktop from "./desktop";
@ -9,6 +9,9 @@ type IProps = {
}; };
export default function Footer({ className }: IProps) { export default function Footer({ className }: IProps) {
useEffect(() => {
document.documentElement.style.setProperty("--footer-height", `43px`);
});
return ( return (
<footer className={[classes["root"], className].join(" ")}> <footer className={[classes["root"], className].join(" ")}>
<Mobile className={classes["mobile"]} /> <Mobile className={classes["mobile"]} />

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

@ -7,21 +7,24 @@
justify-content: flex-start; justify-content: flex-start;
height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height));
@media (max-width: $screen-m) {
flex-direction: column;
}
.right-side { .right-side {
min-width: calc(100% - 336px); min-width: calc(100% - 336px);
overflow-y: auto; .right-side-content {
padding: var(--spacing-lg, 24px); overflow-y: auto;
padding: var(--spacing-lg, 24px);
&[data-no-padding] { height: calc(100% - var(--footer-height));
padding: 0;
} }
@media (max-width: $screen-m) { &[data-no-padding="true"] {
width: 100%; .right-side-content {
padding: 0;
}
} }
} }
@media (max-width: $screen-m) {
width: 100%;
flex-direction: column;
}
} }
} }

16
src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx
View File

@ -5,6 +5,7 @@ import React, { ReactNode } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import SearchBlockList, { ISearchBlockListProps } from "@Front/Components/DesignSystem/SearchBlockList"; import SearchBlockList, { ISearchBlockListProps } from "@Front/Components/DesignSystem/SearchBlockList";
import Footer from "@Front/Components/DesignSystem/Footer";
export type IPropsDashboardWithList = { export type IPropsDashboardWithList = {
title?: string; title?: string;
@ -36,12 +37,15 @@ export default function DefaultDashboardWithList(props: IProps) {
<div className={classes["content"]}> <div className={classes["content"]}>
<SearchBlockList blocks={blocks} onSelectedBlock={onSelectedBlock} bottomButton={bottomButton} /> <SearchBlockList blocks={blocks} onSelectedBlock={onSelectedBlock} bottomButton={bottomButton} />
<div className={classes["right-side"]} data-no-padding={noPadding}> <div className={classes["right-side"]} data-no-padding={noPadding}>
{hasBackArrow && ( <div className={classes["right-side-content"]}>
<div className={classes["back-arrow-desktop"]}> {hasBackArrow && (
<BackArrow url={backArrowUrl ?? ""} /> <div className={classes["back-arrow-desktop"]}>
</div> <BackArrow url={backArrowUrl ?? ""} />
)} </div>
{children} )}
{children}
</div>
<Footer />
</div> </div>
</div> </div>
<Version /> <Version />