Feed: square 140px cover with details to the right

This commit is contained in:
2026-07-03 11:59:32 +02:00
parent e3f20166a4
commit e4806db04d
@@ -8,25 +8,25 @@
<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:flex;flex-direction:column;gap:1.5rem">
<div style="display:flex;flex-direction:column;gap:1rem">
{#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="display:flex;flex-direction:column;text-decoration:none;transition:box-shadow 0.2s,transform 0.15s"
onmouseover="this.style.boxShadow='0 6px 20px rgba(0,0,0,0.15)';this.style.transform='translateY(-1px)'"
onmouseout="this.style.boxShadow='';this.style.transform=''">
<div style="aspect-ratio:3/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 3px 12px rgba(0,0,0,0.12)'"
onmouseout="this.style.boxShadow=''">
<div style="width:140px;height:140px;flex-shrink:0;overflow:hidden;background:var(--b2)">
<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.1\'><svg width=\'56\' height=\'56\' 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;width:140px;height:140px;color:var(--bc);opacity:0.1\'><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>'">
</div>
<div style="padding:1rem 1.25rem;display:flex;flex-direction:column;gap:0.25rem">
<div style="font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--p);opacity:0.7">{entry.artistName}</div>
<div style="font-size:1.15rem;font-weight:700;color:var(--bc);line-height:1.35">{entry.title}</div>
<div style="margin-top:0.35rem;display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap">
<div style="padding:1rem 1.25rem;flex:1;display:flex;flex-direction:column;justify-content:center;gap:0.3rem;min-width:0">
<div style="font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--p);opacity:0.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{entry.artistName}</div>
<div style="font-size:1.1rem;font-weight:700;color:var(--bc);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{entry.title}</div>
<div style="margin-top:0.3rem;display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap">
{#if entry.primaryType == 'Album'}
<span class="badge badge-primary badge-sm">Album</span>
{#else if entry.primaryType == 'Single'}