diff --git a/partials/desktop/shell.php b/partials/desktop/shell.php index 49882327..a32a2345 100644 --- a/partials/desktop/shell.php +++ b/partials/desktop/shell.php @@ -15,41 +15,6 @@ $wallpaper = $desktopPayload['desktop']['wallpaper'];
- -
diff --git a/public/assets/desktop/desktop.css b/public/assets/desktop/desktop.css index a73b10fb..46700867 100644 --- a/public/assets/desktop/desktop.css +++ b/public/assets/desktop/desktop.css @@ -36,18 +36,9 @@ body[data-skin="linux"] { } .desktop-shell { - display: grid; - grid-template-columns: 320px minmax(0, 1fr); min-height: 100vh; } -.desktop-sidebar { - padding: 32px; - backdrop-filter: blur(20px); - background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.32)); - border-right: 1px solid var(--shell-border); -} - .eyebrow { margin: 0 0 12px; text-transform: uppercase; @@ -76,50 +67,10 @@ h1 { opacity: 0.88; } -.panel { - margin-top: 24px; - padding: 18px; - border: 1px solid var(--shell-border); - background: var(--shell-panel); - border-radius: 18px; - box-shadow: var(--shadow); -} - -.skin-switcher { - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.skin-chip, -.text-link { - color: inherit; - text-decoration: none; -} - -.skin-chip { - display: inline-flex; - align-items: center; - padding: 10px 14px; - border-radius: 999px; - border: 1px solid var(--shell-border); - background: rgba(255, 255, 255, 0.06); -} - -.skin-chip.is-active { - background: var(--accent); - color: #0f172a; - border-color: transparent; -} - -.fact-list { - padding-left: 18px; - opacity: 0.9; -} - .desktop-stage { position: relative; overflow: hidden; + min-height: 100vh; padding: 24px; } @@ -170,6 +121,7 @@ h1 { display: grid; gap: 14px; width: min(320px, calc(100% - 48px)); + z-index: 20; } .widget-card { @@ -204,6 +156,7 @@ h1 { position: absolute; inset: 0; pointer-events: none; + z-index: 40; } .window { @@ -285,6 +238,7 @@ h1 { background: var(--taskbar-bg); backdrop-filter: blur(18px); border: 1px solid var(--shell-border); + z-index: 120; } .start-button, @@ -310,7 +264,7 @@ h1 { position: absolute; left: 24px; bottom: 102px; - z-index: 90; + z-index: 130; display: grid; align-content: start; grid-template-columns: minmax(240px, 280px) minmax(280px, 360px); @@ -415,17 +369,8 @@ h1 { } @media (max-width: 1100px) { - .desktop-shell { - grid-template-columns: 1fr; - } - - .desktop-sidebar { - border-right: 0; - border-bottom: 1px solid var(--shell-border); - } - .desktop-stage { - min-height: 70vh; + min-height: 100vh; padding-bottom: 120px; } diff --git a/public/assets/desktop/desktop.js b/public/assets/desktop/desktop.js index 5d6670e3..e2bd8609 100644 --- a/public/assets/desktop/desktop.js +++ b/public/assets/desktop/desktop.js @@ -15,6 +15,25 @@ if (payloadNode) { const windows = new Map(); const activeWidgets = new Set(payload.widgets.active_ids); let zIndex = 20; + let topDesktopInset = 24; + let sideDesktopInset = 24; + let bottomDesktopInset = 120; + + const measureDesktopBounds = () => { + if (!windowsRoot) { + return; + } + + const taskbar = document.querySelector('.taskbar'); + const stageRect = windowsRoot.getBoundingClientRect(); + const taskbarRect = taskbar ? taskbar.getBoundingClientRect() : null; + + topDesktopInset = 24; + sideDesktopInset = 24; + bottomDesktopInset = taskbarRect + ? Math.max(24, Math.round(stageRect.bottom - taskbarRect.top + 8)) + : 120; + }; const setStartMenuOpen = (isOpen) => { if (!startMenu) { @@ -98,10 +117,11 @@ if (payloadNode) { record.restoreLayout = { ...record.layout }; record.state.maximized = true; record.node.classList.add('is-maximized'); - record.node.style.left = '24px'; - record.node.style.top = '24px'; - record.node.style.width = 'calc(100% - 48px)'; - record.node.style.height = 'calc(100% - 120px)'; + measureDesktopBounds(); + record.node.style.left = `${sideDesktopInset}px`; + record.node.style.top = `${topDesktopInset}px`; + record.node.style.width = `calc(100% - ${sideDesktopInset * 2}px)`; + record.node.style.height = `calc(100% - ${topDesktopInset + bottomDesktopInset}px)`; focusWindow(windowId); return; } @@ -449,7 +469,20 @@ if (payloadNode) { renderWidgets(); renderStartMenu(); setStartMenuOpen(false); + measureDesktopBounds(); payload.windows.forEach(createWindow); renderClock(); window.setInterval(renderClock, 1000); + window.addEventListener('resize', () => { + measureDesktopBounds(); + + windows.forEach((record) => { + if (record.state.maximized) { + record.node.style.left = `${sideDesktopInset}px`; + record.node.style.top = `${topDesktopInset}px`; + record.node.style.width = `calc(100% - ${sideDesktopInset * 2}px)`; + record.node.style.height = `calc(100% - ${topDesktopInset + bottomDesktopInset}px)`; + } + }); + }); }