ranger/rangerhq-tuner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat(v0.4.1-prep): back link from Options page to Tuner main UI

Browse Source 
David flagged 2026-06-09 night: 'when i click the settings button i
go to settings but we have no back link to radio'. Real UX gap —
Options was a one-way trip. The popup auto-closes on launch and the
NewTab is in a different tab, so there was no obvious way back.

Fix: the existing brand header (helmet + 'RangerHQ Tuner — Options'
title) is now a single anchor pointing at newtab.html. Adds a small ←
glyph to the left of the helmet that hover-shifts left + colour-shifts
to accent green for a clear back-affordance.

Same-tab navigation (just an href, no chrome.tabs.create) so the user
doesn't accumulate Tuner tabs. They came IN via Options, they go OUT
into the player UI in the same tab.

Aria: the ← is hidden from screen readers (decorative); the title
attribute on the anchor gives the accessible label.

2 files, +24 lines, 4 lines modified in existing .opt-brand block.

Branch: v0.4.1-prep — not for immediate ship since v0.4.0 is still
in Web Store re-review. Bundle this with light-mode + other polish
into v0.5.0 OR ship as quick v0.4.1 patch after v0.4.0 clears.
This commit is contained in:
David Keane
2026-06-09 23:42:42 +01:00
parent f796fe8223
commit 41f42f1048
2 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/options/options.css
+23 -1
View File
@@ -40,7 +40,29 @@ html, body {
.opt-brand { .opt-brand {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 10px;
text-decoration: none;
color: inherit;
padding: 4px 8px;
margin: -4px -8px;
border-radius: var(--radius);
}
.opt-brand:hover {
background: var(--bg-row);
}
.opt-brand:hover .opt-back {
color: var(--accent);
transform: translateX(-2px);
}
.opt-back {
font-size: 18px;
color: var(--fg-muted);
line-height: 1;
font-weight: 400;
transition: color 120ms ease-out, transform 120ms ease-out;
} }
.opt-helmet { .opt-helmet {
src/options/options.html
+3 -2
View File
@@ -9,10 +9,11 @@
<body> <body>
<header class="opt-header"> <header class="opt-header">
<div class="opt-brand"> <a href="../newtab/newtab.html" class="opt-brand" title="Back to RangerHQ Tuner">
<span class="opt-back" aria-hidden="true">←</span>
<img src="../assets/img/ranger.png" alt="" class="opt-helmet"> <img src="../assets/img/ranger.png" alt="" class="opt-helmet">
<h1>RangerHQ Tuner — Options</h1> <h1>RangerHQ Tuner — Options</h1>
</div> </a>
<span class="opt-version" id="opt-version">v—</span> <span class="opt-version" id="opt-version">v—</span>
</header> </header>