Fix pool post cards rendering as a colored sliver
PostCard's Link is inline by default; wrapped in a div on the pool detail page it stopped being blockified like a grid child, so its rating-tinted border collapsed into a vertical line on the left. The card is now block-level, and the pool grid only wraps blacklisted posts (for the red ring), so normal cards render exactly like the Online grid.
This commit is contained in:
@@ -31,7 +31,7 @@ export function PostCard({
|
|||||||
to={`/detail/${post.id}`}
|
to={`/detail/${post.id}`}
|
||||||
state={from ? { from } : undefined}
|
state={from ? { from } : undefined}
|
||||||
className={cn(
|
className={cn(
|
||||||
"group overflow-hidden rounded-lg border bg-ctp-base transition",
|
"group block overflow-hidden rounded-lg border bg-ctp-base transition",
|
||||||
ratingBorder[post.rating] ?? "border-ctp-surface0",
|
ratingBorder[post.rating] ?? "border-ctp-surface0",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -268,23 +268,28 @@ export default function PoolDetailPage() {
|
|||||||
const blacklisted =
|
const blacklisted =
|
||||||
blacklistSet.size > 0 &&
|
blacklistSet.size > 0 &&
|
||||||
postIsBlacklisted(post, blacklistSet).length > 0;
|
postIsBlacklisted(post, blacklistSet).length > 0;
|
||||||
const card = (
|
if (!blacklisted) {
|
||||||
|
return (
|
||||||
<PostCard
|
<PostCard
|
||||||
|
key={post.id}
|
||||||
post={post}
|
post={post}
|
||||||
inLibrary={inLibrary.has(post.file.md5)}
|
inLibrary={inLibrary.has(post.file.md5)}
|
||||||
from={`${location.pathname}${location.search}`}
|
from={`${location.pathname}${location.search}`}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
return blacklisted ? (
|
}
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
key={post.id}
|
key={post.id}
|
||||||
className="rounded-lg ring-1 ring-ctp-red/50"
|
className="min-w-0 rounded-lg ring-1 ring-ctp-red/50"
|
||||||
title="Matches your blacklist"
|
title="Matches your blacklist"
|
||||||
>
|
>
|
||||||
{card}
|
<PostCard
|
||||||
|
post={post}
|
||||||
|
inLibrary={inLibrary.has(post.file.md5)}
|
||||||
|
from={`${location.pathname}${location.search}`}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
<div key={post.id}>{card}</div>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user