nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance and standardize background and layout styling

Browse Source 
Refactored background styling logic to ensure consistent rendering on both `html` and `body` elements. Introduced radial gradients and fixed overscroll behavior. Updated `minHeight` property to use `100dvh` for improved viewport handling.
This commit is contained in:
Sascha Nesterovic
2026-02-03 09:54:55 +01:00
parent d01919381a
commit 5b6c7c8e61
1 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/App.jsx
View File

@@ -158,12 +158,6 @@ export default function App() {
if (gs[0] && !gameId) setGameId(gs[0].id);
};
useEffect(() => {
document.body.style.margin = "0";
document.body.style.padding = "0";
document.body.style.background = "transparent";
}, []);
useEffect(() => {
if (document.getElementById("hp-anim-style")) return;
const style = document.createElement("style");
@@ -176,6 +170,42 @@ export default function App() {
document.head.appendChild(style);
}, []);
useEffect(() => {
const bg =
`radial-gradient(circle at 12% 18%, rgba(120,80,30,0.18), rgba(0,0,0,0) 38%),
radial-gradient(circle at 85% 22%, rgba(120,80,30,0.12), rgba(0,0,0,0) 42%),
radial-gradient(circle at 35% 82%, rgba(120,80,30,0.10), rgba(0,0,0,0) 45%),
radial-gradient(circle at 70% 75%, rgba(90,60,25,0.10), rgba(0,0,0,0) 40%),
repeating-linear-gradient(0deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 3px),
linear-gradient(180deg, #f1e2c2, #e3c996)`;
// html & body & root fixen
document.documentElement.style.height = "100%";
document.body.style.height = "100%";
document.documentElement.style.margin = "0";
document.body.style.margin = "0";
document.documentElement.style.padding = "0";
document.body.style.padding = "0";
// wichtig: Hintergrund auf html UND body setzen
document.documentElement.style.background = bg;
document.body.style.background = bg;
// verhindert, dass weiß vom Root durchscheint
const root = document.getElementById("root");
if (root) root.style.minHeight = "100dvh";
}, []);
useEffect(() => {
if (document.getElementById("hp-global-style")) return;
const style = document.createElement("style");
style.id = "hp-global-style";
style.innerHTML = `
html, body { overscroll-behavior-y: none; }
`;
document.head.appendChild(style);
}, []);
useEffect(() => {
(async () => {
try { await load(); } catch {}
@@ -498,7 +528,7 @@ export default function App() {
/* ===== Styles (Parchment / Boardgame Look) ===== */
const styles = {
page: {
minHeight: "100vh",
minHeight: "100dvh",
margin: 0,
padding: 0,
background:
@@ -691,7 +721,6 @@ const styles = {
lineHeight: "38px",
textAlign: "center",
},
// Help modal content
helpBody: {
marginTop: 10,