diff options
| author | Christophe Besson <cbesson@gmail.com> | 2026-08-24 19:11:43 +0200 |
|---|---|---|
| committer | Christophe Besson <cbesson@gmail.com> | 2026-08-24 19:11:43 +0200 |
| commit | d053d083627f1f9f010752f8ad67941e22d49f27 (patch) | |
| tree | a72e5cfd4b80fae79fad66944d3db24d6a1a3547 /packages/meshbay-hub/src/meshbay_hub/static/style.css | |
| parent | 251d2c587cad16e2464851b1958203c41e994fb4 (diff) | |
| download | meshbay-d053d083627f1f9f010752f8ad67941e22d49f27.tar.gz | |
feat(hub): draw an actual CD for covers with no art, not a flat icon
The monochrome disc icon from the previous commit read as placeholder
UI chrome, not as artwork - too plain for something that is, for most
tiles in a real library, the default look of the grid.
- DiscPlaceholder (music-app.js): a small inline SVG illustration -
dark disc base, an iridescent radial-gradient sheen mimicking the
rainbow reflection a real CD's data side has, two faint groove
rings, a light label ring, a dark spindle hole. Each instance gets
its own gradient id (a module-level counter) rather than one literal
id repeated - a grid renders many of these at once, and a shared id
would leave every disc after the first pointing at whichever
<radialGradient> the browser happened to resolve.
- AlbumCard and MusicDetailModal now branch on coverHash directly:
MediaThumb (the real chunk-path image) when there is one,
DiscPlaceholder when there isn't - rather than routing "no cover"
through MediaThumb's own generic small-icon fallback, which is still
right for its other callers (list rows, Videos).
- icon.js: the flat monochrome "disc" icon this replaces is removed -
nothing else used it.
- style.css: .music-disc-empty/.music-disc-svg replace the old
.video-thumb-empty overrides; still sized relative to the tile (82%)
so it scales with .music-grid's auto-fill columns.
Client-side only. npm run sync-ui re-run. Full suite: 1129 passed, no
regressions.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 32 |
1 files changed, 18 insertions, 14 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 6c3c0f6..3d411f7 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -2726,17 +2726,19 @@ a.transfer-name { display: block; background: var(--bg-surface); } -.music-cover.video-thumb-empty { aspect-ratio: 1 / 1; } -/* A big, plain disc rather than the small note icon shared with list rows — - most tiles land here (few files carry embedded/sibling art), so this is - the default look of the grid, not a rare fallback; it needs to read as - deliberate, not broken. Sized relative to the tile so it scales with - .music-grid's auto-fill columns instead of one fixed px value. */ -.music-cover.video-thumb-empty .icon { - width: 55%; - height: 55%; - color: var(--text-dim); +/* The drawn-CD placeholder (DiscPlaceholder, music-app.js) — sized relative + to the tile so it scales with .music-grid's auto-fill columns instead of + one fixed px value, and never clipped by the square tile's own overflow. */ +.music-disc-empty { + width: 100%; + aspect-ratio: 1 / 1; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-surface); + overflow: hidden; } +.music-disc-svg { width: 82%; height: 82%; } .music-card-info { padding: 8px 10px; } .music-card-title { @@ -2792,10 +2794,12 @@ a.transfer-name { flex-shrink: 0; background: var(--bg-raised); } -.music-detail-cover.video-thumb-empty .icon { - width: 55%; - height: 55%; - color: var(--text-dim); +.music-detail-cover.music-disc-empty { + width: 96px; + height: 96px; + border-radius: 6px; + flex-shrink: 0; + background: var(--bg-raised); } .music-detail-meta { min-width: 0; } .music-detail-artist { font-weight: 600; font-size: 0.95em; } |