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

✨ Fixing background on default double side page

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-19 15:25:24 +02:00
parent 3f24599912
commit 0a263ec2db
2 changed files with 38 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,41 +1,45 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .root {
position: relative;
.content { .content {
display: flex; display: flex;
.sides { .sides {
min-height: calc(100vh - 83px); min-height: calc(100vh - 83px);
height: fit-content;
width: 50%; width: 50%;
@media (max-width: $screen-m) { @media (max-width: $screen-m) {
width: 100%; width: 100%;
} }
}
}
&.image-container { .image-container {
@media (max-width: $screen-m) { @media (max-width: $screen-m) {
display: none; display: none;
} }
background: var(--color-neutral-50); background: var(--color-neutral-50);
.image { .image {
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;
} }
} }
&.background-image-container { .background-image-container {
height: 0px; position: fixed;
@media (max-width: $screen-m) { width: 50vw;
display: none; top: 83px;
} right: 0;
height: calc(100vh - 83px);
@media (max-width: $screen-m) {
display: none;
}
.background-image { .background-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
}
}
} }
} }
} }

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

@ -2,7 +2,7 @@ import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version"; import Version from "@Front/Components/DesignSystem/Version";
import classNames from "classnames"; import classNames from "classnames";
import Image, { StaticImageData } from "next/image"; import Image, { StaticImageData } from "next/image";
import React, { ReactNode, useEffect, useRef } from "react"; import React, { ReactNode, useEffect } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
@ -28,48 +28,23 @@ export default function DefaultDoubleSidePage(props: IProps) {
} }
}, [scrollTop, title]); }, [scrollTop, title]);
useEffect(() => {
// make second element ref height same as first element ref height
const resizeObserver = new ResizeObserver(() => {
if (secondElementRef.current && firstElementRef.current) {
console.log("Recalculate");
if (secondElementRef.current.clientHeight !== 0) {
secondElementRef.current.style.height = `0px`;
}
secondElementRef.current.style.height = `${firstElementRef.current.clientHeight}px`;
}
});
if (firstElementRef.current) {
resizeObserver.observe(firstElementRef.current);
}
return () => resizeObserver.disconnect();
}, []);
const firstElementRef = useRef<HTMLDivElement>(null);
const secondElementRef = useRef<HTMLDivElement>(null);
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<Header isUserConnected={showHeader} /> <Header isUserConnected={showHeader} />
<div className={classes["content"]}> <div className={classes["content"]}>
<div className={classNames(classes["sides"], classes["side-left"])} ref={firstElementRef}> <div className={classNames(classes["sides"], classes["side-left"])}>{children}</div>
{children}
</div>
{type === "image" && (
<div className={classNames(classes["sides"], classes["image-container"])} ref={secondElementRef}>
<Image alt={"right side image"} src={image} className={classes["image"]} />
</div>
)}
{type === "background" && (
<div className={classNames(classes["sides"], classes["background-image-container"])} ref={secondElementRef}>
<Image alt={"right side image"} src={image} className={classes["background-image"]} priority />
</div>
)}
</div> </div>
<Version /> <Version />
{type === "image" && (
<div className={classes["image-container"]}>
<Image alt={"right side image"} src={image} className={classes["image"]} />
</div>
)}
{type === "background" && (
<div className={classes["background-image-container"]}>
<Image alt={"right side image"} src={image} className={classes["background-image"]} priority />
</div>
)}
</div> </div>
); );
} }