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

fix: stabilize desktop recommendation layouts

Browse Source
This commit is contained in:
TerryM
2026-05-28 17:31:32 +08:00
parent 5fec82dbba
commit 5036c930bb
3 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -69,7 +69,7 @@ export function Home() {
getJSON<{ items: Post[] }>(`/api/posts/recommended${postQ}&limit=12`),
getJSON<{ items: Post[] }>(`/api/posts${postQ}&sort=latest&limit=5`),
getJSON<{ items: Post[] }>(
`/api/posts${postQ}&sort=popular&limit=5`,
`/api/posts${postQ}&tag=popular&limit=5`,
).catch((): { items: Post[] } => ({ items: [] })),
])
.then(([c, r, l, p]) => {
@@ -375,7 +375,7 @@ export function Home() {
<MessageBubble key={post.id} post={post} />
))}
</div>
<div className="mt-7 hidden gap-3 min-[576px]:grid-cols-2 md:grid md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
<div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
{latest.map((r) => (
<LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
))}
@@ -392,7 +392,7 @@ export function Home() {
<div className="px-4 md:px-0">
<SectionHeader
title={t("popularSection")}
viewAllTo="/browse?sort=popular"
viewAllTo="/browse?tag=popular"
viewAllLabel={t("viewAll")}
/>
</div>
@@ -401,7 +401,7 @@ export function Home() {
<MessageBubble key={post.id} post={post} />
))}
</div>
<div className="mt-7 hidden gap-3 min-[576px]:grid-cols-2 md:grid md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
<div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
{popular.map((r) => (
<LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
))}

7
src/pages/OfficialRecommendations/index.tsx
View File

@@ -45,14 +45,17 @@ export function OfficialRecommendationsPage() {
return (
<section>
<SectionHeader title={t("officialSection")} />
<div className="mt-7 grid grid-cols-[repeat(auto-fill,208px)] justify-center gap-3 md:grid-cols-[repeat(auto-fill,240px)] md:justify-start md:gap-4 lg:grid-cols-[repeat(auto-fill,246.4px)]">
<div className="mx-auto max-w-full px-4 md:max-w-[820px] md:px-0 lg:max-w-[1080px] xl:max-w-[1180px]">
<SectionHeader title={t("officialSection")} />
</div>
<div className="mx-auto mt-7 grid max-w-full grid-cols-1 justify-items-center gap-3 px-4 min-[560px]:grid-cols-2 md:max-w-[820px] md:grid-cols-3 md:px-0 lg:max-w-[1080px] lg:grid-cols-4 xl:max-w-[1180px]">
{items.map((item, index) => (
<RecommendedCard
key={item.id}
r={item}
visualIndex={index}
useFigmaDesign
layout="grid"
/>
))}
</div>