From e3f20166a4cfe8f7ab9fecbab5ff202640b2c653 Mon Sep 17 00:00:00 2001
From: droideparanoico <david.alvarez.81@gmail.com>
Date: Fri, 3 Jul 2026 11:29:03 +0200
Subject: [PATCH] Redesign feed: large cover with details below

- Each item is a full-width card with cover at 3:1 aspect ratio
- Artist name, title, type badge, and date below the cover
- Subtle hover lift effect
---
 .../templates/fragments/feed-entries.html     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/main/resources/templates/fragments/feed-entries.html b/src/main/resources/templates/fragments/feed-entries.html
index 5ceaa73..44bad1a 100644
--- a/src/main/resources/templates/fragments/feed-entries.html
+++ b/src/main/resources/templates/fragments/feed-entries.html
@@ -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:0.75rem">
+<div style="display:flex;flex-direction:column;gap:1.5rem">
   {#for entry in entries}
   <a href="https://musicbrainz.org/release-group/{entry.mbid}"
      target="_blank" rel="noopener noreferrer"
-     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">
+     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)">
       <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%;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>'">
+           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>'">
     </div>
-    <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">
+    <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">
         {#if entry.primaryType == 'Album'}
           <span class="badge badge-primary badge-sm">Album</span>
         {#else if entry.primaryType == 'Single'}
@@ -37,7 +37,7 @@
           <span class="badge badge-ghost badge-sm">{entry.primaryType}</span>
         {/if}
         {#if entry.firstReleaseDate}
-          <span style="font-size:0.75rem;color:var(--bc);opacity:0.45">{entry.firstReleaseDate}</span>
+          <span style="font-size:0.8rem;color:var(--bc);opacity:0.45">{entry.firstReleaseDate}</span>
         {/if}
       </div>
     </div>