diff --git a/app/templates/index.html b/app/templates/index.html index 38f77ce..03b4303 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -243,9 +243,18 @@ async function fetchVotingStatus() { const res = await fetch('/voting/status'); const data = await res.json(); + const wasOpen = votingOpen; votingOpen = data.is_open; myVotedPlaylistId = data.my_last_vote_playlist_id; + if (wasOpen && !votingOpen && data.playlists?.length) { + const totalVotes = data.playlists.reduce((s, p) => s + p.votes, 0); + if (totalVotes > 0) { + const winner = data.playlists.reduce((best, p) => p.votes > best.votes ? p : best); + playItem(winner.spotify_id, winner.spotify_type); + } + } + // Solo sincronizar cooldown desde servidor si no hay timer local activo if (cooldownRemaining <= 0 && data.cooldown_remaining > 0) { startCooldownTick(data.cooldown_remaining); @@ -291,9 +300,12 @@ function renderPlaylists(playlists, isVoting, myVote) { const btnLabel = cooldownRemaining > 0 ? `⏳ ${cooldownRemaining}s` : '👍 Votar'; const btnDisabled = cooldownRemaining > 0 ? 'disabled' : ''; return ` -
- ${img} -
${pl.name}
+
+
+ ${img} +
${pl.name}
+ ${pl.description ? `
${pl.description}
` : ''} +
${pl.votes} votos @@ -416,7 +428,18 @@ setInterval(fetchVotingStatus, 5000); gap: .5rem; } -.voting-card { cursor: pointer; position: relative; } +.voting-card { position: relative; } +.voting-card-top { cursor: pointer; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } +.voting-card-top:hover .playlist-card-name { color: var(--green); } +.playlist-card-desc { + font-size: 0.7rem; + color: var(--text-muted); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + text-align: center; +} .voting-card.voted { border: 2px solid var(--green); } .vote-bar-wrap { diff --git a/static/style.css b/static/style.css index 87581ee..a045b63 100644 --- a/static/style.css +++ b/static/style.css @@ -197,8 +197,9 @@ a:hover { text-decoration: underline; } align-items: center; justify-content: center; font-size: 2rem; + container-type: inline-size; } -.playlist-thumb-emoji { font-size: 2.4rem; } +.playlist-thumb-emoji { font-size: 55cqi; } .playlist-card-name { font-size: 0.78rem;