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

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

@ -1,17 +1,19 @@
@import "@Themes/constants.scss";
.root {
position: relative;
.content {
display: flex;
.sides {
min-height: calc(100vh - 83px);
height: fit-content;
width: 50%;
@media (max-width: $screen-m) {
width: 100%;
}
}
}
&.image-container {
.image-container {
@media (max-width: $screen-m) {
display: none;
}
@ -24,8 +26,12 @@
}
}
&.background-image-container {
height: 0px;
.background-image-container {
position: fixed;
width: 50vw;
top: 83px;
right: 0;
height: calc(100vh - 83px);
@media (max-width: $screen-m) {
display: none;
}
@ -36,6 +42,4 @@
object-fit: cover;
}
}
}
}
}

35
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 classNames from "classnames";
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";
@ -28,48 +28,23 @@ export default function DefaultDoubleSidePage(props: IProps) {
}
}, [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 (
<div className={classes["root"]}>
<Header isUserConnected={showHeader} />
<div className={classes["content"]}>
<div className={classNames(classes["sides"], classes["side-left"])} ref={firstElementRef}>
{children}
<div className={classNames(classes["sides"], classes["side-left"])}>{children}</div>
</div>
<Version />
{type === "image" && (
<div className={classNames(classes["sides"], classes["image-container"])} ref={secondElementRef}>
<div className={classes["image-container"]}>
<Image alt={"right side image"} src={image} className={classes["image"]} />
</div>
)}
{type === "background" && (
<div className={classNames(classes["sides"], classes["background-image-container"])} ref={secondElementRef}>
<div className={classes["background-image-container"]}>
<Image alt={"right side image"} src={image} className={classes["background-image"]} priority />
</div>
)}
</div>
<Version />
</div>
);
}