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

Adjust style of results and top bar

Browse Source
This commit is contained in:
Frank Tovar
2026-02-02 15:20:13 +01:00
parent ed855a504f
commit 989beb62c5
3 changed files with 12 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
wwwroot/app.js
View File

@@ -132,7 +132,7 @@ async function loadResults() {
function renderPhasePill() { function renderPhasePill() {
const phaseKey = typeof state.phase === "string" ? state.phase.toLowerCase() : null; const phaseKey = typeof state.phase === "string" ? state.phase.toLowerCase() : null;
$("phase-pill").textContent = phaseKey ? t(`phase.${phaseKey}`) : t("phase.loading"); $("phase-pill").textContent = phaseKey ? "" : t("phase.loading");
document.querySelectorAll(".phase-view").forEach((el) => el.classList.add("hidden")); document.querySelectorAll(".phase-view").forEach((el) => el.classList.add("hidden"));
const viewMap = { const viewMap = {
Suggest: "suggest-view", Suggest: "suggest-view",

20
wwwroot/index.html
View File

@@ -59,18 +59,16 @@
<span id="welcome-text" data-i18n="auth.welcome">Welcome!</span> <span id="welcome-text" data-i18n="auth.welcome">Welcome!</span>
<a id="logout" href="#" class="link inline-link" data-i18n="auth.logout">Logout</a> <a id="logout" href="#" class="link inline-link" data-i18n="auth.logout">Logout</a>
</div> </div>
<div class="status-center">
<span id="phase-pill" data-i18n="phase.loading">Loading…</span>
<span class="counts" id="counts">—</span>
</div>
<div class="status-right"> <div class="status-right">
<span class="status-dot"></span> <span class="label" data-i18n="lang.label">Language</span>
<span id="phase-pill" data-i18n="phase.loading">Loading…</span> <select class="lang-select compact-select">
<span class="counts" id="counts">—</span> <option value="en" data-i18n="lang.en">English</option>
<div class="lang-inline"> <option value="de" data-i18n="lang.de">Deutsch</option>
<span class="label" data-i18n="lang.label">Language</span> </select>
<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>
</section> </section>

16
wwwroot/styles.css
View File

@@ -17,36 +17,25 @@
.lang-field { margin-top: 8px; } .lang-field { margin-top: 8px; }
.lang-field select { min-width: 160px; } .lang-field select { min-width: 160px; }
.lang-inline { display: flex; align-items: center; gap: 6px; margin-left: 15px; }
.lang-inline .label { font-size: 12px; color: #6c5a42; }
.compact-select { min-width: 120px; } .compact-select { min-width: 120px; }
.status-bar { .status-bar {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 20px;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.12);
padding: 10px 14px; padding: 10px 14px;
} }
.status-left, .status-right { display: flex; align-items: center; gap: 10px; } .status-left, .status-center, .status-right { display: flex; align-items: center; gap: 10px; }
.inline-link { font-size: 14px; } .inline-link { font-size: 14px; }
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #2ca25f;
box-shadow: 0 0 10px #2ca25f;
}
.counts { .counts {
color: #5f513b; color: #5f513b;
font-size: 13px; font-size: 13px;
margin-left: 12px;
} }
.phase-bar { display: none; } .phase-bar { display: none; }
@@ -319,7 +308,6 @@ input[type="range"].full-slider::-moz-range-track {
.results-table { width: 100%; border-collapse: collapse; } .results-table { width: 100%; border-collapse: collapse; }
.results-table th, .results-table td { padding: 10px; } .results-table th, .results-table td { padding: 10px; }
.results-table tr { border-bottom: 1px solid #e3d4bd; } .results-table tr { border-bottom: 1px solid #e3d4bd; }
.results-table tr:last-child { border-bottom: none; }
.results-table th { text-align: left; color: #7a6a53; font-size: 12px; letter-spacing: 0.3px; } .results-table th { text-align: left; color: #7a6a53; font-size: 12px; letter-spacing: 0.3px; }
.results-table .game-cell { display: flex; gap: 10px; align-items: center; } .results-table .game-cell { display: flex; gap: 10px; align-items: center; }
.results-table .thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #e3d4bd; cursor: pointer; } .results-table .thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #e3d4bd; cursor: pointer; }