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

19
src/components/RecommendedCard.tsx
View File

@@ -16,8 +16,13 @@ function isPlaceholderAsset(path: string | undefined | null) {
return !path || path.includes("placeholder-cover");
}
const CARD_CLASS =
"group flex w-[208px] shrink-0 flex-col overflow-hidden rounded-xl border bg-[#1D1E23] transition hover:border-ark-gold/55 md:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
const CARD_BASE_CLASS =
"group flex shrink-0 flex-col overflow-hidden rounded-xl border bg-[#1D1E23] transition hover:border-ark-gold/55";
const CARD_CAROUSEL_SIZE_CLASS =
"w-[208px] md:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
const CARD_GRID_SIZE_CLASS = "w-full max-w-[360px] md:max-w-none";
type RecommendedResource = Resource & {
downloadPostId?: string;
@@ -28,10 +33,12 @@ export function RecommendedCard({
r,
visualIndex = 0,
useFigmaDesign = false,
layout = "carousel",
}: {
r: RecommendedResource;
visualIndex?: number;
useFigmaDesign?: boolean;
layout?: "carousel" | "grid";
}) {
const { t } = useI18n();
const [isDownloading, setIsDownloading] = useState(false);
@@ -78,7 +85,9 @@ export function RecommendedCard({
return (
<article
className={`${CARD_CLASS} ${
className={`${CARD_BASE_CLASS} ${
layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS
} ${
useFigmaDesign
? "border-[#27292E]"
: "border-transparent md:border-ark-line md:bg-ark-panel"
@@ -86,7 +95,7 @@ export function RecommendedCard({
>
<Link
to={`/resource/${r.id}`}
className="relative block h-[108px] overflow-hidden bg-[#111116] md:aspect-[246.4/138.6] md:h-auto"
className="relative block aspect-[208/108] overflow-hidden bg-[#111116]"
>
{cover ? (
<img
@@ -202,7 +211,7 @@ export function ComingSoonRecommendedCard({
return (
<article
className={`${CARD_CLASS} cursor-default border-transparent opacity-95 md:border-ark-line md:bg-ark-panel`}
className={`${CARD_BASE_CLASS} ${CARD_CAROUSEL_SIZE_CLASS} cursor-default border-transparent opacity-95 md:border-ark-line md:bg-ark-panel`}
aria-label="即将到来"
>
<div className="relative block h-[108px] overflow-hidden bg-black md:aspect-[246.4/138.6] md:h-auto">