xTr1m/GameList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Relocate language selector to auth form and status bar

Browse Source
This commit is contained in:
Frank Tovar
2026-02-02 14:44:50 +01:00
parent 410e1f0c3f
commit cdfa20809d
3 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
wwwroot/app.js
View File

@@ -287,14 +287,13 @@ function setupHandlers() {
});
setAuthMode(state.authMode);
const langSelect = $("language-select");
if (langSelect) {
langSelect.value = getLanguage();
langSelect.addEventListener("change", () => setLanguage(langSelect.value));
}
const langSelects = Array.from(document.querySelectorAll(".lang-select"));
const syncLanguageSelects = () => langSelects.forEach(sel => sel.value = getLanguage());
syncLanguageSelects();
langSelects.forEach(sel => sel.addEventListener("change", () => setLanguage(sel.value)));
onLanguageChange(() => {
if (langSelect) langSelect.value = getLanguage();
syncLanguageSelects();
renderWelcome();
renderPhasePill();
renderCounts();

21
wwwroot/index.html
View File

@@ -9,18 +9,18 @@
<meta name="app-base" content="">
</head>
<body class="page">
<div class="lang-switch">
<label for="language-select" data-i18n="lang.label">Language</label>
<select id="language-select">
<option value="en" data-i18n="lang.en">English</option>
<option value="de" data-i18n="lang.de">Deutsch</option>
</select>
</div>
<section class="card hidden" id="auth-card">
<div class="stack horizontal">
<button class="ghost active" data-auth-tab="login" type="button" data-i18n="auth.loginTab">Log in</button>
<button class="ghost" data-auth-tab="register" type="button" data-i18n="auth.registerTab">Register</button>
</div>
<div class="stack lang-field">
<span class="label" data-i18n="lang.label">Language</span>
<select class="lang-select">
<option value="en" data-i18n="lang.en">English</option>
<option value="de" data-i18n="lang.de">Deutsch</option>
</select>
</div>
<form id="login-form" class="stack auth-form" data-mode="login">
<label class="stack">
<span class="label" data-i18n="auth.username">Username</span>
@@ -63,6 +63,13 @@
<span class="status-dot"></span>
<span id="phase-pill" data-i18n="phase.loading">Loading…</span>
<span class="counts" id="counts">—</span>
<div class="lang-inline">
<span class="label" data-i18n="lang.label">Language</span>
<select class="lang-select compact-select">
<option value="en" data-i18n="lang.en">English</option>
<option value="de" data-i18n="lang.de">Deutsch</option>
</select>
</div>
</div>
</div>
</section>

21
wwwroot/styles.css
View File

@@ -13,20 +13,19 @@
gap: 16px;
}
.lang-switch {
align-self: flex-end;
.lang-field {
margin-top: 8px;
}
.lang-field select { min-width: 160px; }
.lang-inline {
display: flex;
align-items: center;
gap: 8px;
background: rgba(15, 23, 42, 0.8);
border: 1px solid #1f2937;
border-radius: 10px;
padding: 6px 10px;
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
font-size: 14px;
gap: 6px;
}
.lang-inline .label { font-size: 12px; }
.compact-select {
min-width: 120px;
}
.lang-switch label { color: #9ca3af; }
.lang-switch select { min-width: 120px; }
.status-bar {
display: flex;