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

Improved styling

Browse Source
This commit is contained in:
Frank Tovar
2026-02-02 16:25:42 +01:00
parent ed4985c824
commit 85c864d202
4 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
wwwroot/app.js
View File

@@ -482,22 +482,27 @@ function buildCard(s, { showAuthor = false, allowDelete = false, allowEdit = fal
const visual = hasImage
? `<button class="card-visual" data-img="${s.screenshotUrl}" aria-label="${t("card.openScreenshot")}" style="background-image:url('${s.screenshotUrl}')"></button>`
: `<div class="card-visual"></div>`;
const hasPlayers = (s.minPlayers || s.maxPlayers);
const players = hasPlayers ? `${t("card.players", { min: s.minPlayers ?? "?", max: s.maxPlayers ?? "?" })}` : "";
const genreAndPlayers = s.genre ? (hasPlayers ? `${s.genre} • ${players}` : s.genre) : (hasPlayers ? players : undefined);
const hasExtraInfo = genreAndPlayers || s.gameUrl || s.youtubeUrl;
card.innerHTML = `
${visual}
<div class="card-body">
<div class="card-title-row">
<h3>${s.name}</h3>
<div class="title-meta">
${s.gameUrl ? `<a class="link compact" href="${s.gameUrl}" target="_blank" rel="noopener">${t("card.site")}</a>` : ""}
${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">${t("card.youtube")}</a>` : ""}
${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
${allowEdit ? `<button class="chip" data-edit="${s.id}" type="button">${t("card.edit")}</button>` : ""}
${allowDelete ? `<button class="chip danger-chip" data-delete="${s.id}" type="button">${t("card.delete")}</button>` : ""}
</div>
</div>
${s.genre ? `<p class="muted">${s.genre}</p>` : ""}
${hasExtraInfo ? `<p class="muted">` : ""}
${genreAndPlayers ? genreAndPlayers : ""}
${s.gameUrl ? `<a class="link compact" href="${s.gameUrl}" target="_blank" rel="noopener">${t("card.site")}</a>` : ""}
${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">${t("card.youtube")}</a>` : ""}
${hasExtraInfo ? `</p>` : ""}
${s.description ? `<p>${s.description}</p>` : ""}
${(s.minPlayers || s.maxPlayers) ? `<p class="muted">${t("card.players", { min: s.minPlayers ?? "?", max: s.maxPlayers ?? "?" })}</p>` : ""}
</div>
`;
if (hasImage) {