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-header-grid">
<div class="album-rank">#${album.Rank}</div> <div class="album-rank">#${album.Rank}</div>
<div class="album-details"> <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> <div class="album-artist">${escapeHtml(album.Artist)}</div>
${album.Info ? `<div class="album-info">${escapeHtml(album.Info)}</div>` : ''} ${album.Info ? `<div class="album-info">${escapeHtml(album.Info)}</div>` : ''}
</div> </div>
@ -305,7 +314,7 @@ function createAlbumCard(album) {
</div> </div>
<div class="album-status-row"> <div class="album-status-row">
<div class="album-status ${statusClass}">${statusText}</div> <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"> <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> <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> <polyline points="16,6 12,2 8,6"></polyline>

25
styles.css
View file

@ -600,6 +600,15 @@ body {
box-shadow: 0 2px 8px var(--shadow-color); box-shadow: 0 2px 8px var(--shadow-color);
} }
/* Desktop: show share button in header, hide in status row */
.album-share-desktop {
display: flex;
}
.album-share-mobile {
display: none;
}
.album-share svg { .album-share svg {
color: var(--text-light); color: var(--text-light);
} }
@ -646,6 +655,13 @@ body {
gap: 0.25rem; gap: 0.25rem;
} }
.album-title-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.album-title { .album-title {
font-size: 1.3rem; font-size: 1.3rem;
@ -998,6 +1014,15 @@ body {
.stats { .stats {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
/* Mobile: hide share button in header, show in status row */
.album-share-desktop {
display: none;
}
.album-share-mobile {
display: flex;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {