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

style(home): align popular rank row and recommended card with figma

Browse Source 
- PopularRankList: switch row to 90px Figma layout (246x90 cover, gap 24/12, pill px-3 py-1, meta color #9FA0A8, object-cover image)
- RecommendedCard: unify card and cover background to #272632
This commit is contained in:
TerryM
2026-06-03 08:08:28 +08:00
parent 49380dc5ed
commit a2f6c4fc35
2 changed files with 60 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/PopularRankList.tsx
View File

@@ -66,7 +66,7 @@ function RankBadge({ index }: { index: number }) {
if (index < MEDALS.length) {
return (
<span
className="flex w-7 shrink-0 justify-center text-[22px] leading-none"
className="flex w-7 shrink-0 justify-center text-[22px] leading-none md:w-[76px] md:text-[28px]"
aria-label={`No.${index + 1}`}
>
{MEDALS[index]}
@@ -75,7 +75,7 @@ function RankBadge({ index }: { index: number }) {
}
return (
<span
className="flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87]"
className="flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87] md:w-[76px]"
aria-label={`No.${index + 1}`}
>
{index + 1}
@@ -123,7 +123,7 @@ function PopularRankRow({
};
return (
<article className="relative flex items-center gap-3 rounded-2xl border border-[#27292E] bg-[#272632] p-3 transition hover:border-ark-gold/55 md:gap-4 md:p-4">
<article className="relative flex items-center gap-3 overflow-hidden rounded-2xl border border-[#27292E] bg-[#272632] p-3 transition hover:border-ark-gold/55 md:h-[90px] md:gap-0 md:p-0">
<button
type="button"
onClick={() =>
@@ -138,8 +138,8 @@ function PopularRankRow({
<RankBadge index={index} />
<div
className={`relative z-10 flex h-[52px] w-[64px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-[58px] md:w-[72px] ${
isTop3 ? "ring-1 ring-ark-gold/45" : ""
className={`relative z-10 flex h-[52px] w-[64px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-[90px] md:w-[246px] md:rounded-none ${
isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : ""
}`}
>
{cover ? (
@@ -148,7 +148,7 @@ function PopularRankRow({
alt=""
loading="lazy"
decoding="async"
className="h-full w-full object-fill"
className="h-full w-full object-cover"
onError={() => setCoverFailed(true)}
/>
) : (
@@ -156,12 +156,12 @@ function PopularRankRow({
)}
</div>
<div className="pointer-events-none relative z-10 flex min-w-0 flex-1 flex-col gap-1">
<div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base">
<div className="pointer-events-none relative z-10 flex min-w-0 flex-1 flex-col gap-1 md:gap-3 md:pl-6 md:pr-4">
<div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base md:font-semibold md:leading-[23px]">
{r.title}
</div>
<div className="flex items-center gap-2 text-xs text-[#9b9ca6]">
<span className="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3]">
<div className="flex items-center gap-2 text-xs text-[#9b9ca6] md:gap-3 md:text-[#9FA0A8]">
<span className="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1">
{resourceTypeLabel(t, r.type)}
</span>
<span className="truncate">
@@ -174,7 +174,7 @@ function PopularRankRow({
</div>
</div>
<div className="relative z-10 flex shrink-0 items-center gap-1">
<div className="relative z-10 flex shrink-0 items-center gap-2 pr-4 md:pr-6">
<FavoriteButton resourceId={r.id} />
{r.isDownloadable ? (
<button