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

Move YouTube link into title row to save vertical space

Browse Source
This commit is contained in:
Frank Tovar
2026-01-28 16:08:17 +01:00
parent 437b8ba3d9
commit 485275d6c0
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
wwwroot/app.js
View File

@@ -271,11 +271,13 @@ function buildCard(s, { showAuthor }) {
<div class="card-body"> <div class="card-body">
<div class="card-title-row"> <div class="card-title-row">
<h3>${s.name}</h3> <h3>${s.name}</h3>
<div class="title-meta">
${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""} ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
</div> </div>
</div>
${s.genre ? `<p class="muted">${s.genre}</p>` : ""} ${s.genre ? `<p class="muted">${s.genre}</p>` : ""}
${s.description ? `<p>${s.description}</p>` : ""} ${s.description ? `<p>${s.description}</p>` : ""}
${s.youtubeUrl ? `<a class="link" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
</div> </div>
`; `;
if (hasImage) { if (hasImage) {

4
wwwroot/styles.css
View File

@@ -147,14 +147,16 @@ button.ghost {
.card-title-row { .card-title-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
gap: 8px; gap: 8px;
} }
.card-title-row h3 { margin: 0; font-size: 18px; } .card-title-row h3 { margin: 0; font-size: 18px; }
.title-meta { display: flex; align-items: center; gap: 8px; }
.muted { color: #9ca3af; margin: 0; } .muted { color: #9ca3af; margin: 0; }
.link { color: #93c5fd; text-decoration: none; font-weight: 600; } .link { color: #93c5fd; text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; } .link:hover { text-decoration: underline; }
.link.compact { font-size: 14px; }
.chip { .chip {
background: #1f2937; background: #1f2937;
color: #e5e7eb; color: #e5e7eb;