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); setAuthMode(state.authMode);
const langSelect = $("language-select"); const langSelects = Array.from(document.querySelectorAll(".lang-select"));
if (langSelect) { const syncLanguageSelects = () => langSelects.forEach(sel => sel.value = getLanguage());
langSelect.value = getLanguage(); syncLanguageSelects();
langSelect.addEventListener("change", () => setLanguage(langSelect.value)); langSelects.forEach(sel => sel.addEventListener("change", () => setLanguage(sel.value)));
}
onLanguageChange(() => { onLanguageChange(() => {
if (langSelect) langSelect.value = getLanguage(); syncLanguageSelects();
renderWelcome(); renderWelcome();
renderPhasePill(); renderPhasePill();
renderCounts(); renderCounts();

21
wwwroot/index.html
View File

@@ -9,18 +9,18 @@
<meta name="app-base" content=""> <meta name="app-base" content="">
</head> </head>
<body class="page"> <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"> <section class="card hidden" id="auth-card">
<div class="stack horizontal"> <div class="stack horizontal">
<button class="ghost active" data-auth-tab="login" type="button" data-i18n="auth.loginTab">Log in</button> <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> <button class="ghost" data-auth-tab="register" type="button" data-i18n="auth.registerTab">Register</button>
</div> </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"> <form id="login-form" class="stack auth-form" data-mode="login">
<label class="stack"> <label class="stack">
<span class="label" data-i18n="auth.username">Username</span> <span class="label" data-i18n="auth.username">Username</span>
@@ -63,6 +63,13 @@
<span class="status-dot"></span> <span class="status-dot"></span>
<span id="phase-pill" data-i18n="phase.loading">Loading…</span> <span id="phase-pill" data-i18n="phase.loading">Loading…</span>
<span class="counts" id="counts">—</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>
</div> </div>
</section> </section>

21
wwwroot/styles.css
View File

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