Jonathan/Lyra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): settings helptext behind a "?" popup instead of inline paragraphs

Browse Source 
The Qobuz/Monitor/Discovery help I just added was always-visible and verbose.
Replace each with a compact "?" button (new reusable HelpButton) that opens the
same content in a popup (reuses the Modal), keeping the settings tabs clean.

web tsc + build clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan
2026-07-14 12:21:17 +02:00
parent 24d4ba6098
commit 1a612f1808
3 changed files with 72 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/design.css
+11 -1
View File
@@ -259,7 +259,7 @@ nav.contents .sep { flex: 1; }
.field.wide { grid-column: 1 / -1; }
.subhead {
font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--graphite); margin: 26px 0 2px;
color: var(--graphite); margin: 26px 0 2px; display: flex; align-items: center; gap: 10px;
}
.field .set { color: var(--accent); }
.info-panel {
@@ -276,6 +276,16 @@ nav.contents .sep { flex: 1; }
.help { font-size: 0.8rem; color: var(--graphite); line-height: 1.5; margin: 4px 0 14px; max-width: 62ch; }
.help b { color: var(--ink); font-weight: 600; }
.help code { font-family: var(--mono); font-size: 0.85em; }
/* compact "?" trigger that opens help in a popup */
.help-btn {
font-family: var(--mono); font-size: 0.72rem; line-height: 1; width: 20px; height: 20px;
border: 1.5px solid var(--rule-2); border-radius: 50%; background: transparent; color: var(--graphite);
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.help-btn:hover { border-color: var(--accent); color: var(--accent); }
.help-body { font-size: 0.9rem; color: var(--ink); line-height: 1.6; }
.help-body b { font-weight: 600; }
.help-body code { font-family: var(--mono); font-size: 0.85em; }
.info-panel + .info-panel { margin-top: 14px; }
/* ── Modal ────────────────────────────────────────────── */