Fixed incorrect cover image display for mobile
This commit is contained in:
parent
fa527aeddb
commit
4b84b65d76
3 changed files with 873 additions and 1658 deletions
|
|
@ -9,7 +9,7 @@ type ImageWrapperProps = {
|
||||||
|
|
||||||
export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
|
export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
|
||||||
return (
|
return (
|
||||||
<figure className={cn('flex flex-col items-center gap-1 mb-4 w-full', isListing && 'h-60')}>
|
<figure className={cn('flex flex-col items-center gap-1 mb-4 w-full h-full')}>
|
||||||
<div className="border border-border rounded-xl w-full overflow-hidden flex-1">
|
<div className="border border-border rounded-xl w-full overflow-hidden flex-1">
|
||||||
<div
|
<div
|
||||||
className="flex items-center gap-2 px-2 h-6 border-b border-border w-full bg-fg/10"
|
className="flex items-center gap-2 px-2 h-6 border-b border-border w-full bg-fg/10"
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ export function Post({ post, isLatest, showImageSlot }: PostProps) {
|
||||||
return (
|
return (
|
||||||
<article className={cn('flex flex-col gap-4', isLatest && 'items-center md:flex-row')}>
|
<article className={cn('flex flex-col gap-4', isLatest && 'items-center md:flex-row')}>
|
||||||
{((isLatest && coverImage) || showImageSlot) && (
|
{((isLatest && coverImage) || showImageSlot) && (
|
||||||
<div className={isLatest && coverImage ? 'flex-1 w-full' : 'h-60'}>
|
<div className={cn(isLatest && coverImage ? 'flex-1 w-full' : 'h-60', !coverImage && 'hidden md:block')}>
|
||||||
{coverImage && <ImageWrapper src={coverImage} alt={coverImageAlt ?? title} isListing />}
|
{coverImage && <ImageWrapper src={coverImage} alt={coverImageAlt ?? title} isListing />}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 104 KiB |
Loading…
Reference in a new issue