beatport progress
This commit is contained in:
parent
69c8622588
commit
7821d4cba5
2 changed files with 24 additions and 4 deletions
|
|
@ -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';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue