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

12
wwwroot/index.html
View File

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

18
wwwroot/styles.css
View File

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