deivid/spotify-cantina
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rediseña panel de playlists: layout vertical en lista

Browse Source 
Cambia la grilla de cajas a una lista vertical donde cada playlist
ocupa una fila con imagen/emoji a la izquierda y nombre + descripción
a la derecha. En modo votación, la barra y conteo quedan en el bloque
de info y el botón de voto se desplaza al extremo derecho.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
David Inostroza
2026-04-23 17:43:16 -04:00
parent 0c2b20011b
commit 809f35fc78
3 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+29 -22
View File
@@ -160,54 +160,61 @@ a:hover { text-decoration: underline; }
font-size: 0.875rem;
}
/* Playlists grid */
/* Playlists list */
.playlist-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.playlist-card {
background: var(--surface);
border-radius: var(--radius);
padding: 0.6rem;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
padding: 0.75rem;
transition: background 0.15s;
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
gap: 0.4rem;
text-align: center;
gap: 0.75rem;
}
.playlist-card.clickable:hover { background: var(--surface2); transform: scale(1.02); cursor: pointer; }
.playlist-card.clickable:active { transform: scale(0.98); }
.playlist-card.clickable { cursor: pointer; }
.playlist-card.clickable:hover { background: var(--surface2); }
.playlist-card.clickable:active { background: #333; }
.playlist-thumb {
width: 100%;
aspect-ratio: 1;
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.playlist-thumb-placeholder {
width: 100%;
aspect-ratio: 1;
width: 52px;
height: 52px;
background: var(--surface2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
container-type: inline-size;
font-size: 1.8rem;
flex-shrink: 0;
}
.playlist-thumb-emoji { font-size: 1.8rem; }
.playlist-card-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.playlist-thumb-emoji { font-size: 55cqi; }
.playlist-card-name {
font-size: 0.78rem;
font-weight: 500;
font-size: 0.9rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
/* ── Admin ── */