github/Bose-SoundTouch
1
0
Fork 0
mirror of https://github.com/gesellix/Bose-SoundTouch.git synced 2026-08-18 08:36:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): consistent footers + a shared docs affordance (refs #451)

Browse Source 
Unify the three surfaces' footers and rework the documentation link:

- All footers now show the same version-only line (AfterTouch <version>
  (<commit>) • <date>), centered and full-width. The chooser footer no
  longer caps its width or carries a docs link; the admin footer uses the
  same "•" separator as the player and chooser instead of "-".
- The chooser gets a prominent in-body Documentation link with a book
  icon, distinct from the two destination rows (and removed from the top
  bar, which is now brand-only).
- That same book icon becomes a small docs button in the player navbar
  and the admin header bar, so documentation is one click away from every
  surface.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Tobias Gesellchen
2026-06-07 15:08:26 +02:00
co-authored by Claude Opus 4.8
parent d9ef84067e
commit 631422967d
5 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/service/handlers/web/css/style.css
+4
View File
@@ -18,7 +18,11 @@ body { font-family: sans-serif; margin: 20px; }
.topbar .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.topbar .brand-name { font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; }
.topbar .brand-subtitle { font-size: .7rem; font-weight: 400; opacity: .7; }
.topbar .bar-links { display: flex; align-items: center; gap: .25rem; }
.topbar .bar-links a {
display: inline-flex;
align-items: center;
gap: .3rem;
color: #fff;
font-size: .85rem;
opacity: .85;
pkg/service/handlers/web/index.html
+7
View File
@@ -17,6 +17,13 @@
</span>
</a>
<nav class="bar-links">
<a href="https://gesellix.github.io/Bose-SoundTouch/" target="_blank" rel="noopener" title="Documentation">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
</svg>
Docs
</a>
<a href="/app">Open the Player &rarr;</a>
</nav>
</header>
pkg/service/handlers/web/js/script.js
+1 -1
View File
@@ -811,7 +811,7 @@ async function fetchVersion() {
const shortCommit = data.commit.substring(0, 7);
commitStr = `<a href="${data.commit_url}" target="_blank" style="color: inherit; text-decoration: underline;">${shortCommit}</a>`;
}
info.innerHTML = `AfterTouch ${versionStr} (${commitStr}) - ${data.date}`;
info.innerHTML = `AfterTouch ${versionStr} (${commitStr}) • ${data.date}`;
}
} catch (error) {
console.error("Failed to fetch version info", error);
pkg/service/handlers/web/landing.html
+24 -18
View File
@@ -70,14 +70,6 @@
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; }
.brand-subtitle { font-size: 0.7rem; font-weight: 400; opacity: 0.7; }
.bar-links a {
font-size: 0.85rem;
opacity: 0.8;
padding: 0.35rem 0.5rem;
border-radius: 4px;
transition: opacity 0.15s, background 0.15s;
}
.bar-links a:hover { opacity: 1; background: rgba(127, 127, 127, 0.18); }
/* ── Chooser ─────────────────────────────────────────────────── */
main {
@@ -148,17 +140,28 @@
padding: 0.1rem 0.5rem;
}
/* ── Footer (version line, like the app and admin) ───────────── */
/* Prominent docs link, distinct from the two destination rows. */
.docs-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
font-size: 0.95rem;
color: var(--text-dim);
transition: color 0.15s;
}
.docs-link:hover { color: var(--text); }
.docs-link svg { flex-shrink: 0; }
/* ── Footer (version line, identical to the app and admin) ────── */
footer {
max-width: 32rem;
margin: 0 auto;
padding: 1.5rem;
padding: 1.5rem 1rem;
text-align: center;
font-size: 0.8rem;
color: var(--text-dim);
}
footer a { text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--text); }
.dot { opacity: 0.5; padding: 0 0.15rem; }
</style>
</head>
<body>
@@ -170,9 +173,6 @@
<span class="brand-subtitle">Bose SoundTouch Toolkit</span>
</span>
</a>
<nav class="bar-links">
<a href="https://gesellix.github.io/Bose-SoundTouch/" target="_blank" rel="noopener">Documentation</a>
</nav>
</header>
<main>
@@ -196,12 +196,18 @@
<span class="arrow" aria-hidden="true">&rarr;</span>
</a>
</nav>
<a class="docs-link" href="https://gesellix.github.io/Bose-SoundTouch/" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
</svg>
Documentation
</a>
</main>
<footer>
<span id="version-info">AfterTouch</span>
<span class="dot">&middot;</span>
<a href="https://gesellix.github.io/Bose-SoundTouch/" target="_blank" rel="noopener">Documentation</a>
</footer>
<script>
pkg/service/soundtouchweb/static/js/app.js
+6
View File
@@ -217,6 +217,12 @@ function App() {
<button class="btn-icon" onClick=${discover} title="Discover">
<img src="/app/static/img/knob-mono.svg" alt="Discover" class="nav-discover-icon ${isDiscovering ? 'buzzing' : ''}" />
</button>
<a href="https://gesellix.github.io/Bose-SoundTouch/" target="_blank" rel="noopener" title="Documentation">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
</svg>
</a>
</div>
</nav>