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

34
index.html
View file

@ -52,22 +52,24 @@
<option value="No change">No Change</option>
</select>
<select id="sortBy" class="filter-select">
<option value="rank">Sort by Rank</option>
<option value="artist">Sort by Artist</option>
<option value="album">Sort by Album</option>
<option value="year">Sort by Year</option>
</select>
<button id="reverseButton" class="reverse-button" title="Reverse order">
<span id="reverseIcon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 6h18M3 12h18M3 18h18"></path>
<path d="M21 6l-2-2-2 2M21 18l-2 2-2 2"></path>
</svg>
</span>
<span id="reverseText">Reverse</span>
</button>
<div class="sort-controls">
<select id="sortBy" class="filter-select">
<option value="rank">Sort by Rank</option>
<option value="artist">Sort by Artist</option>
<option value="album">Sort by Album</option>
<option value="year">Sort by Year</option>
</select>
<button id="reverseButton" class="reverse-button" title="Reverse order">
<span id="reverseIcon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 6h18M3 12h18M3 18h18"></path>
<path d="M21 6l-2-2-2 2M21 18l-2 2-2 2"></path>
</svg>
</span>
<span id="reverseText">Reverse</span>
</button>
</div>
</div>
<div class="bookmark-controls">