Claude
483c353843
The menu bar's show/hide tab was centred on the screen, exactly where a centred tile's own title-bar tab lands once both bars are hidden: two identical tabs on top of each other, with the tile's unreachable. The tab now sits at the left under the ProdDash brand and wears the accent colour, so it never coincides with a tile tab and reads unmistakably as the dashboard's. To keep it off a top-row tile's status dot and title it straddles the bar's bottom edge while the bar is shown (mostly on the bar, a short lip below) and becomes a slim tab at the very top edge when the bar is hidden. The Admin link is hidden in fullscreen, including when the menu bar is brought back there. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH
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>
|