Waters ChurchandClaude Opus 5
fb66d56f7d
Three things the dashboard was making people work for. **The menu handle.** It was the ProdDash wordmark on a pill hanging past the bar's bottom edge, which read as a step cut out of the bar. The wordmark goes back in the bar where it belongs, and the handle becomes a small accent lip on the bar's bottom edge — the same idea as a tile's notch — that grows under the pointer so it stays easy to hit without being loud at rest. That also fixes the animation Safari made a meal of: the old handle transitioned font-size and line-height, animating text metrics frame by frame on the way out. Nothing here animates text. The lip rides `--topbar-h`, the bar's live height, so it tracks the bar's own collapse instead of running a second animation against it, and its hover growth is width, height and opacity only. **Fullscreen.** Fullscreen is for watching, not arranging, so every tile's title bar now folds away on the way in. A notch still peeks one open, and it folds back ten seconds after the pointer leaves that tile — coming back to the tile cancels the countdown. Peeking is a transient class, so a tile's own hidden/shown preference is untouched and comes back with the screen. **Tile settings.** Gear settings are display choices — a text size, a filter, a colour — so they apply as they are changed and save with the layout. Apply and Cancel are gone; close by clicking away, pressing Escape, or the gear again. Typing is debounced so a remount doesn't land on every keystroke, and an unchanged value remounts nothing (a text field fires input and then change for one edit). The module guide says so now too. Verified in the browser: settings apply live and persist, no-op changes cost nothing, all three close paths work, and in fullscreen both heads fold, one peeks, it folds back at ten seconds, returning the pointer cancels it, and leaving fullscreen restores everything with no peeks left behind. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
71 lines
3.0 KiB
HTML
71 lines
3.0 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>ProdDash</title>
|
||
<meta name="theme-color" content="#0b0e12">
|
||
<link rel="manifest" href="/manifest.webmanifest">
|
||
<link rel="icon" href="/icons/icon-192.png">
|
||
<link rel="apple-touch-icon" href="/icons/icon-180.png">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="ProdDash">
|
||
<link rel="stylesheet" href="/style.css">
|
||
</head>
|
||
<body>
|
||
<header id="topbar">
|
||
<span id="brand">Prod<span class="accent">Dash</span></span>
|
||
|
||
<span class="spacer"></span>
|
||
|
||
<button class="tb-btn icon" id="fs-btn" title="Fullscreen — auto-fits the layout to the screen" aria-label="Fullscreen">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M4 9V5a1 1 0 0 1 1-1h4"/><path d="M20 9V5a1 1 0 0 0-1-1h-4"/>
|
||
<path d="M4 15v4a1 1 0 0 0 1 1h4"/><path d="M20 15v4a1 1 0 0 1-1 1h-4"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<div class="dropdown" id="add-dd">
|
||
<button class="tb-btn icon" id="add-btn" title="Add a module tile" aria-label="Add tile">＋</button>
|
||
<div class="menu" id="add-menu" hidden></div>
|
||
</div>
|
||
|
||
<div class="dropdown" id="layout-dd">
|
||
<button class="tb-btn icon" id="layout-btn" title="Save, load or reset layouts" aria-label="Layouts">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||
<rect x="3" y="3" width="8" height="8" rx="1.5"/>
|
||
<rect x="3" y="13" width="8" height="8" rx="1.5"/>
|
||
<rect x="13" y="3" width="8" height="18" rx="1.5"/>
|
||
</svg>
|
||
</button>
|
||
<div class="menu" id="layout-menu" hidden></div>
|
||
</div>
|
||
|
||
<a class="tb-btn" id="admin-link" href="/admin/" title="Configure modules (server-wide)">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||
<path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm8.4-2.1.1-1.4-.1-1.4 1.7-1.3-1.6-2.8-2 .7a7.9 7.9 0 0 0-2.4-1.4l-.3-2.1H11l-.3 2.1a7.9 7.9 0 0 0-2.4 1.4l-2-.7L4.7 9.3 6.4 10.6l-.1 1.4.1 1.4-1.7 1.3 1.6 2.8 2-.7a7.9 7.9 0 0 0 2.4 1.4l.3 2.1h2.8l.3-2.1a7.9 7.9 0 0 0 2.4-1.4l2 .7 1.6-2.8-1.7-1.3Z"/>
|
||
</svg>
|
||
Admin
|
||
</a>
|
||
</header>
|
||
|
||
<button id="topbar-notch" title="Hide / show the menu bar" aria-label="Hide or show the menu bar"></button>
|
||
|
||
<main id="gridwrap">
|
||
<div id="grid">
|
||
<div id="empty-state">No tiles yet — use “＋ Add tile” to build this dashboard.<br>
|
||
Every browser keeps its own layout.</div>
|
||
</div>
|
||
</main>
|
||
|
||
<div id="modal-backdrop" hidden>
|
||
<div id="modal" role="dialog" aria-modal="true"></div>
|
||
</div>
|
||
|
||
<div id="toast" hidden></div>
|
||
|
||
<script type="module" src="/shell.js"></script>
|
||
</body>
|
||
</html>
|