terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: desktop homepage responsive polish and nav tweaks

Browse Source 
- Banner: scale down and center on desktop (md:max-w-[680px] lg:max-w-[800px])
  so it no longer fills the whole screen.
- Align section widths to one responsive container (820/1080/1180): wrap the
  Official row and match Popular to Latest, fixing left-edge/width mismatches.
- RecommendedCard: stop the carousel card from shrinking back to 246.4px at xl.
- Popular download button now matches the file bubble's filled round
  DownloadCloud button for visual consistency.
- Header nav vertical padding py-1 -> py-0.5; swap Favorites before Popular
  across desktop nav and mobile menu to match the bottom tab order.
- Official carousel: hide the left arrow at the start and the right arrow at
  the end instead of always showing both.

All changes are md/lg/xl-scoped; mobile layout is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-31 02:04:26 +08:00
parent 9ac072e8d8
commit 320e09cc87
5 changed files with 55 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/Home/index.tsx
View File

@@ -221,6 +221,9 @@ export function Home() {
Math.round(recScroll.progress * (recommendedDotCount - 1)),
)
: 0;
// Hide the arrow that points to an edge we're already at.
const recAtStart = recScroll.progress <= 0.01;
const recAtEnd = recScroll.progress >= 0.99;
if (err) {
return (
@@ -333,14 +336,15 @@ export function Home() {
<Reveal>
<section id="official" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0">
<SectionHeader
title={t("officialSection")}
viewAllTo="/official-recommendations"
viewAllLabel={t("viewAll")}
/>
</div>
<div className="relative">
<div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
<div className="px-4 md:px-0">
<SectionHeader
title={t("officialSection")}
viewAllTo="/official-recommendations"
viewAllLabel={t("viewAll")}
/>
</div>
<div className="relative">
<div
ref={recRowRef}
className="mt-2.5 flex gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pr-0 md:pb-5 [&::-webkit-scrollbar]:hidden"
@@ -386,26 +390,27 @@ export function Home() {
/>
))}
</div>
{canScrollRec ? (
<>
<button
type="button"
onClick={() => scrollRec(-1)}
className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
aria-label="Previous recommendations"
>
<ChevronLeft className="h-5 w-5" />
</button>
<button
type="button"
onClick={() => scrollRec(1)}
className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
aria-label="Next recommendations"
>
<ChevronRight className="h-5 w-5" />
</button>
</>
{canScrollRec && !recAtStart ? (
<button
type="button"
onClick={() => scrollRec(-1)}
className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
aria-label="Previous recommendations"
>
<ChevronLeft className="h-5 w-5" />
</button>
) : null}
{canScrollRec && !recAtEnd ? (
<button
type="button"
onClick={() => scrollRec(1)}
className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
aria-label="Next recommendations"
>
<ChevronRight className="h-5 w-5" />
</button>
) : null}
</div>
</div>
</section>
</Reveal>