From ed222d1c5f131a111d23b32280ff6ee36e3527da Mon Sep 17 00:00:00 2001 From: iye <1713042409@qq.com> Date: Thu, 14 May 2026 12:25:54 +0800 Subject: [PATCH] feat(ui): scroll-aware nav glass + floating back button + hero polish - Navigation: fixed + transparent over Hero (home) / at page top (other routes); fades to glass-on-scroll. Glass uses surface tone matching site cards. - Filter bar sticky glass synced to nav recipe (no seam between layers). - HeroBanner: full-viewport video, center title removed, bottom dim overlay removed, eyebrow/countdown repositioned below the nav. - ArtistDetail: removed portrait shadow; added FloatingBackButton that uses router.back() with internal-history fallback to /. - Floating buttons (back + vote) translateY upward to avoid footer rather than disappearing, via useFooterPush. - Home: useScrollRestore preserves scroll position on return from detail pages; temporarily disables scroll-snap during restore. - PerformanceVideo: max-w capped by 85svh*16/9 so small viewports never crop. - ArtistFilters: hide horizontal scrollbar thumb in tag container. Co-Authored-By: Claude Opus 4.7 --- src/app/layout.tsx | 2 +- src/app/page.tsx | 11 ++- src/components/ArtistFilters.tsx | 4 +- src/components/FloatingBackButton.tsx | 80 ++++++++++++++++++ src/components/FloatingVoteButton.tsx | 15 +++- src/components/HeroBanner.tsx | 29 ++----- src/components/Navigation.tsx | 83 +++++++++++++++++-- src/components/artist/ArtistDetailContent.tsx | 4 +- src/components/artist/PerformanceVideo.tsx | 3 +- src/hooks/useFooterPush.ts | 54 ++++++++++++ src/hooks/useScrollRestore.ts | 63 ++++++++++++++ 11 files changed, 309 insertions(+), 39 deletions(-) create mode 100644 src/components/FloatingBackButton.tsx create mode 100644 src/hooks/useFooterPush.ts create mode 100644 src/hooks/useScrollRestore.ts diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9a8c628..f725429 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -57,7 +57,7 @@ export default function RootLayout({ -
{children}
+
{children}