OSSForks/daedalOS
1
0
Fork 0
mirror of https://github.com/DustinBrett/daedalOS.git synced 2026-01-15 12:15:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adjust initial viewport if it changes

Browse Source
This commit is contained in:
Dustin Brett
2023-04-06 19:44:47 -07:00
parent c2b182f2a9
commit 7667dd1d28
5 changed files with 50 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/system/Desktop/StyledDesktop.ts
View File

@@ -1,9 +1,13 @@
import styled from "styled-components";
const StyledDesktop = styled.main`
type StyledDesktopProps = {
$height: number;
};
const StyledDesktop = styled.main<StyledDesktopProps>`
background-color: transparent;
contain: strict;
height: 100%;
height: ${({ $height }) => ($height ? `${$height}px` : "100%")};
inset: 0;
overscroll-behavior: none;
position: fixed;
@@ -11,7 +15,7 @@ const StyledDesktop = styled.main`
> canvas {
background-color: inherit;
height: 100%;
height: ${({ $height }) => ($height ? `${$height}px` : "100%")};
left: 0;
object-fit: cover;
position: absolute;

3
components/system/Desktop/index.tsx
View File

@@ -1,6 +1,7 @@
import StyledDesktop from "components/system/Desktop/StyledDesktop";
import useWallpaper from "components/system/Desktop/Wallpapers/useWallpaper";
import FileManager from "components/system/Files/FileManager";
import useHeightOverride from "hooks/useHeightOverride";
import { useRef } from "react";
import { DESKTOP_PATH } from "utils/constants";
@@ -10,7 +11,7 @@ const Desktop: FC = ({ children }) => {
useWallpaper(desktopRef);
return (
<StyledDesktop ref={desktopRef}>
<StyledDesktop ref={desktopRef} $height={useHeightOverride()}>
<FileManager
url={DESKTOP_PATH}
view="icon"

36
hooks/useHeightOverride.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { useLayoutEffect, useState } from "react";
import { ONE_TIME_PASSIVE_EVENT } from "utils/constants";
declare global {
interface Window {
initialHeight?: number;
}
}
const useHeightOverride = (): number => {
const [height, setHeight] = useState<number>(0);
useLayoutEffect(() => {
if (
typeof window !== "undefined" &&
typeof window.initialHeight === "number" &&
window.initialHeight > 0 &&
window.initialHeight !== document.documentElement.clientHeight
) {
setHeight(window.initialHeight);
const resetHeight = (): void => setHeight(0);
window.addEventListener("resize", resetHeight, ONE_TIME_PASSIVE_EVENT);
window.screen.orientation?.addEventListener(
"change",
resetHeight,
ONE_TIME_PASSIVE_EVENT
);
}
}, []);
return height;
};
export default useHeightOverride;

4
pages/_document.tsx
View File

@@ -1,5 +1,6 @@
import type { DocumentContext, DocumentInitialProps } from "next/document";
import NextDocument, { Head, Html, Main, NextScript } from "next/document";
import Script from "next/script";
import { ServerStyleSheet } from "styled-components";
import { DEFAULT_LOCALE } from "utils/constants";
@@ -38,6 +39,9 @@ class Document extends NextDocument {
<Html lang={DEFAULT_LOCALE}>
<Head />
<body>
<Script id="initialHeight" strategy="beforeInteractive">
window.initialHeight = document.documentElement.clientHeight;
</Script>
<Main />
<NextScript />
</body>

1
styles/GlobalStyle.ts
View File

@@ -29,6 +29,7 @@ const GlobalStyle = createGlobalStyle`
html {
background-color: ${({ theme }) => theme.colors.background};
background-position: center;
height: fill-available;
transition: background-image 1.25s linear;
}