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

Move name UI to its own bar below status

Browse Source
This commit is contained in:
Frank Tovar
2026-01-28 16:47:03 +01:00
parent 168b5de08b
commit 5b1c9eb7e3
2 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
wwwroot/index.html
View File

@@ -11,13 +11,13 @@
<span class="status-dot"></span> <span class="status-dot"></span>
<span id="phase-pill">Loading…</span> <span id="phase-pill">Loading…</span>
<span class="counts" id="counts">—</span> <span class="counts" id="counts">—</span>
<div class="name-inline"> </div>
<div class="name-bar">
<label for="name-input" class="label">Name</label> <label for="name-input" class="label">Name</label>
<input id="name-input" maxlength="64" placeholder="Pick a name" /> <input id="name-input" maxlength="64" placeholder="Pick a name" />
<button id="save-name" class="ghost">Save</button> <button id="save-name" class="ghost">Save</button>
<span class="hint warning hidden" id="name-warning">Name required</span> <span class="hint warning hidden" id="name-warning">Name required</span>
</div> </div>
</div>
<main class="grid"> <main class="grid">
<section class="card" id="actions-card"> <section class="card" id="actions-card">

18
wwwroot/styles.css
View File

@@ -33,17 +33,19 @@ body {
font-size: 13px; font-size: 13px;
} }
.name-inline { .name-bar {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
} padding: 10px 12px;
.name-inline input { margin-top: 8px;
width: 160px; background: rgba(15, 23, 42, 0.8);
} border: 1px solid #1f2937;
.name-inline .hint { border-radius: 10px;
margin: 0; box-shadow: 0 6px 16px rgba(0,0,0,0.2);
} }
.name-bar input { width: 180px; }
.name-bar .hint { margin: 0; }
.grid { .grid {
display: grid; display: grid;