a tool for shared writing and social publishing
update cover images in medium size standard site post block to be smaller
+36
-29
+36
-29
app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx
+36
-29
app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx
···
37
37
const hasDate = date !== undefined && date !== null;
38
38
return (
39
39
<div
40
-
className={`justify-between w-full ${textClassName} text-tertiary flex gap-1 flex-wrap items-center`}
40
+
className={`sm:justify-between place-items-start! sm:place-items-center! w-full ${textClassName} text-tertiary flex sm:flex-row flex-col gap-1 flex-wrap items-center`}
41
41
>
42
42
<p
43
43
className={`${textClassName} text-tertiary flex gap-1 items-center flex-wrap`}
···
102
102
const hasCoverImage = !!props.coverImageSrc;
103
103
104
104
return (
105
-
<div className="flex w-full items-stretch ">
106
-
<div className="flex w-full grow flex-col justify-between min-w-0 pl-3 pr-3 py-2">
107
-
<PostLink href={props.href}>
108
-
{props.title && (
109
-
<h3 className="text-primary leading-snug line-clamp-2 pb-1">
110
-
{props.title}
111
-
</h3>
112
-
)}
113
-
<p className="text-secondary line-clamp-3 grow mb-2">
114
-
{props.description}
115
-
</p>
116
-
</PostLink>
117
-
<MetaRow
118
-
author={props.author}
119
-
date={props.date}
120
-
interactions={props.interactions}
121
-
textClassName="text-sm place-self-end"
122
-
/>
123
-
<div className="shrink-0">{props.footer}</div>
124
-
</div>
125
-
{hasCoverImage && (
126
-
<div
127
-
className={`self-start shrink-0 w-16 border-l border-border-light ${props.footer ? " w-[182px] h-[182px]" : "sm:h-36 sm:w-36"}`}
128
-
>
129
-
<img
130
-
src={props.coverImageSrc}
131
-
alt={props.coverImageAlt || props.title || ""}
132
-
className="w-full h-full aspect-square object-cover rounded"
105
+
<div className="flex w-full flex-col">
106
+
<div className="flex w-full items-stretch ">
107
+
<div className="flex w-full grow flex-col justify-between min-w-0 pl-3 pr-3 py-2">
108
+
<PostLink href={props.href}>
109
+
{props.title && (
110
+
<h3 className="text-primary leading-snug line-clamp-2 pb-1">
111
+
{props.title}
112
+
</h3>
113
+
)}
114
+
<p className="text-secondary line-clamp-3 grow mb-2">
115
+
{props.description}
116
+
</p>
117
+
</PostLink>
118
+
<MetaRow
119
+
author={props.author}
120
+
date={props.date}
121
+
interactions={props.interactions}
122
+
textClassName="text-sm place-self-end"
133
123
/>
124
+
{props.footer && (
125
+
<div className="shrink-0 hidden sm:block">{props.footer}</div>
126
+
)}
134
127
</div>
128
+
{hasCoverImage && (
129
+
<div
130
+
className={`self-start shrink-0 w-24 h-24 rounded-md mt-2 mr-2 border-l sm:border-border-light border-transparent ${props.footer ? "sm:w-[182px] sm:h-[182px] sm:rounded-none sm:m-0" : "sm:h-36 sm:w-36 sm:rounded-none sm:m-0"}`}
131
+
>
132
+
<img
133
+
src={props.coverImageSrc}
134
+
alt={props.coverImageAlt || props.title || ""}
135
+
className="w-full h-full aspect-square object-cover sm:rounded-[0px] rounded-md"
136
+
/>
137
+
</div>
138
+
)}
139
+
</div>
140
+
{props.footer && (
141
+
<div className="shrink-0 sm:hidden px-3 pb-2">{props.footer}</div>
135
142
)}
136
143
</div>
137
144
);