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

fix: hide rank badges on favorites

Browse Source
This commit is contained in:
TerryM
2026-06-05 18:25:17 +08:00
parent 5d550e0342
commit 4e459aa4be
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/PopularRankList.tsx
View File

@@ -88,12 +88,14 @@ export function PopularRankRow({
index,
categories,
browseSort = "popular",
showRank = true,
onFavoriteChange,
}: {
post: Post;
index: number;
categories: Category[];
browseSort?: string;
showRank?: boolean;
onFavoriteChange?: (postId: string, favorited: boolean) => void;
}) {
const { t, lang } = useI18n();
@@ -106,7 +108,7 @@ export function PopularRankRow({
const r = postToResource(post, lang, categories);
const cover = r.coverImage && !coverFailed ? assetUrl(r.coverImage) : "";
const isTop3 = index < MEDALS.length;
const isTop3 = showRank && index < MEDALS.length;
const handleDownload = async () => {
if (isDownloading || !r.downloadPostId || !r.downloadAttachmentId) return;
@@ -127,7 +129,13 @@ export function PopularRankRow({
};
return (
<article className="relative flex items-center gap-3 overflow-hidden rounded-2xl bg-[#272632] p-3 transition hover:ring-1 hover:ring-ark-gold/55 md:h-[90px] md:gap-0 md:p-0">
<article
className={`relative grid items-center gap-x-3 gap-y-2 overflow-hidden rounded-2xl bg-[#272632] p-3 transition hover:ring-1 hover:ring-ark-gold/55 md:flex md:h-[90px] md:gap-0 md:p-0 ${
showRank
? "grid-cols-[28px_64px_minmax(0,1fr)]"
: "grid-cols-[64px_minmax(0,1fr)]"
}`}
>
<button
type="button"
onClick={() => {
@@ -140,7 +148,7 @@ export function PopularRankRow({
className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
/>
<RankBadge index={index} />
{showRank ? <RankBadge index={index} /> : null}
<div
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 ${
@@ -161,15 +169,19 @@ export function PopularRankRow({
)}
</div>
<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]">
<div
className={`pointer-events-none relative z-10 row-start-1 flex min-w-0 flex-1 flex-col gap-1 md:gap-3 md:pl-6 md:pr-4 ${
showRank ? "col-start-3" : "col-start-2"
}`}
>
<div className="break-words text-sm font-bold leading-snug text-white md:line-clamp-2 md:text-base md:font-semibold md:leading-[23px]">
{r.title}
</div>
<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">
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[#9b9ca6] md:flex-nowrap md:gap-3 md:text-[#9FA0A8]">
<span className="shrink-0 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">
<span className="min-w-0 break-words">
{cleanCategoryDisplayName(r.categoryName)}
</span>
<span className="text-[#55565e]">·</span>
@@ -179,7 +191,11 @@ export function PopularRankRow({
</div>
</div>
<div className="relative z-10 flex shrink-0 items-center gap-2 pr-4 md:pr-6">
<div
className={`relative z-10 row-start-2 ml-auto flex shrink-0 items-center gap-2 md:ml-0 md:pr-6 ${
showRank ? "col-start-3" : "col-start-2"
}`}
>
<FavoriteButton
resourceId={r.id}
onFavoriteChange={(favorited) =>