Jonathan/Lyra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): CoverArt + reusable AlbumModal

Browse Source 
CoverArt loads album art from the Cover Art Archive CDN by release-group MBID
(browser-side, cached, graceful placeholder fallback). AlbumModal shows cover +
tracklist (fetched from MB) with slots for a status chip and context actions.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan
2026-07-12 15:14:34 +02:00
parent 3284059aba
commit 34235a2355
3 changed files with 150 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/design.css
+19
View File
@@ -274,3 +274,22 @@ nav.contents .sep { flex: 1; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-panel { animation: none; } }
/* ── Cover art + album modal ──────────────────────────── */
.cover { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); border: 1px solid var(--rule); }
.cover-fallback { display: flex; align-items: center; justify-content: center; color: var(--rule-2); font-size: 2.2rem; }
.album-modal-head { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: start; }
.album-modal-cover { width: 170px; }
.album-modal-title { font-size: 1.7rem; line-height: 1.1; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.album-modal-meta {
font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--graphite); margin-top: 8px; display: flex; gap: 8px; align-items: center;
}
.album-modal-status { margin-top: 12px; }
.album-modal-actions { margin-top: 16px; }
.album-modal-tracks { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 10px; max-height: 42vh; overflow-y: auto; }
.tracks li .tname { color: var(--ink); flex: 1; }
@media (max-width: 560px) {
.album-modal-head { grid-template-columns: 1fr; }
.album-modal-cover { width: 150px; }
}