ilia/stork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fuller help dialog + visible Help for phones #8

Merged
ilia merged 1 commits from fix/fuller-help into main 2026-08-07 15:12:02 -05:00
Conversation 0 Commits 1 Files Changed 1
+70 -11
1 changed files with 70 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/v2.html
+70 -11
View File
@@ -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 @@
<section id="board" class="hidden">
<div class="who">
<span id="who"></span>
<span>
<span class="who-actions">
<button type="button" class="help-chip" data-open-help aria-label="Help" title="Help">?</button>
<button type="button" class="ghost" id="share-link" style="padding:0.35rem 0.6rem;font-size:0.85rem">Copy share link</button>
<a href="#suggest">Suggest a name</a>
</span>
@@ -430,22 +464,36 @@
</div>
</section>
<p class="foot">Paper board · press <kbd>?</kbd> for help · <a href="/v1">classic layout</a></p>
<p class="foot">Paper board · <button type="button" class="help-link" data-open-help>Help</button> · press <kbd>?</kbd> · <a href="/v1">classic layout</a></p>
</main>
<dialog id="help-dialog" class="help-dialog" aria-labelledby="help-title">
<div class="help-inner">
<h2 id="help-title">Board tips</h2>
<p>Open a name to vote, play pronunciation, and leave notes.</p>
<h2 id="help-title">How this board works</h2>
<h3>Sharing</h3>
<ul>
<li><strong>▶</strong> play — AI speech until you record</li>
<li><strong>●</strong> record / <strong>■</strong> stop — your clip replaces AI</li>
<li><strong>↺</strong> clear recording and use AI again</li>
<li><strong>✎</strong> edit spoken form, origin, meaning · <strong>✓</strong> save</li>
<li>Swipe columns sideways on phone</li>
<li>The <strong>/b/…</strong> link is the key — no password. Use <strong>Copy share link</strong>.</li>
<li>Everyone picks a display name; it shows on votes.</li>
</ul>
<h3>Names &amp; votes</h3>
<ul>
<li>Tap a name to expand. ▲ / ▼ rank it (tap again to clear).</li>
<li>Suggest names below; pick which column with the toggles.</li>
</ul>
<h3>Columns</h3>
<ul>
<li>Rename a column title in place. <strong>+</strong> adds another (up to 4).</li>
<li><strong>✕</strong> removes an extra column (the first stays).</li>
<li>On phone, swipe sideways between columns.</li>
</ul>
<h3>Notes &amp; voice</h3>
<ul>
<li><strong>EN / RU / HE</strong> — spoken form, origin, meaning per language.</li>
<li><strong>▶</strong> play (AI until you record) · <strong>●</strong> record · <strong>■</strong> stop</li>
<li><strong>↺</strong> back to AI · <strong>✎</strong> edit notes · <strong>✓</strong> save</li>
</ul>
<div class="row">
<button type="button" id="help-close">Close</button>
<span class="hint" style="margin:0">Esc or <kbd>?</kbd> again</span>
<span class="hint" style="margin:0">Esc or <kbd>?</kbd></span>
</div>
</div>
</dialog>
@@ -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;