beatport progress

This commit is contained in:
Broque Thomas 2025-09-30 13:58:02 -07:00
parent 69c8622588
commit 7821d4cba5
2 changed files with 24 additions and 4 deletions

View file

@ -19885,7 +19885,7 @@ function populateBeatportTop10Releases(releases) {
releases.forEach((release, index) => { releases.forEach((release, index) => {
releasesHtml += ` releasesHtml += `
<div class="beatport-releases-top10-card" data-url="${release.url || '#'}"> <div class="beatport-releases-top10-card" data-url="${release.url || '#'}" data-bg-image="${release.image_url || ''}">
<div class="beatport-releases-top10-card-rank">${release.rank || index + 1}</div> <div class="beatport-releases-top10-card-rank">${release.rank || index + 1}</div>
<div class="beatport-releases-top10-card-artwork"> <div class="beatport-releases-top10-card-artwork">
${release.image_url ? ${release.image_url ?
@ -19904,6 +19904,19 @@ function populateBeatportTop10Releases(releases) {
releasesHtml += '</div>'; releasesHtml += '</div>';
container.innerHTML = releasesHtml; container.innerHTML = releasesHtml;
// Set background images for cards
const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
cards.forEach(card => {
const bgImage = card.getAttribute('data-bg-image');
if (bgImage) {
// Transform image URL from 95x95 to 500x500 for higher quality background
const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
card.style.backgroundSize = 'cover';
card.style.backgroundPosition = 'center';
}
});
} }
/** /**

View file

@ -12537,7 +12537,7 @@ body {
/* Single column container for releases */ /* Single column container for releases */
.beatport-releases-top10-container { .beatport-releases-top10-container {
max-width: 1200px; max-width: 1500px;
margin: 0 auto; margin: 0 auto;
} }
@ -12561,7 +12561,7 @@ body {
/* Track containers with grid layout for releases */ /* Track containers with grid layout for releases */
.beatport-releases-top10-tracks { .beatport-releases-top10-tracks {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
gap: 20px; gap: 20px;
} }
@ -12689,7 +12689,7 @@ body {
.beatport-releases-top10-card-label { .beatport-releases-top10-card-label {
font-size: 13px; font-size: 13px;
color: rgba(138, 43, 226, 0.95); color: white;
font-weight: 700; font-weight: 700;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -12698,8 +12698,15 @@ body {
letter-spacing: 0.8px; letter-spacing: 0.8px;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
transition: .5s;
} }
.beatport-releases-top10-card:hover .beatport-releases-top10-card-label{
color: rgba(138, 43, 226, 0.95);
transition: .5s;
}
/* Loading states for releases */ /* Loading states for releases */
.beatport-releases-top10-loading { .beatport-releases-top10-loading {
display: flex; display: flex;