74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import { useGlobal } from "web-utils";
|
|
import { LiveGlobal } from "../logic/global";
|
|
import { LSection } from "./l-section";
|
|
import { Loading } from "../../../utils/ui/loading";
|
|
|
|
export const LPage = () => {
|
|
const p = useGlobal(LiveGlobal, "LIVE");
|
|
const mode = p.mode;
|
|
|
|
let childs = Object.values(p.page?.content_tree?.childs || []);
|
|
if (p.layout.section && p.layout.content) {
|
|
childs = [p.layout.section];
|
|
}
|
|
|
|
const rootChilds: string[] | undefined = Object.values(childs).map(
|
|
(e) => e.id
|
|
);
|
|
|
|
return (
|
|
<div className={cx("relative flex flex-1 items-center justify-center")}>
|
|
<div
|
|
className={cx(
|
|
"absolute flex flex-col items-stretch flex-1 bg-white ",
|
|
mode === "mobile"
|
|
? css`
|
|
@media (min-width: 768px) {
|
|
border-left: 1px solid #ccc;
|
|
border-right: 1px solid #ccc;
|
|
width: 375px;
|
|
top: 0px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
bottom: 0px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
overflow-y: auto;
|
|
}
|
|
`
|
|
: "inset-0 overflow-auto",
|
|
|
|
css`
|
|
contain: content;
|
|
`
|
|
)}
|
|
>
|
|
{p.status === "ready" || p.status === "tree-rebuild" ? (
|
|
rootChilds?.map((id) => <LSection key={id} id={id} />)
|
|
) : (
|
|
<Loading />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const mobileCSS = css`
|
|
background-color: white;
|
|
background-image: linear-gradient(45deg, #fafafa 25%, transparent 25%),
|
|
linear-gradient(-45deg, #fafafa 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, #fafafa 75%),
|
|
linear-gradient(-45deg, transparent 75%, #fafafa 75%);
|
|
|
|
background-size: 20px 20px;
|
|
background-position:
|
|
0 0,
|
|
0 10px,
|
|
10px -10px,
|
|
-10px 0px;
|
|
`;
|