Add Next album navigation button to album cards

- Add "Next" button to album cards for sequential navigation through rankings
- Button shows "Next (#rank+1)" and uses existing jump-to-rank functionality
- Button only appears on albums 1-499 (not on album #500)
- Styled to match Wikipedia and Spotify links with theme-aware colors
- Uses right arrow SVG icon and hover effects consistent with other links
- Clicking Next button jumps to the next sequential album in the ranking

Features:
• Sequential navigation through the Top 500 albums
• Smart button hiding on the last album (#500)
• Theme-aware styling with CSS custom properties
• Consistent visual design with existing link buttons
• Smooth scroll navigation using existing jump functionality

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Johan Lundberg 2025-07-02 00:53:39 +02:00
parent a3bdd4b217
commit 2720eb1f4b
2 changed files with 52 additions and 0 deletions

View file

@ -295,6 +295,14 @@ function createAlbumCard(album) {
</svg>
Listen on Spotify
</a>
${album.Rank < 500 ? `
<button class="next-album-link" data-rank="${album.Rank}" title="Go to next album (#${album.Rank + 1})">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 0.5rem;">
<polyline points="9,18 15,12 9,6"></polyline>
</svg>
Next (#${album.Rank + 1})
</button>
` : ''}
</div>
<button class="album-share" title="Share this album" data-rank="${album.Rank}">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@ -315,6 +323,19 @@ function createAlbumCard(album) {
handleAlbumShare(rank, this);
});
// Add click handler for next button
const nextBtn = card.querySelector('.next-album-link');
if (nextBtn) {
nextBtn.addEventListener('click', function(e) {
e.stopPropagation(); // Prevent card click
const currentRank = parseInt(this.getAttribute('data-rank'));
const nextRank = currentRank + 1;
if (nextRank <= 500) {
jumpToRankNumber(nextRank);
}
});
}
return card;
}