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) => {
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-artwork">
${release.image_url ?
@ -19904,6 +19904,19 @@ function populateBeatportTop10Releases(releases) {
releasesHtml += '</div>';
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 */
.beatport-releases-top10-container {
max-width: 1200px;
max-width: 1500px;
margin: 0 auto;
}
@ -12561,7 +12561,7 @@ body {
/* Track containers with grid layout for releases */
.beatport-releases-top10-tracks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
gap: 20px;
}
@ -12689,7 +12689,7 @@ body {
.beatport-releases-top10-card-label {
font-size: 13px;
color: rgba(138, 43, 226, 0.95);
color: white;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
@ -12698,8 +12698,15 @@ body {
letter-spacing: 0.8px;
max-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 */
.beatport-releases-top10-loading {
display: flex;