michael/ProdDash
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

The folding section reads as a heading first

Browse Source 
Theme's title was coming out at the normal weight — <summary> does not
inherit an <h1>'s boldness, so sitting it under .admin-h1 got the size,
colour and spacing but not the type. It now matches the other section
headings exactly.

The caret moved to the right of the words. A marker in front pushes the
heading out of line with every other one on the page; behind it, the section
still reads as "Theme" first and the caret only says there is more.

Written as the pattern rather than as Theme's own styling: any section that
folds is a <details class="admin-fold"> headed by a
<summary class="admin-h1 admin-fold-title">, and the whole row is the target.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Waters Church
2026-09-17 13:22:11 -04:00
co-authored by Claude Opus 5
parent ea1eac1c28
commit f72170b4e1
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin/admin.css
+12 -5
View File
@@ -451,19 +451,26 @@ a.btn { text-decoration: none; }
/* one swatch per preset: a miniature dashboard (page, a tile on it, the /* one swatch per preset: a miniature dashboard (page, a tile on it, the
accent as a status dot) and the name; the current one wears the accent */ accent as a status dot) and the name; the current one wears the accent */
/* A whole admin section that folds, wearing the same disclosure triangle as /* ── a collapsible admin section ─────────────────────────────────────
a module's config groups. Theme is set once for a building and then left The pattern for any section of this page that folds. The markup is a
alone, so it starts closed and keeps the rest of the page in reach. */ <details class="admin-fold"> holding the section's contents, headed by a
<summary class="admin-h1 admin-fold-title">: the title keeps the same
type as every other section heading — a <summary> would otherwise come
out at the normal weight — and the caret follows the words, so a folded
section still reads as a heading first. The whole row is the hit target. */
details.admin-fold > summary.admin-fold-title { details.admin-fold > summary.admin-fold-title {
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-weight: 700; /* matches h1.admin-h1; summary defaults to normal */
user-select: none; user-select: none;
} }
details.admin-fold > summary.admin-fold-title::-webkit-details-marker { display: none; } details.admin-fold > summary.admin-fold-title::-webkit-details-marker { display: none; }
details.admin-fold > summary.admin-fold-title::before { /* after the title, not before it — the heading reads first, the caret says
there is more behind it */
details.admin-fold > summary.admin-fold-title::after {
content: ""; content: "";
width: 0; height: 0; width: 0; height: 0;
border-left: 6px solid var(--muted); border-left: 6px solid var(--muted);
@@ -471,7 +478,7 @@ details.admin-fold > summary.admin-fold-title::before {
border-bottom: 5px solid transparent; border-bottom: 5px solid transparent;
transition: transform 0.15s; transition: transform 0.15s;
} }
details.admin-fold[open] > summary.admin-fold-title::before { transform: rotate(90deg); } details.admin-fold[open] > summary.admin-fold-title::after { transform: rotate(90deg); }
details.admin-fold > summary.admin-fold-title:hover { color: var(--accent); } details.admin-fold > summary.admin-fold-title:hover { color: var(--accent); }
.theme-swatches { .theme-swatches {