Reposition album share button to title row on desktop
- 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:
parent
dc0c775eb4
commit
45fbb422e5
2 changed files with 36 additions and 2 deletions
25
styles.css
25
styles.css
|
|
@ -600,6 +600,15 @@ body {
|
|||
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 {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
|
@ -646,6 +655,13 @@ body {
|
|||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.album-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.album-title {
|
||||
font-size: 1.3rem;
|
||||
|
|
@ -998,6 +1014,15 @@ body {
|
|||
.stats {
|
||||
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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue