Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

buy.kidlisp.com: show last collected piece as background in Keepers rows

Each collector's row now shows their most recently collected piece's
animated thumbnail as a faded background strip, matching the Shop
card style.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

+18 -3
+18 -3
system/public/kidlisp.com/buy.html
··· 472 472 border-bottom: 1px solid var(--border); 473 473 cursor: pointer; 474 474 transition: background 0.15s; 475 + background-size: cover; 476 + background-position: center; 477 + background-repeat: no-repeat; 478 + position: relative; 475 479 } 476 - .album-row:hover { 477 - background: var(--bg3); 480 + .album-row::before { 481 + content: ''; 482 + position: absolute; 483 + inset: 0; 484 + background: linear-gradient(90deg, var(--bg) 0%, rgba(18, 16, 26, 0.85) 40%, rgba(18, 16, 26, 0.6) 100%); 485 + pointer-events: none; 486 + } 487 + .album-row > * { position: relative; z-index: 1; } 488 + .album-row:hover::before { 489 + background: linear-gradient(90deg, var(--bg3) 0%, rgba(34, 30, 48, 0.85) 40%, rgba(34, 30, 48, 0.5) 100%); 478 490 } 479 491 .album-rank { 480 492 font-size: 18px; ··· 963 975 grid.innerHTML = albums.map((album, i) => { 964 976 const name = album.alias || sellerName(album.address); 965 977 const tokens = album.tokens.sort((a, b) => Number(a.tokenId) - Number(b.tokenId)); 978 + const lastToken = tokens[tokens.length - 1]; 979 + const lastThumb = animatedWebpUrl(lastToken?.thumbnailUri); 980 + const rowBg = lastThumb ? `background-image:url('${lastThumb}')` : ''; 966 981 const pct = Math.round((album.tokens.length / maxCount) * 100); 967 982 const medal = i === 0 ? '\uD83E\uDD47' : i === 1 ? '\uD83E\uDD48' : i === 2 ? '\uD83E\uDD49' : `${i + 1}`; 968 983 return `<div class="album-entry"> 969 - <div class="album-row" data-idx="${i}"> 984 + <div class="album-row" data-idx="${i}" style="${rowBg}"> 970 985 <div class="album-rank">${medal}</div> 971 986 <div class="album-name">${name}</div> 972 987 <div class="album-bar-wrap">