peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(player): full-height glassy nav strips flanking the modal

Browse source 
Replace the small centred prev/next arrow buttons with faint translucent glass
strips that span the modal's full height, hugging each side of the card (hidden
on narrow screens where there's no room). Same stepping behaviour + Shift+arrow
shortcut; just a larger, easier target that reads as part of the dialog.
This commit is contained in:
npeter83 2026-07-04 23:42:13 +02:00
parent c81c4a351b
commit 6c81419057
1 changed files with 25 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

42
frontend/src/components/PlayerModal.tsx
View file

@ -437,10 +437,12 @@ export default function PlayerModal({
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
> >
{/* Faint prev/next zones flanking the card — step through the feed's order (or a playlist). {/* The card, flanked by full-height glassy strips that step through the feed's order (or a
They fade out at the ends. stopPropagation so a click steps instead of closing. */} playlist). Each strip sits just outside the card, spans its full height, and fades out at
the ends. stopPropagation so a click steps instead of closing. Hidden on narrow screens
where there's no room beside the card. */}
<div className="relative flex w-full max-w-4xl max-h-full">
{hasQueue && ( {hasQueue && (
<>
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -449,28 +451,15 @@ export default function PlayerModal({
disabled={index === 0} disabled={index === 0}
aria-label={t("player.previous")} aria-label={t("player.previous")}
title={`${t("player.previous")} · Shift+←`} title={`${t("player.previous")} · Shift+←`}
className="absolute left-1 sm:left-3 top-1/2 -translate-y-1/2 z-20 grid h-16 w-10 place-items-center rounded-xl text-white/40 transition hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-0" className="absolute right-full top-0 bottom-0 mr-2 hidden w-12 place-items-center rounded-2xl bg-white/5 text-white/40 backdrop-blur-sm transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-0 sm:grid"
> >
<ChevronLeft className="h-7 w-7" /> <ChevronLeft className="h-8 w-8" />
</button> </button>
<button
onClick={(e) => {
e.stopPropagation();
goNext();
}}
disabled={index >= queue!.length - 1}
aria-label={t("player.next")}
title={`${t("player.next")} · Shift+→`}
className="absolute right-1 sm:right-3 top-1/2 -translate-y-1/2 z-20 grid h-16 w-10 place-items-center rounded-xl text-white/40 transition hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-0"
>
<ChevronRight className="h-7 w-7" />
</button>
</>
)} )}
<div <div
ref={cardRef} ref={cardRef}
tabIndex={-1} tabIndex={-1}
className="glass-card relative w-full max-w-4xl max-h-full overflow-y-auto rounded-2xl shadow-2xl outline-none" className="glass-card relative flex-1 min-w-0 max-h-full overflow-y-auto rounded-2xl shadow-2xl outline-none"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div <div
@ -746,6 +735,21 @@ export default function PlayerModal({
</div> </div>
</div> </div>
</div> </div>
{hasQueue && (
<button
onClick={(e) => {
e.stopPropagation();
goNext();
}}
disabled={index >= queue!.length - 1}
aria-label={t("player.next")}
title={`${t("player.next")} · Shift+→`}
className="absolute left-full top-0 bottom-0 ml-2 hidden w-12 place-items-center rounded-2xl bg-white/5 text-white/40 backdrop-blur-sm transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-0 sm:grid"
>
<ChevronRight className="h-8 w-8" />
</button>
)}
</div>
</div> </div>
); );
} }