Stack suggest name and form vertically with cards below

This commit is contained in:
2026-01-28 15:49:41 +01:00
parent 88f048b239
commit 3087b4b7b0
2 changed files with 22 additions and 28 deletions

View File

@@ -16,30 +16,28 @@
<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 wide"> <div class="card subcard name-box">
<div class="card subcard name-box"> <h3>Your Name</h3>
<h3>Your Name</h3> <label class="stack">
<label class="stack"> <span class="label">Display 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 class="card subcard">
<div class="card subcard"> <h2>Suggest (up to 3)</h2>
<h2>Suggest (up to 3)</h2> <p class="hint">Only you can see your suggestions until Reveal.</p>
<p class="hint">Only you can see your suggestions until Reveal.</p> <form id="suggest-form" class="stack">
<form id="suggest-form" class="stack"> <input name="name" required maxlength="100" placeholder="Game name *" />
<input name="name" required maxlength="100" placeholder="Game name *" /> <input name="genre" maxlength="50" placeholder="Genre" />
<input name="genre" maxlength="50" placeholder="Genre" /> <textarea name="description" maxlength="500" placeholder="Short description"></textarea>
<textarea name="description" maxlength="500" placeholder="Short description"></textarea> <div class="stack horizontal">
<div class="stack horizontal"> <input name="screenshotUrl" maxlength="2048" placeholder="Screenshot URL" />
<input name="screenshotUrl" maxlength="2048" placeholder="Screenshot URL" /> <input name="youtubeUrl" maxlength="2048" placeholder="YouTube URL" />
<input name="youtubeUrl" maxlength="2048" placeholder="YouTube URL" /> </div>
</div> <button type="submit">Submit</button>
<button type="submit">Submit</button> </form>
</form>
</div>
</div> </div>
<div class="card subcard"> <div class="card subcard">
<h3>Your suggestions</h3> <h3>Your suggestions</h3>

View File

@@ -62,10 +62,6 @@ 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;