From 35ef54e248343e2aee06ca4ea0c4497c93dea7b7 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 10 Sep 2026 19:16:53 +0000 Subject: [PATCH] Menubar handle wraps the ProdDash logo as a translucent pill The show/hide handle is now the logo itself: a translucent accent pill wrapped around "ProdDash" at the left of the bar, centred on the text, with "Dash" in the background colour so it reads as a cutout inside the green. The pill is far less opaque than the old solid tab (38% idle, brighter on hover). When the bar hides, the text folds away and the pill shrinks to a slim lip at the top-left edge, exactly where the old tab sat. An invisible in-flow twin of the logo keeps the bar's layout unchanged. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH --- README.md | 12 ++++++---- public/index.html | 5 ++-- public/style.css | 60 +++++++++++++++++++++++++++++++---------------- 3 files changed, 50 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index f585138..5458a01 100644 --- a/README.md +++ b/README.md @@ -140,8 +140,8 @@ below. Nothing is installed without someone clicking. sit flush — when two share a vertical edge, hover the seam and the same kind of pill appears; drag it to trade width (macOS split-view style). - **Fullscreen** (the ⛶ button) is a viewing mode: the menu bar hides (its - green tab brings it back, minus the Admin button), the occupied columns - stretch to the full width, and every column runs to the + green lip at the top-left brings it back, minus the Admin button), the + occupied columns stretch to the full width, and every column runs to the bottom of the screen — the last tile in each column is stretched to end there. A short tile like the clock is never stretched into a ribbon: under another tile it slides to the bottom edge and the tile above grows into the @@ -150,9 +150,11 @@ below. Nothing is installed without someone clicking. its normal row height and scrolls. - A tile's actions (menus, text size, clear…) live in its **title bar**; the small **notch** on the bar's bottom edge hides/shows the whole bar - for a clean wall-display look. The menu bar has the same kind of tab — - the green one under the ProdDash name, kept at the left so it never sits - on top of a tile's own tab. + for a clean wall-display look. The menu bar's handle is the **ProdDash + name itself**, wrapped in a translucent green pill at the left — click it + to hide the bar; the slim green lip it leaves at the top-left edge brings + the bar back. It stays at the left so it never sits on top of a tile's + own tab. - The **gear** on a tile holds per-tile settings (filters, text size, display options) — these belong to this browser's layout, not the server. - The **grid icon** — save the current arrangement to the server under a diff --git a/public/index.html b/public/index.html index 35f8f08..ccffe69 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,8 @@
- ProdDash + + @@ -50,7 +51,7 @@
- +
diff --git a/public/style.css b/public/style.css index 77a5b71..847aea6 100644 --- a/public/style.css +++ b/public/style.css @@ -54,36 +54,56 @@ body.menu-hidden #topbar { overflow: hidden; } -/* The menubar's own show/hide tab. It sits under the ProdDash brand at the - left — not screen-centre, where a tile's own (centred) tab would land - right under it once both bars are hidden — and wears the accent colour - so it never reads as a tile tab. */ +/* The menubar's show/hide handle IS the logo: a translucent accent pill + wrapped around "ProdDash" at the left of the bar, "Dash" cut out in the + background colour. It sits at the left — never screen-centre, where a + tile's own (centred) tab lands once both bars are hidden. When the bar + hides, the pill shrinks to a slim lip at the very top edge, clear of a + top-row tile's status dot and title. */ +.brand-spacer { visibility: hidden; } + #topbar-notch { position: fixed; - /* straddles the bar's bottom edge — mostly on the bar, a short lip below - it — so it never covers a top-row tile's status dot or title */ - top: calc(var(--topbar-h, 46px) - 8px); - left: 12px; - width: 54px; - height: 14px; - padding: 0; - background: var(--accent); + /* vertically centred in the 46px bar: (46 - 24) / 2 = 11px from its top */ + top: calc(var(--topbar-h, 46px) - 35px); + left: 4px; /* the logo text starts at the bar's 12px padding; the pill adds 8px each side */ + height: 24px; + min-width: 60px; + padding: 0 8px; + font: inherit; + font-weight: 800; + font-size: 15px; + letter-spacing: 0.02em; + line-height: 24px; + color: var(--text); + background: color-mix(in srgb, var(--accent) 38%, transparent); border: none; - border-radius: 0 0 10px 10px; + border-radius: 12px; cursor: pointer; z-index: 60; - opacity: 0.55; - transition: opacity 0.15s ease, top 0.22s ease, height 0.22s ease; + transition: top 0.22s ease, height 0.22s ease, line-height 0.22s ease, font-size 0.22s ease, + border-radius 0.22s ease, background 0.15s ease; } -#topbar-notch:hover { opacity: 1; } -/* bar hidden: a slim tab at the very top edge, clear of a top-row tile's dot and title */ -body.menu-hidden #topbar-notch { top: 0; height: 10px; } -#topbar-notch::after { +#topbar-notch .accent { color: var(--bg); } /* the cutout */ +#topbar-notch:hover { background: color-mix(in srgb, var(--accent) 62%, transparent); } +/* bar hidden: the text folds away and the pill becomes a lip at the top edge */ +body.menu-hidden #topbar-notch { + top: 0; + height: 10px; + line-height: 10px; + font-size: 0; + border-radius: 0 0 10px 10px; + background: color-mix(in srgb, var(--accent) 55%, transparent); +} +body.menu-hidden #topbar-notch:hover { background: var(--accent); } +body.menu-hidden #topbar-notch::after { content: ""; display: block; width: 20px; height: 3px; - margin: 4px auto 0; + margin: 0 auto; + position: relative; + top: 3px; border-radius: 999px; background: var(--bg); }