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) { if (index < MEDALS.length) {
return ( return (
<span <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}`} aria-label={`No.${index + 1}`}
> >
{MEDALS[index]} {MEDALS[index]}
@@ -75,7 +75,7 @@ function RankBadge({ index }: { index: number }) {
} }
return ( return (
<span <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}`} aria-label={`No.${index + 1}`}
> >
{index + 1} {index + 1}
@@ -123,7 +123,7 @@ function PopularRankRow({
}; };
return ( 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 <button
type="button" type="button"
onClick={() => onClick={() =>
@@ -138,8 +138,8 @@ function PopularRankRow({
<RankBadge index={index} /> <RankBadge index={index} />
<div <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] ${ 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" : "" isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : ""
}`} }`}
> >
{cover ? ( {cover ? (
@@ -148,7 +148,7 @@ function PopularRankRow({
alt="" alt=""
loading="lazy" loading="lazy"
decoding="async" decoding="async"
className="h-full w-full object-fill" className="h-full w-full object-cover"
onError={() => setCoverFailed(true)} onError={() => setCoverFailed(true)}
/> />
) : ( ) : (
@@ -156,12 +156,12 @@ function PopularRankRow({
)} )}
</div> </div>
<div className="pointer-events-none relative z-10 flex min-w-0 flex-1 flex-col gap-1"> <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"> <div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base md:font-semibold md:leading-[23px]">
{r.title} {r.title}
</div> </div>
<div className="flex items-center gap-2 text-xs text-[#9b9ca6]"> <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]"> <span className="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1">
{resourceTypeLabel(t, r.type)} {resourceTypeLabel(t, r.type)}
</span> </span>
<span className="truncate"> <span className="truncate">
@@ -174,7 +174,7 @@ function PopularRankRow({
</div> </div>
</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} /> <FavoriteButton resourceId={r.id} />
{r.isDownloadable ? ( {r.isDownloadable ? (
<button <button

88
src/components/RecommendedCard.tsx
View File

@@ -107,7 +107,7 @@ export function RecommendedCard({
layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS
} ${ } ${
useFigmaDesign useFigmaDesign
? "border-[#27292E]" ? "border-[#27292E] bg-[#272632]"
: "border-transparent md:border-ark-line md:bg-ark-panel" : "border-transparent md:border-ark-line md:bg-ark-panel"
}`} }`}
> >
@@ -116,7 +116,13 @@ export function RecommendedCard({
aria-label={displayTitle} aria-label={displayTitle}
className="absolute inset-0 z-10 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70" className="absolute inset-0 z-10 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
/> />
<div className="relative block aspect-[208/108] overflow-hidden bg-[#111116]"> <div
className={
useFigmaDesign
? "relative block h-[131px] overflow-hidden bg-[#272632]"
: "relative block aspect-[208/108] overflow-hidden bg-[#111116]"
}
>
{cover ? ( {cover ? (
<img <img
src={cover} src={cover}
@@ -134,21 +140,22 @@ export function RecommendedCard({
{r.badgeLabel} {r.badgeLabel}
</span> </span>
) : null} ) : null}
<FavoriteButton
resourceId={r.id}
size="sm"
className="absolute right-3 top-3 z-20 shadow-lg shadow-black/30"
/>
</div> </div>
<div <div
className={ className={
useFigmaDesign useFigmaDesign
? "flex h-[131px] flex-col px-4 py-3" ? "flex h-[143px] flex-col px-4 py-4"
: "flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]" : "flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]"
} }
> >
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<h3 className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 transition-colors group-hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug"> <h3
className={
useFigmaDesign
? "text-base font-semibold leading-[23px] text-white line-clamp-2 transition-colors group-hover:text-ark-gold2"
: "text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 transition-colors group-hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug"
}
>
{displayTitle} {displayTitle}
</h3> </h3>
{useFigmaDesign ? ( {useFigmaDesign ? (
@@ -179,36 +186,39 @@ export function RecommendedCard({
)} )}
<time dateTime={dateTime}>{dateStr}</time> <time dateTime={dateTime}>{dateStr}</time>
</div> </div>
{dl ? ( <div className="relative z-20 flex shrink-0 items-center gap-2">
<button <FavoriteButton resourceId={r.id} size="sm" />
type="button" {dl ? (
className={ <button
useFigmaDesign type="button"
? "relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait" className={
: "relative z-20 shrink-0 rounded-lg p-1 text-white outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait" useFigmaDesign
} ? "relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
title={isDownloading ? t("downloading") : t("download")} : "relative z-20 shrink-0 rounded-lg p-1 text-white outline-none transition hover:bg-ark-gold/10 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait"
aria-label={isDownloading ? t("downloading") : t("download")} }
aria-busy={isDownloading} title={isDownloading ? t("downloading") : t("download")}
disabled={isDownloading} aria-label={isDownloading ? t("downloading") : t("download")}
onClick={(e) => { aria-busy={isDownloading}
e.preventDefault(); disabled={isDownloading}
e.stopPropagation(); onClick={(e) => {
void handleDownload(); e.preventDefault();
}} e.stopPropagation();
> void handleDownload();
{isDownloading ? ( }}
<LoaderCircle >
className="h-5 w-5 animate-spin" {isDownloading ? (
strokeWidth={2.2} <LoaderCircle
/> className="h-5 w-5 animate-spin"
) : useFigmaDesign ? ( strokeWidth={2.2}
<DownloadCloudIcon className="h-6 w-6" /> />
) : ( ) : useFigmaDesign ? (
<Download className="h-5 w-5" strokeWidth={2.2} /> <DownloadCloudIcon className="h-6 w-6" />
)} ) : (
</button> <Download className="h-5 w-5" strokeWidth={2.2} />
) : null} )}
</button>
) : null}
</div>
</div> </div>
</div> </div>
</m.article> </m.article>