fix: adjust mobile popular card layout
This commit is contained in:
TerryM
@@ -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 md:w-[76px] md:text-[28px]"
|
className="mt-[15px] flex w-7 shrink-0 justify-center text-[22px] leading-none md:mt-0 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] md:w-[76px]"
|
className="mt-[15px] flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87] md:mt-0 md:w-[76px]"
|
||||||
aria-label={`No.${index + 1}`}
|
aria-label={`No.${index + 1}`}
|
||||||
>
|
>
|
||||||
{index + 1}
|
{index + 1}
|
||||||
@@ -130,10 +130,10 @@ export function PopularRankRow({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<article
|
<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 ${
|
className={`relative grid items-center gap-x-3 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
|
showRank
|
||||||
? "grid-cols-[28px_64px_minmax(0,1fr)]"
|
? "grid-cols-[92px_minmax(0,1fr)_88px]"
|
||||||
: "grid-cols-[64px_minmax(0,1fr)]"
|
: "grid-cols-[64px_minmax(0,1fr)_88px]"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
@@ -148,56 +148,62 @@ export function PopularRankRow({
|
|||||||
className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
|
className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{showRank ? <RankBadge index={index} /> : null}
|
<div className="relative z-10 flex items-start gap-2 md:contents">
|
||||||
|
{showRank ? <RankBadge index={index} /> : null}
|
||||||
|
|
||||||
<div
|
<div className="flex w-[64px] shrink-0 flex-col items-center gap-1 md:block md:h-[90px] md:w-[246px]">
|
||||||
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 ${
|
<div
|
||||||
isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : ""
|
className={`flex h-[52px] w-[64px] items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-full md:w-full md:rounded-none ${
|
||||||
}`}
|
isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : ""
|
||||||
>
|
}`}
|
||||||
{cover ? (
|
>
|
||||||
<img
|
{cover ? (
|
||||||
src={cover}
|
<img
|
||||||
alt=""
|
src={cover}
|
||||||
loading="lazy"
|
alt=""
|
||||||
decoding="async"
|
loading="lazy"
|
||||||
className="h-full w-full object-cover"
|
decoding="async"
|
||||||
onError={() => setCoverFailed(true)}
|
className="h-full w-full object-cover"
|
||||||
/>
|
onError={() => setCoverFailed(true)}
|
||||||
) : (
|
/>
|
||||||
<FallbackCover type={r.type} />
|
) : (
|
||||||
)}
|
<FallbackCover type={r.type} />
|
||||||
</div>
|
)}
|
||||||
|
</div>
|
||||||
<div
|
<time
|
||||||
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 ${
|
dateTime={post.publishedAt}
|
||||||
showRank ? "col-start-3" : "col-start-2"
|
className="whitespace-nowrap text-[10px] leading-4 text-ark-muted md:hidden"
|
||||||
}`}
|
>
|
||||||
>
|
|
||||||
<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 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="min-w-0 break-words">
|
|
||||||
{cleanCategoryDisplayName(r.categoryName)}
|
|
||||||
</span>
|
|
||||||
<span className="text-[#55565e]">·</span>
|
|
||||||
<time dateTime={post.publishedAt} className="shrink-0 text-ark-muted">
|
|
||||||
{formatDateYmd(post.publishedAt)}
|
{formatDateYmd(post.publishedAt)}
|
||||||
</time>
|
</time>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div className="pointer-events-none relative z-10 col-start-2 flex min-w-0 flex-1 flex-col gap-1 md:col-auto md:gap-3 md:pl-6 md:pr-4">
|
||||||
className={`relative z-10 row-start-2 ml-auto flex shrink-0 items-center gap-2 md:ml-0 md:pr-6 ${
|
<div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base md:font-semibold md:leading-[23px]">
|
||||||
showRank ? "col-start-3" : "col-start-2"
|
{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">
|
||||||
|
{resourceTypeLabel(t, r.type)}
|
||||||
|
</span>
|
||||||
|
<span className="truncate">
|
||||||
|
{cleanCategoryDisplayName(r.categoryName)}
|
||||||
|
</span>
|
||||||
|
<span className="hidden text-[#55565e] md:inline">·</span>
|
||||||
|
<time
|
||||||
|
dateTime={post.publishedAt}
|
||||||
|
className="hidden shrink-0 text-ark-muted md:inline"
|
||||||
|
>
|
||||||
|
{formatDateYmd(post.publishedAt)}
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 col-start-3 flex shrink-0 items-center justify-end gap-2 md:col-auto md:pr-6">
|
||||||
<FavoriteButton
|
<FavoriteButton
|
||||||
resourceId={r.id}
|
resourceId={r.id}
|
||||||
|
size="sm"
|
||||||
onFavoriteChange={(favorited) =>
|
onFavoriteChange={(favorited) =>
|
||||||
onFavoriteChange?.(post.id, favorited)
|
onFavoriteChange?.(post.id, favorited)
|
||||||
}
|
}
|
||||||
@@ -209,15 +215,15 @@ export function PopularRankRow({
|
|||||||
disabled={isDownloading}
|
disabled={isDownloading}
|
||||||
aria-label={t("download")}
|
aria-label={t("download")}
|
||||||
title={t("download")}
|
title={t("download")}
|
||||||
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
|
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
|
||||||
>
|
>
|
||||||
{isDownloading ? (
|
{isDownloading ? (
|
||||||
<LoaderCircle
|
<LoaderCircle
|
||||||
className="h-5 w-5 animate-spin"
|
className="h-4 w-4 animate-spin"
|
||||||
strokeWidth={2.3}
|
strokeWidth={2.3}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<DownloadCloudIcon className="h-6 w-6" />
|
<DownloadCloudIcon className="h-5 w-5" />
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
Reference in New Issue
Block a user