From 628dcb814ece6335667e2b719049728aa161d8c9 Mon Sep 17 00:00:00 2001 From: grm Date: Tue, 15 Sep 2026 23:17:17 +0300 Subject: Make the post form's tag input a box with a folded list of chips A checkbox per existing tag stops working once a blog has dozens of them. The form is now one comma-separated box, prefilled with the post's tags, and the blog's tags sit folded under it as chips; a small script toggles a clicked chip in the box, and without it the chips are a plain list to copy from. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A --- internal/web/static/dashboard.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'internal/web/static/dashboard.css') diff --git a/internal/web/static/dashboard.css b/internal/web/static/dashboard.css index 36de479..679fdde 100644 --- a/internal/web/static/dashboard.css +++ b/internal/web/static/dashboard.css @@ -85,10 +85,13 @@ label.check { font-weight: normal; font-size: 0.95em; } label.check input { width: auto; margin: 0 0.45em 0 0; vertical-align: middle; accent-color: var(--accent); } input[type=radio], input[type=checkbox] { accent-color: var(--accent); } .row { display: flex; flex-wrap: wrap; gap: 0 1.5em; } -/* The post form's tag checklist: a label-like heading over a wrapped row of checkboxes. */ -p.lbl { margin: 0.9em 0 0.3em; font-size: 0.875em; font-weight: 500; } -.tagpick { display: flex; flex-wrap: wrap; gap: 0.2em 1.2em; margin: 0 0 0.3em; } -.tagpick label.check { margin: 0; } +/* The post form's list of existing tags, folded under the tags box; the chips are buttons only once the script runs. */ +details.tagref { margin: -0.4em 0 0.6em; font-size: 0.9em; } +details.tagref summary { cursor: pointer; color: var(--muted); } +.chips { margin: 0.4em 0 0; line-height: 2; } +.chip { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 0.7em; margin: 0 0.3em 0.3em 0; line-height: 1.7; background: var(--surface-2); } +.tagref.live .chip { cursor: pointer; } +.chip.on { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); } .row label { flex: 1 1 12em; min-width: 12em; } button, .btn { display: inline-block; font: inherit; font-size: 0.9em; font-weight: 600; padding: 0.5em 1.05em; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; vertical-align: middle; line-height: 1.4; } button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } -- cgit v1.2.3