itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 14:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(hero): prev / next arrows on the Mainstage featured strip (#735)

Browse Source 
* feat(hero): prev / next arrows on the Mainstage featured strip

Adds left and right chevron buttons over the featured-album hero so a
single click flips to the previous / next album. Hitting the 8 px dot
indicators was awkward and often opened the underlying album by
mistake; the arrows give a generous 44 px touch target on each edge.

- New `goPrev` / `goNext` callbacks wrap with modulo, restart the
  auto-advance timer on click (same pattern the old dot handler used).
- Buttons live in a new `.hero-nav` flex wrapper with `inset: 0` and
  `justify-content: space-between`, so they pin to the hero's left and
  right edges regardless of theme padding. `pointer-events: none` on
  the wrapper + `auto` on the buttons keeps the rest of the hero
  click-through (navigate to album).
- Dots are now decorative spans, not buttons — `pointer-events: none`,
  no hover state, no `onClick`. Clicking near a dot used to navigate
  to the album because the dot was too small to land on.
- i18n: `previousAlbum` / `nextAlbum` keys in all 9 locales.

Reported by zunoz on Discord.

* docs(changelog): note Mainstage hero prev / next arrows (#735)
This commit is contained in:
Frank Stellmacher
2026-05-16 13:43:09 +02:00
committed by GitHub
parent 2233e8fb91
commit 31abdc03ef
12 changed files with 109 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components/hero.css
+40 -7
View File
@@ -30,6 +30,7 @@
display: flex;
gap: 6px;
z-index: 10;
pointer-events: none;
}
.hero-dot {
@@ -37,21 +38,53 @@
height: 8px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.35);
border: none;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
}
.hero-dot:hover:not(.hero-dot-active) {
background: rgba(255, 255, 255, 0.6);
}
.hero-dot-active {
width: 24px;
background: rgba(255, 255, 255, 0.9);
}
/* Wrapper that pins prev/next arrows to the hero's left/right edges. */
.hero-nav {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-3);
pointer-events: none;
z-index: 11;
}
.hero-nav-arrow {
pointer-events: auto;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: rgba(0, 0, 0, 0.45);
color: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 0;
cursor: pointer;
transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.hero-nav-arrow:hover {
background: rgba(0, 0, 0, 0.65);
border-color: rgba(255, 255, 255, 0.32);
transform: scale(1.05);
}
.hero-nav-arrow:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.hero-overlay {
position: absolute;
inset: 0;