lundberg/top500albums
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Spotify integration, Next button navigation, and UI improvements

Browse source 
- Added Spotify links to all album cards with official green styling
- Implemented Next Album button for sequential navigation (albums 1-499)
- Fixed jump-to-rank to scroll to album card top instead of centering
- Moved share button to same row as album status for better layout
- Improved mobile UI: fixed theme selector overlap, full-width filter controls
- Grouped sort dropdown with reverse button for logical organization
- Updated README with new features and Spotify integration details
- Enhanced vertical alignment of status badges and share buttons
- Refined button sizing and spacing for consistent appearance

🤖 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 01:18:42 +02:00
parent 2720eb1f4b
commit 75bbf157e7
7 changed files with 1118 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

47
script.js
View file

@ -283,34 +283,35 @@ function createAlbumCard(album) {
`<div class="album-cover-icon">🎵</div>`
}
</div>
<div class="album-status ${statusClass}">${statusText}</div>
<div class="album-status-row">
<div class="album-status ${statusClass}">${statusText}</div>
<button class="album-share" title="Share this album" data-rank="${album.Rank}">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
<polyline points="16,6 12,2 8,6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
</button>
</div>
${album.Description ? `<div class="album-description">${formatDescription(album.Description)}</div>` : ''}
<div class="album-links">
<a href="${generateWikipediaUrl(album.Album, album.Artist)}" target="_blank" rel="noopener noreferrer" class="wikipedia-link">
View on Wikipedia →
</a>
<a href="${generateSpotifyUrl(album.Album, album.Artist)}" target="_blank" rel="noopener noreferrer" class="spotify-link">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem;">
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.84-.179-.959-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.361 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3z"/>
</svg>
Listen on Spotify
</a>
<div class="album-links-row">
<a href="${generateWikipediaUrl(album.Album, album.Artist)}" target="_blank" rel="noopener noreferrer" class="wikipedia-link">
View on Wikipedia →
</a>
<a href="${generateSpotifyUrl(album.Album, album.Artist)}" target="_blank" rel="noopener noreferrer" class="spotify-link">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem;">
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.84-.179-.959-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.361 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3z"/>
</svg>
Listen on Spotify
</a>
</div>
${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 class="next-album-link next-album-link-wide" data-rank="${album.Rank}" title="Go to next album (#${album.Rank + 1})">
Next Album →
</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">
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
<polyline points="16,6 12,2 8,6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
</button>
`;
// Description is now always fully visible
@ -711,7 +712,7 @@ function scrollToRank(rank) {
if (albumCard) {
albumCard.scrollIntoView({
behavior: 'smooth',
block: 'center'
block: 'start'
});
// Highlight the album briefly