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

Refine suggest layout: side-by-side name + form, cards underneath

Browse Source
This commit is contained in:
Frank Tovar
2026-01-28 15:45:56 +01:00
parent bec3930200
commit 88f048b239
2 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
wwwroot/index.html
View File

@@ -16,31 +16,35 @@
<main class="grid"> <main class="grid">
<section class="card" id="actions-card"> <section class="card" id="actions-card">
<div id="suggest-view" class="phase-view hidden"> <div id="suggest-view" class="phase-view hidden">
<div class="split"> <div class="split wide">
<div> <div class="card subcard name-box">
<h2>Suggest (up to 3)</h2> <h3>Your Name</h3>
<p class="hint">Only you can see your suggestions until Reveal.</p>
</div>
<div class="name-box">
<label class="stack"> <label class="stack">
<span class="label">Your name</span> <span class="label">Display name</span>
<input id="name-input" maxlength="64" placeholder="Pick a name" /> <input id="name-input" maxlength="64" placeholder="Pick a name" />
</label> </label>
<button id="save-name" class="ghost">Save</button> <button id="save-name" class="ghost">Save</button>
<p class="hint" id="player-id"></p> <p class="hint" id="player-id"></p>
</div> </div>
</div> <div class="card subcard">
<form id="suggest-form" class="stack"> <h2>Suggest (up to 3)</h2>
<input name="name" required maxlength="100" placeholder="Game name *" /> <p class="hint">Only you can see your suggestions until Reveal.</p>
<input name="genre" maxlength="50" placeholder="Genre" /> <form id="suggest-form" class="stack">
<textarea name="description" maxlength="500" placeholder="Short description"></textarea> <input name="name" required maxlength="100" placeholder="Game name *" />
<div class="stack horizontal"> <input name="genre" maxlength="50" placeholder="Genre" />
<input name="screenshotUrl" maxlength="2048" placeholder="Screenshot URL" /> <textarea name="description" maxlength="500" placeholder="Short description"></textarea>
<input name="youtubeUrl" maxlength="2048" placeholder="YouTube URL" /> <div class="stack horizontal">
<input name="screenshotUrl" maxlength="2048" placeholder="Screenshot URL" />
<input name="youtubeUrl" maxlength="2048" placeholder="YouTube URL" />
</div>
<button type="submit">Submit</button>
</form>
</div> </div>
<button type="submit">Submit</button> </div>
</form> <div class="card subcard">
<div id="my-suggestions" class="card-grid"></div> <h3>Your suggestions</h3>
<div id="my-suggestions" class="card-grid"></div>
</div>
</div> </div>
<div id="reveal-view" class="phase-view hidden"> <div id="reveal-view" class="phase-view hidden">

4
wwwroot/styles.css
View File

@@ -62,6 +62,10 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
} }
.split.wide > .subcard {
flex: 1 1 320px;
}
.name-box { .name-box {
min-width: 220px; min-width: 220px;
max-width: 260px; max-width: 260px;