itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 15:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Distinct circular song cards with jump-to-album badge (#953)

Browse Source 
* feat(tracks): distinct circular song cards with jump-to-album badge

Single-track cards looked identical to album tiles, so clicking the body
read as album behaviour even though it starts playback. Give them a round
vinyl-style cover (square stays album-only) via a shared .cover-circle
utility, and add a 'To album' badge under the artist that navigates to the
track's album. Card click still plays; the badge is the explicit nav path.

* i18n(tracks): add toAlbum label across 9 locales

* docs(changelog): track-card redesign + to-album badge (#953)
This commit is contained in:
Frank Stellmacher
2026-06-02 20:34:54 +02:00
committed by GitHub
parent 47832632fd
commit cc04a0c93d
13 changed files with 100 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/tracks/song-card.css
+40 -8
View File
@@ -16,16 +16,21 @@
}
.song-card-cover {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--bg-hover);
/* Round/clip/aspect/paint-stability come from .cover-circle (layout/cover-art.css).
Inset margin floats the disc inside the card so corners read as a tile, not an album. */
margin: var(--space-3) var(--space-3) 0;
}
.song-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
/* Vinyl-disc rim — reads as a record edge, sets single tracks apart from album tiles. */
.song-card-cover::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-full);
box-shadow:
inset 0 0 0 2px rgba(0, 0, 0, 0.28),
inset 0 0 0 3px rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.song-card-cover-placeholder {
@@ -82,6 +87,7 @@
.song-card-info {
padding: var(--space-2) var(--space-3) var(--space-3);
text-align: center;
}
.song-card-title {
@@ -103,11 +109,37 @@
text-overflow: ellipsis;
}
.song-card-album-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-hover);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
cursor: pointer;
transition:
color var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast);
}
.song-card-album-badge:hover {
color: var(--accent);
background: var(--bg-card);
border-color: var(--accent);
}
.song-card-rating {
display: flex;
gap: 2px;
color: var(--accent);
margin-top: 4px;
line-height: 1;
justify-content: center;
}