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

i18n: style the settings select + add a topbar lang toggle

Browse source 
Two issues addressed:

1. The /settings language <select> was unstyled — .settings-select and
   .settings-status classes didn't exist, so the dropdown rendered
   with full native browser chrome and clashed visually with the rest
   of the panel. Added a terminal-aesthetic select: transparent
   background, 1px var(--border), custom chevron via crossed
   linear-gradients, accent border on focus/hover. Disabled options
   (ES/FR/DE 'coming soon') render in --dim.

2. Added a compact EN | IT pill in the topbar next to the theme
   toggle, mirroring the .tone-toggle visual rhythm. Shown only when
   a user is signed in (admins skipped). Optimistic UI: clicking
   flips the pill immediately, PATCHes /api/settings/language, and
   reverts on failure. On /log specifically the page reloads so the
   user sees the localized version of the strategic log right away.

The /settings dropdown still surfaces all five languages (with ES/FR/DE
disabled) for visibility; the topbar pill keeps to the two active
languages to stay compact.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Giorgio Gilestro 2026-05-27 18:14:23 +02:00
parent 50ac6b9366
commit fb71854238
2 changed files with 107 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

69
app/static/css/cassandra.css
View file

@ -136,6 +136,35 @@ a:hover { text-decoration: underline; }
color: var(--bg);
}
/* Language toggle in the topbar — same visual rhythm as the tone
* toggle so the two controls read as a pair. Only EN and IT are
* visible here; the WIP languages (ES/FR/DE) live in /settings. */
.lang-toggle {
display: inline-flex;
border: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.lang-toggle button {
background: transparent;
color: var(--muted);
border: 0;
padding: 4px 8px;
cursor: pointer;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
.lang-toggle button + button { border-left: 1px solid var(--border); }
.lang-toggle button:hover { color: var(--accent); }
.lang-toggle[data-lang="en"] button[data-value="en"],
.lang-toggle[data-lang="it"] button[data-value="it"] {
background: var(--accent);
color: var(--bg);
}
.app-main {
padding: 14px;
display: grid;
@ -1020,6 +1049,46 @@ details[open] .pf-analysis__head-left::before { content: "▾ "; }
margin-left: 8px;
}
/* Terminal-aesthetic <select> used in the Settings page. Native
* browser chrome stripped; we render a small chevron via crossed
* linear-gradients so the control matches the rest of the panel. */
.settings-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: 4px 28px 4px 8px;
font-family: var(--font-mono);
font-size: 12px;
border-radius: 2px;
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, var(--dim) 50%),
linear-gradient(-45deg, transparent 50%, var(--dim) 50%);
background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
transition: border-color 120ms ease-out, color 120ms ease-out;
}
.settings-select:hover,
.settings-select:focus {
outline: none;
border-color: var(--accent);
color: var(--text);
}
.settings-select option { color: var(--text); background: var(--surface); }
.settings-select option:disabled { color: var(--dim); }
.settings-status {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.04em;
}
.settings-status:empty { display: none; }
/* Sections are <details> elements — collapsed by default to keep the
settings page scannable. Click the summary to expand. */
.settings-section {