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

Split suggest phase into side-by-side form and list

Browse Source
This commit is contained in:
Frank Tovar
2026-02-02 15:42:52 +01:00
parent 1479049785
commit 3b02315ca7
2 changed files with 60 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
wwwroot/index.html
View File

@@ -83,51 +83,53 @@
<h2 data-i18n="suggest.title">Suggest (up to 5)</h2> <h2 data-i18n="suggest.title">Suggest (up to 5)</h2>
<p class="hint" data-i18n="suggest.hint">Only you can see your suggestions until Reveal.</p> <p class="hint" data-i18n="suggest.hint">Only you can see your suggestions until Reveal.</p>
</div> </div>
<div class="card"> <div class="suggest-grid">
<form id="suggest-form" class="stack"> <div class="card">
<label class="stack"> <form id="suggest-form" class="stack">
<span class="label" data-i18n="form.gameName">Game name *</span> <label class="stack">
<input name="name" required maxlength="100" /> <span class="label" data-i18n="form.gameName">Game name *</span>
</label> <input name="name" required maxlength="100" />
<label class="stack"> </label>
<span class="label" data-i18n="form.genre">Genre</span> <label class="stack">
<input name="genre" maxlength="50" /> <span class="label" data-i18n="form.genre">Genre</span>
</label> <input name="genre" maxlength="50" />
<label class="stack"> </label>
<span class="label" data-i18n="form.description">Description</span> <label class="stack">
<textarea name="description" maxlength="500"></textarea> <span class="label" data-i18n="form.description">Description</span>
</label> <textarea name="description" maxlength="500"></textarea>
<div class="stack"> </label>
<span class="label" data-i18n="form.players">Players</span> <div class="stack">
<div class="stack horizontal"> <span class="label" data-i18n="form.players">Players</span>
<label class="stack"> <div class="stack horizontal">
<span class="label" data-i18n="form.min">Min</span> <label class="stack">
<input name="minPlayers" type="number" min="1" max="32" inputmode="numeric" /> <span class="label" data-i18n="form.min">Min</span>
</label> <input name="minPlayers" type="number" min="1" max="32" inputmode="numeric" />
<label class="stack"> </label>
<span class="label" data-i18n="form.max">Max</span> <label class="stack">
<input name="maxPlayers" type="number" min="1" max="32" inputmode="numeric" /> <span class="label" data-i18n="form.max">Max</span>
</label> <input name="maxPlayers" type="number" min="1" max="32" inputmode="numeric" />
</label>
</div>
</div> </div>
</div> <label class="stack">
<label class="stack"> <span class="label" data-i18n="form.screenshot">Screenshot URL</span>
<span class="label" data-i18n="form.screenshot">Screenshot URL</span> <input name="screenshotUrl" maxlength="2048" />
<input name="screenshotUrl" maxlength="2048" /> </label>
</label> <label class="stack">
<label class="stack"> <span class="label" data-i18n="form.youtube">YouTube URL</span>
<span class="label" data-i18n="form.youtube">YouTube URL</span> <input name="youtubeUrl" maxlength="2048" />
<input name="youtubeUrl" maxlength="2048" /> </label>
</label> <label class="stack">
<label class="stack"> <span class="label" data-i18n="form.gameUrl">Game website URL</span>
<span class="label" data-i18n="form.gameUrl">Game website URL</span> <input name="gameUrl" maxlength="2048" />
<input name="gameUrl" maxlength="2048" /> </label>
</label> <button type="submit" data-i18n="form.submit">Submit</button>
<button type="submit" data-i18n="form.submit">Submit</button> </form>
</form> </div>
</div> <div class="card subcard">
<div class="card subcard"> <h3 data-i18n="section.mySuggestions">Your suggestions</h3>
<h3 data-i18n="section.mySuggestions">Your suggestions</h3> <div id="my-suggestions" class="card-grid"></div>
<div id="my-suggestions" class="card-grid"></div> </div>
</div> </div>
</div> </div>

16
wwwroot/styles.css
View File

@@ -33,7 +33,7 @@
.status-left, .status-center, .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; margin-left: 5px; } .inline-link { font-size: 14px; margin-left: 5px; }
.logo-mark { .logo-mark {
height: 60px; height: 65px;
margin: -10px; margin: -10px;
width: auto; width: auto;
} }
@@ -52,6 +52,13 @@
min-width: 1280px; min-width: 1280px;
} }
.suggest-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 16px;
align-items: start;
}
.phase-header { .phase-header {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
@@ -126,6 +133,11 @@ button.ghost { background: transparent; border-color: #d5c7b5; color: #2c1c0d; }
.subcard { margin-top: 16px; } .subcard { margin-top: 16px; }
@media (max-width: 1200px) {
.grid { min-width: auto; width: 100%; }
.suggest-grid { grid-template-columns: 1fr; }
}
.card-visual { .card-visual {
height: 200px; height: 200px;
background: linear-gradient(135deg, #f0d9b5, #f6b24f); background: linear-gradient(135deg, #f0d9b5, #f6b24f);
@@ -170,7 +182,7 @@ input[type="range"].full-slider {
width: 100%; width: 100%;
height: 20px; height: 20px;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(90deg, #f28b3c, #f2c94c, #2ca25f); background: linear-gradient(90deg, #f25f3c, #f2c94c, #2ca25f);
outline: none; outline: none;
box-shadow: inset 0 0 0 1px #e3d4bd, 0 4px 12px rgba(0,0,0,0.18); box-shadow: inset 0 0 0 1px #e3d4bd, 0 4px 12px rgba(0,0,0,0.18);
} }