droideparanoico/discdrop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change feed to vertical list with horizontal cards

Browse Source 
- Replaced multi-column grid with single vertical list (flex-direction:column)
- Each item is a horizontal card: cover (100px) on the left, details on the right
- Newest first (DESC order with NULLS LAST)
This commit is contained in:
droideparanoico
2026-07-03 11:26:51 +02:00
parent edd9b99b46
commit 9a0823854e
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/fragments/feed-entries.html
+16 -16
View File
@@ -8,36 +8,36 @@
<p style="font-size:0.875rem;color:var(--bc);opacity:0.4;margin-top:0.25rem">Add artists to your collection to see their releases here</p>
</div>
{#else}
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem">
<div style="display:flex;flex-direction:column;gap:0.75rem">
{#for entry in entries}
<a href="https://musicbrainz.org/release-group/{entry.mbid}"
target="_blank" rel="noopener noreferrer"
class="bg-base-100 shadow-md rounded-box border border-base-300 overflow-hidden"
style="text-decoration:none;transition:transform 0.15s,box-shadow 0.15s;display:flex;flex-direction:column"
onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.2)'"
onmouseout="this.style.transform='';this.style.boxShadow=''">
<div style="aspect-ratio:1;overflow:hidden;background:var(--b2)">
class="bg-base-100 shadow-sm rounded-box border border-base-300 overflow-hidden"
style="display:flex;text-decoration:none;transition:box-shadow 0.15s"
onmouseover="this.style.boxShadow='0 2px 8px rgba(0,0,0,0.12)'"
onmouseout="this.style.boxShadow=''">
<div style="width:100px;min-height:100px;flex-shrink:0;background:var(--b2);overflow:hidden">
<img src="https://coverartarchive.org/release-group/{entry.mbid}/front-250"
alt="Cover for {entry.title}"
style="width:100%;height:100%;object-fit:cover;display:block"
loading="lazy"
onerror="this.parentElement.innerHTML='<div style=\'display:flex;align-items:center;justify-content:center;height:100%;color:var(--bc);opacity:0.15\'><svg width=\'48\' height=\'48\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'1.5\'><circle cx=\'6\' cy=\'18\' r=\'3\'/><circle cx=\'18\' cy=\'16\' r=\'3\'/><path d=\'M9 18V5l12-2v13\'/><path d=\'M9 9l12-2\'/></svg></div>'">
onerror="this.parentElement.innerHTML='<div style=\'display:flex;align-items:center;justify-content:center;height:100%;min-height:100px;color:var(--bc);opacity:0.12\'><svg width=\'36\' height=\'36\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'1.5\'><circle cx=\'6\' cy=\'18\' r=\'3\'/><circle cx=\'18\' cy=\'16\' r=\'3\'/><path d=\'M9 18V5l12-2v13\'/><path d=\'M9 9l12-2\'/></svg></div>'">
</div>
<div style="padding:0.65rem 0.75rem;flex:1;display:flex;flex-direction:column;gap:0.2rem">
<div style="font-size:0.75rem;font-weight:500;color:var(--bc);opacity:0.55;text-transform:uppercase;letter-spacing:0.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{entry.artistName}</div>
<div style="font-size:0.85rem;font-weight:600;color:var(--bc);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3">{entry.title}</div>
<div style="margin-top:auto;padding-top:0.35rem;display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap">
<div style="padding:0.75rem 1rem;flex:1;display:flex;flex-direction:column;justify-content:center;gap:0.15rem">
<div style="font-size:0.8rem;font-weight:600;color:var(--bc);opacity:0.55;text-transform:uppercase;letter-spacing:0.04em">{entry.artistName}</div>
<div style="font-size:1rem;font-weight:600;color:var(--bc);line-height:1.3">{entry.title}</div>
<div style="margin-top:0.25rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap">
{#if entry.primaryType == 'Album'}
<span class="badge badge-primary badge-xs">Album</span>
<span class="badge badge-primary badge-sm">Album</span>
{#else if entry.primaryType == 'Single'}
<span class="badge badge-secondary badge-xs">Single</span>
<span class="badge badge-secondary badge-sm">Single</span>
{#else if entry.primaryType == 'EP'}
<span class="badge badge-accent badge-xs">EP</span>
<span class="badge badge-accent badge-sm">EP</span>
{#else}
<span class="badge badge-ghost badge-xs">{entry.primaryType}</span>
<span class="badge badge-ghost badge-sm">{entry.primaryType}</span>
{/if}
{#if entry.firstReleaseDate}
<span style="font-size:0.7rem;color:var(--bc);opacity:0.45">{entry.firstReleaseDate}</span>
<span style="font-size:0.75rem;color:var(--bc);opacity:0.45">{entry.firstReleaseDate}</span>
{/if}
</div>
</div>