diff --git a/static/v2.html b/static/v2.html index 52792f5..5825c3c 100644 --- a/static/v2.html +++ b/static/v2.html @@ -109,6 +109,9 @@ color: var(--muted); font-size: 0.92rem; } .who a { color: var(--ink); } + .who-actions { + display: inline-flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; + } .boards-row { display: flex; gap: 0.75rem; align-items: stretch; margin-bottom: 1rem; min-width: 0; @@ -283,9 +286,16 @@ } .help-dialog p { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.9rem; line-height: 1.4; } .help-dialog ul { - margin: 0 0 0.85rem; padding-left: 1.1rem; + margin: 0 0 0.65rem; padding-left: 1.1rem; color: var(--muted); font-size: 0.88rem; line-height: 1.45; } + .help-dialog h3 { + font-family: "Source Sans 3", sans-serif; + font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; + text-transform: uppercase; color: var(--ink); + margin: 0.75rem 0 0.35rem; + } + .help-dialog h3:first-of-type { margin-top: 0.15rem; } .help-dialog kbd { font-family: "Source Sans 3", sans-serif; font-size: 0.85rem; font-weight: 600; @@ -293,6 +303,29 @@ background: var(--input-bg); color: var(--ink); } .help-dialog .row { margin-top: 0.25rem; } + button.help-link, a.help-link { + all: unset; cursor: pointer; color: var(--ink); + text-decoration: underline; text-underline-offset: 2px; + font-size: inherit; + } + button.help-link:focus-visible { + outline: 3px solid var(--focus); outline-offset: 2px; + } + .who .help-chip { + all: unset; cursor: pointer; + display: inline-grid; place-items: center; + width: 1.85rem; height: 1.85rem; + border: 1px solid var(--rule); color: var(--muted); + font-family: "Source Sans 3", sans-serif; + font-size: 0.95rem; font-weight: 600; + vertical-align: middle; + } + .who .help-chip:hover, .who .help-chip:focus-visible { + color: var(--ink); border-color: var(--ink); + } + .who .help-chip:focus-visible { + outline: 3px solid var(--focus); outline-offset: 2px; + } .hidden { display: none !important; } .compose-head { display: flex; justify-content: space-between; gap: 0.75rem; @@ -375,7 +408,8 @@ -

Paper board · press ? for help · classic layout

+

Paper board · · press ? · classic layout

-

Board tips

-

Open a name to vote, play pronunciation, and leave notes.

+

How this board works

+

Sharing

+

Names & votes

+ +

Columns

+ +

Notes & voice

+
- Esc or ? again + Esc or ?
@@ -473,6 +521,11 @@ return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable; } + function openHelp() { + const dlg = document.getElementById("help-dialog"); + if (dlg && !dlg.open) dlg.showModal(); + } + function toggleHelp() { const dlg = document.getElementById("help-dialog"); if (!dlg) return; @@ -486,6 +539,12 @@ document.getElementById("help-dialog").addEventListener("click", (e) => { if (e.target === e.currentTarget) e.currentTarget.close(); }); + document.querySelectorAll("[data-open-help]").forEach((btn) => { + btn.addEventListener("click", (e) => { + e.preventDefault(); + openHelp(); + }); + }); document.addEventListener("keydown", (e) => { if (e.key === "?" || (e.key === "/" && e.shiftKey)) { if (isTypingTarget(e.target)) return;