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

Reposition album share button to title row on desktop

Browse source 
- Move share button to same row as album title on desktop (>768px)
- Keep share button in status row on mobile (≤768px) for better UX
- Add album-title-row container with flexbox layout
- Implement responsive show/hide behavior for desktop vs mobile share buttons

🤖 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:46:28 +02:00
parent dc0c775eb4
commit 45fbb422e5
2 changed files with 36 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
script.js
View file

@ -291,7 +291,16 @@ function createAlbumCard(album) {
<div class="album-header-grid">
<div class="album-rank">#${album.Rank}</div>
<div class="album-details">
<div class="album-title">${escapeHtml(album.Album)}</div>
<div class="album-title-row">
<div class="album-title">${escapeHtml(album.Album)}</div>
<button class="album-share album-share-desktop" 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>
<div class="album-artist">${escapeHtml(album.Artist)}</div>
${album.Info ? `<div class="album-info">${escapeHtml(album.Info)}</div>` : ''}
</div>
@ -305,7 +314,7 @@ function createAlbumCard(album) {
</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}">
<button class="album-share album-share-mobile" 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>