giorgio/read.markets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: regroup topbar + unify the three header toggles

Browse source 
Header layout was visibly broken on desktop after the mobile-drawer
change: flex space-between distributed brand, BETA, tone-toggle, nav
and header-right across the bar, so BETA drifted away from the brand
wordmark and the tone-toggle landed in the middle of the row.

Markup: brand + BETA are now wrapped in .header-left so they ride
together. The tone-toggle moves back inside .header-right next to
theme + lang where it logically belongs. CSS: the header switches to
grid (1fr auto 1fr) on desktop, which truly centres the nav regardless
of side-group widths. The mobile @media block reverts to flex so the
hamburger + slide-out drawer still work.

Toggle redesign (tone, theme, language):

- The single-button theme widget becomes a Light | Dark segmented
  control matching the other two so all three read as one cluster.
  cassandraToggleTheme is replaced by cassandraSetTheme(theme), the
  toggle's data-theme attribute is synced on page load.
- All three share one CSS rule set: same padding, font, border, and
  a min-width so the active-only width matches the expanded width
  (no layout jump on hover).
- On hover-capable devices each toggle collapses to just the active
  option; hovering (or keyboard focus-within) reveals both. Touch
  devices keep both visible — the @media (hover: hover) gate handles
  that and the mobile-drawer block overrides it explicitly so the
  drawer-stacked controls remain full-width with both options shown.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Giorgio Gilestro 2026-05-29 11:00:11 +02:00
parent daa3f79a52
commit 31a8efc27d
2 changed files with 119 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

50
app/templates/base.html
View file

@ -126,6 +126,10 @@
// Reflect the saved value in the toggle on load.
var pill = document.getElementById('tone-toggle');
if (pill) pill.dataset.tone = currentTone();
// Same for the theme toggle — pull the current theme that the
// top-of-page inline script already wrote to <html data-theme>.
var themePill = document.getElementById('theme-toggle');
if (themePill) themePill.dataset.theme = document.documentElement.dataset.theme || 'light';
});
window.cassandraSetTone = function (newTone) {
@ -143,11 +147,11 @@
});
};
window.cassandraToggleTheme = function () {
var d = document.documentElement;
var t = d.dataset.theme === 'light' ? 'dark' : 'light';
d.dataset.theme = t;
try { localStorage.setItem('cassandra.theme', t); } catch (e) {}
window.cassandraSetTheme = function (newTheme) {
document.documentElement.dataset.theme = newTheme;
var pill = document.getElementById('theme-toggle');
if (pill) pill.dataset.theme = newTheme;
try { localStorage.setItem('cassandra.theme', newTheme); } catch (e) {}
};
window.cassandraSetLang = async function (newLang) {
@ -205,18 +209,12 @@
<body>
<div class="app">
<header class="app-header">
<a href="/" class="brand" aria-label="Dashboard">{{ BRAND_NAME }}</a>
{% if BETA_MODE %}<span class="beta-chip" title="Beta — feedback welcome at hello@read.markets">BETA</span>{% endif %}
{# Tone toggle is the one widget we keep visible in the mobile
header even when the drawer is closed — it directly affects the
readability of the content right next to it. #}
<div id="tone-toggle" class="tone-toggle tone-toggle--header" data-tone="INTERMEDIATE"
role="group" aria-label="Explanation level">
<button type="button" data-value="NOVICE"
onclick="cassandraSetTone('NOVICE')">Novice</button>
<button type="button" data-value="INTERMEDIATE"
onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
{# Left group keeps brand + BETA chip pinned together as a single
layout cell so the chip can't drift away from the wordmark when
the header grows or shrinks. #}
<div class="header-left">
<a href="/" class="brand" aria-label="Dashboard">{{ BRAND_NAME }}</a>
{% if BETA_MODE %}<span class="beta-chip" title="Beta — feedback welcome at hello@read.markets">BETA</span>{% endif %}
</div>
{# Mobile hamburger — shown only at ≤480px via CSS. #}
@ -236,10 +234,20 @@
<a href="/log" class="{% if request.url.path.startswith('/log') %}active{% endif %}">Log</a>
</nav>
<div class="header-right">
<button class="theme-toggle" type="button" aria-label="Toggle theme"
onclick="cassandraToggleTheme()">
<span class="theme-toggle__label"></span>
</button>
<div id="tone-toggle" class="tone-toggle" data-tone="INTERMEDIATE"
role="group" aria-label="Explanation level">
<button type="button" data-value="NOVICE"
onclick="cassandraSetTone('NOVICE')">Novice</button>
<button type="button" data-value="INTERMEDIATE"
onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
</div>
<div id="theme-toggle" class="theme-toggle" data-theme="light"
role="group" aria-label="Theme">
<button type="button" data-value="light"
onclick="cassandraSetTheme('light')">Light</button>
<button type="button" data-value="dark"
onclick="cassandraSetTheme('dark')">Dark</button>
</div>
{% set cu = request.state.current_user if request.state and request.state.current_user is defined else None %}
{% if cu and cu.user %}
<div id="lang-toggle" class="lang-toggle" data-lang="{{ cu.user.lang or 'en' }}"