a tool for shared writing and social publishing
a bunch of styling fixes to standard site post block
+103
-77
+1
app/globals.css
+1
app/globals.css
+63
-55
app/lish/[did]/[publication]/PublicationPostItem.tsx
+63
-55
app/lish/[did]/[publication]/PublicationPostItem.tsx
···
79
79
80
80
export function PublicationPostItemSmall(props: CommonProps) {
81
81
return (
82
-
<>
83
-
<div className="flex w-full grow flex-col gap-1 px-3 py-2">
84
-
<PostLink href={props.href}>
85
-
{props.title && <h3 className="text-primary">{props.title}</h3>}
86
-
</PostLink>
87
-
<MetaRow
88
-
author={props.author}
89
-
date={props.date}
90
-
interactions={props.interactions}
91
-
textClassName="text-sm"
92
-
/>
93
-
</div>
82
+
<div className="flex w-full grow flex-col gap-1 px-3 py-2">
83
+
<PostLink href={props.href}>
84
+
{props.title && <h3 className="text-primary">{props.title}</h3>}
85
+
</PostLink>
86
+
<MetaRow
87
+
author={props.author}
88
+
date={props.date}
89
+
interactions={props.interactions}
90
+
textClassName="text-sm"
91
+
/>
92
+
<hr className=" border-border-light mt-1" />
94
93
{props.footer}
95
-
<hr className="last:hidden border-border-light" />
96
-
</>
94
+
</div>
97
95
);
98
96
}
99
97
···
102
100
return (
103
101
<>
104
102
<div className="flex w-full gap-3 items-stretch sm:min-h-36">
105
-
<div className="flex w-full gap-2 grow flex-col justify-between min-w-0 pl-3 pr-3 py-2">
106
-
<PostLink href={props.href}>
107
-
{props.title && (
108
-
<h3 className="text-primary line-clamp-2">{props.title}</h3>
109
-
)}
110
-
<p className="text-secondary line-clamp-3">
111
-
{props.description} {props.description}
112
-
</p>
113
-
</PostLink>
114
-
<MetaRow
115
-
author={props.author}
116
-
date={props.date}
117
-
interactions={props.interactions}
118
-
textClassName="text-sm place-self-end"
119
-
/>
103
+
<div className="flex w-full grow flex-col min-w-0 pl-3 pr-3 py-2">
104
+
<div className="flex flex-col grow gap-2 justify-between min-w-0">
105
+
<PostLink href={props.href}>
106
+
{props.title && (
107
+
<h3 className="text-primary line-clamp-2">{props.title}</h3>
108
+
)}
109
+
<p className="text-secondary line-clamp-3">
110
+
{props.description} {props.description}
111
+
</p>
112
+
</PostLink>
113
+
<MetaRow
114
+
author={props.author}
115
+
date={props.date}
116
+
interactions={props.interactions}
117
+
textClassName="text-sm place-self-end"
118
+
/>
119
+
</div>
120
+
<div className="shrink-0">
121
+
<hr className=" border-border-light mt-2 mb-1" />
122
+
{props.footer}
123
+
</div>
120
124
</div>
121
125
{hasCoverImage && (
122
-
<div className="self-start shrink-0 w-16 sm:w-36">
126
+
<div
127
+
className={`self-start shrink-0 w-16 border-l border-border-light ${props.footer ? "w-[182px]" : "sm:w-36"}`}
128
+
>
123
129
<img
124
130
src={props.coverImageSrc}
125
131
alt={props.coverImageAlt || props.title || ""}
···
128
134
</div>
129
135
)}
130
136
</div>
131
-
{props.footer}
132
-
<hr className="last:hidden border-border-light" />
133
137
</>
134
138
);
135
139
}
···
139
143
const widePage = (props.pageWidth ?? 0) >= 768;
140
144
const body = (
141
145
<div
142
-
className={`flex w-full grow flex-col gap-2 justify-between ${widePage ? " px-3 py-2 sm:pb-3" : "px-3 py-2 "}`}
146
+
className={`flex w-full grow flex-col ${widePage ? " px-3 py-2 sm:pb-3" : "px-3 py-2 "}`}
143
147
>
144
-
<PostLink href={props.href}>
145
-
{props.title && (
146
-
<h3
147
-
className={`text-primary text-lg clamp-2 ${widePage ? "sm:text-xl " : ""}`}
148
+
<div className="flex flex-col grow w-full min-w-0 justify-between gap-2">
149
+
<PostLink href={props.href}>
150
+
{props.title && (
151
+
<h3
152
+
className={`text-primary text-lg clamp-2 ${widePage ? "sm:text-xl " : ""}`}
153
+
>
154
+
{props.title}
155
+
</h3>
156
+
)}
157
+
<p
158
+
className={`text-secondary line-clamp-3 text-base ${widePage ? "sm:text-lg " : ""}`}
148
159
>
149
-
{props.title}
150
-
</h3>
151
-
)}
152
-
<p
153
-
className={`text-secondary line-clamp-3 text-base ${widePage ? "sm:text-lg " : ""}`}
154
-
>
155
-
{props.description}
156
-
</p>
157
-
</PostLink>
158
-
<MetaRow
159
-
author={props.author}
160
-
date={props.date}
161
-
interactions={props.interactions}
162
-
textClassName={`${widePage ? "text-sm sm:text-base " : "text-sm "} `}
163
-
/>
160
+
{props.description}
161
+
</p>
162
+
</PostLink>
163
+
<MetaRow
164
+
author={props.author}
165
+
date={props.date}
166
+
interactions={props.interactions}
167
+
textClassName={`${widePage ? "text-sm sm:text-base " : "text-sm "} `}
168
+
/>
169
+
</div>
170
+
<div className="shrink-0 flex flex-col shrink-0">
171
+
<hr className=" border-border-light mt-2 mb-1" />
172
+
{props.footer}
173
+
</div>
164
174
</div>
165
175
);
166
176
···
174
184
<img
175
185
src={props.coverImageSrc}
176
186
alt={props.coverImageAlt || props.title || ""}
177
-
className="h-full aspect-[1.91/1] object-cover rounded"
187
+
className={`${widePage ? "h-[244px]" : "h-full"} aspect-[1.91/1] object-cover rounded`}
178
188
/>
179
189
</div>
180
190
)}
181
191
{body}
182
192
</div>
183
-
{props.footer}
184
-
<hr className="last:hidden border-border-light" />
185
193
</>
186
194
);
187
195
}
+11
-12
components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx
+11
-12
components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx
···
38
38
const pageWidth = useEntity(rootEntity, "theme/page-width")?.data.value;
39
39
40
40
if (isLoading) {
41
-
return <StandardSitePostItemPlaceholder size={size} pageWidth={pageWidth} />;
41
+
return (
42
+
<StandardSitePostItemPlaceholder size={size} pageWidth={pageWidth} />
43
+
);
42
44
}
43
45
44
46
if (!data) {
45
-
return (
46
-
<p className="text-sm italic text-tertiary">
47
-
Post not found.
48
-
</p>
49
-
);
47
+
return <p className="text-sm italic text-tertiary">Post not found.</p>;
50
48
}
51
49
52
50
return (
···
96
94
if (size === "small") {
97
95
return (
98
96
<>
99
-
<div className="flex w-full grow flex-col gap-1 px-3 py-2">
97
+
<div className="flex w-full grow flex-col gap-1 px-3 py-3">
100
98
<div className="h-7 w-2/3 bg-border-light rounded animate-pulse" />
101
99
<div className="h-4 w-32 bg-border-light rounded animate-pulse" />
102
100
</div>
···
134
132
className={`bg-border-light rounded animate-pulse aspect-[1.91/1] ${widePage ? "w-full sm:w-2/5 shrink-0" : "w-full"}`}
135
133
/>
136
134
<div
137
-
className={`flex w-full grow flex-col gap-2 justify-between ${widePage ? "px-3 py-2 sm:pb-3" : "px-3 py-2"}`}
135
+
className={`flex w-full grow flex-col gap-2 justify-between ${widePage ? "px-3 py-3 " : "px-3 py-3"}`}
138
136
>
139
137
<div className="flex flex-col gap-1.5">
140
138
<div
···
222
220
!!post.publication?.record &&
223
221
(!currentPublicationUri || post.publication.uri !== currentPublicationUri);
224
222
225
-
const pubFooter = showPubFooter && post.publication ? (
226
-
<PubFooter publication={post.publication} />
227
-
) : null;
223
+
const pubFooter =
224
+
showPubFooter && post.publication ? (
225
+
<PubFooter publication={post.publication} />
226
+
) : null;
228
227
229
228
const commonProps = {
230
229
href: docUrl,
···
276
275
return (
277
276
<Link
278
277
href={pubUrl}
279
-
className="flex items-center gap-1.5 px-3 pt-1.5 pb-2 text-accent-contrast font-bold no-underline! text-sm"
278
+
className="flex items-center gap-1.5 text-accent-contrast font-bold no-underline! text-sm -mb-0.5"
280
279
>
281
280
<PubIcon tiny record={publication.record} uri={publication.uri} />
282
281
<span className="min-w-0 truncate">{publication.record.name}</span>
+17
-5
components/Blocks/StandardSitePostBlock/index.tsx
+17
-5
components/Blocks/StandardSitePostBlock/index.tsx
···
129
129
const SmallIcon = ({ selected }: { selected: boolean }) => {
130
130
return (
131
131
<div
132
-
className={`flex gap-2 p-2 w-full light-container outline-2 outline-offset-1 ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`}
132
+
className={`flex gap-2 p-2 w-full opaque-container outline-2 outline-offset-1 border-border! ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`}
133
133
>
134
134
<div className="flex flex-col gap-1 grow min-w-0">
135
135
<div className="w-full h-4 bg-tertiary rounded-[2px]" />
···
146
146
const MedIcon = ({ selected }: { selected: boolean }) => {
147
147
return (
148
148
<div
149
-
className={`flex gap-2 w-full light-container outline-2 outline-offset-1 ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent "}`}
149
+
className={`flex gap-2 w-full opaque-container outline-2 outline-offset-1 bg-bg-page overflow-hidden border-border! ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent "}`}
150
150
>
151
151
<div className="flex flex-col gap-1 p-2 grow min-w-0">
152
152
<div className="w-full h-4 bg-tertiary rounded-[2px]" />
···
157
157
<div className="w-6 h-2 bg-border rounded-[2px]" />
158
158
</div>
159
159
</div>
160
-
<div className="aspect-square h-[82px] bg-test shrink-0" />
160
+
<div
161
+
className="aspect-square h-[82px] bg-border border-l border-border shrink-0 bg-cover bg-center"
162
+
style={{
163
+
backgroundImage: "url(/imagePlaceholder.png)",
164
+
backgroundBlendMode: "hard-light",
165
+
}}
166
+
/>
161
167
</div>
162
168
);
163
169
};
···
165
171
const LargeIcon = ({ selected }: { selected: boolean }) => {
166
172
return (
167
173
<div
168
-
className={`flex flex-col gap-2 w-full outline-2 outline-offset-1 light-container ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`}
174
+
className={`flex flex-col gap-2 w-full outline-2 outline-offset-1 opaque-container overflow-hidden border-border! ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`}
169
175
>
170
-
<div className="w-full aspect-video bg-test rounded-t-[2px]" />
176
+
<div
177
+
className="w-full aspect-video bg-border bg-cover bg-center border-b border-border"
178
+
style={{
179
+
backgroundImage: "url(/imagePlaceholder.png)",
180
+
backgroundBlendMode: "hard-light",
181
+
}}
182
+
/>
171
183
172
184
<div className="flex flex-col gap-1 p-2 pt-0.5!">
173
185
<div className="w-full h-4 bg-tertiary rounded-[2px]" />
+7
-3
components/Menu.tsx
+7
-3
components/Menu.tsx
···
5
5
import { PopoverArrow } from "./Icons/PopoverArrow";
6
6
import { PopoverOpenContext } from "./Popover/PopoverContext";
7
7
import { useState } from "react";
8
+
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
8
9
9
10
export const Menu = (props: {
10
11
open?: boolean;
···
20
21
asChild?: boolean;
21
22
}) => {
22
23
let [open, setOpen] = useState(props.open || false);
24
+
let cardBorderHidden = useCardBorderHidden();
23
25
24
26
return (
25
27
<DropdownMenu.Root
···
44
46
className={`
45
47
dropdownMenu z-20 p-1
46
48
flex flex-col gap-0.5
47
-
bg-bg-page
48
49
border border-border rounded-md shadow-md
49
-
${props.className}`}
50
+
${props.className}
51
+
${cardBorderHidden ? "light-container" : "bg-bg-page"}`}
50
52
>
51
53
{props.children}
52
54
<DropdownMenu.Arrow
···
59
61
arrowFill={
60
62
props.background
61
63
? props.background
62
-
: theme.colors["bg-page"]
64
+
: cardBorderHidden
65
+
? "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 95%)"
66
+
: theme.colors["bg-page"]
63
67
}
64
68
arrowStroke={
65
69
props.border ? props.border : theme.colors["border"]
+3
-1
components/Popover/index.tsx
+3
-1
components/Popover/index.tsx
···
81
81
? props.arrowFill
82
82
: props.background
83
83
? props.background
84
-
: theme.colors["bg-page"]
84
+
: cardBorderHidden
85
+
? "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 95%)"
86
+
: theme.colors["bg-page"]
85
87
}
86
88
arrowStroke={
87
89
props.border ? props.border : theme.colors["border"]
+1
-1
components/ThemeManager/ThemeSetter.tsx
+1
-1
components/ThemeManager/ThemeSetter.tsx
public/imagePlaceholder.png
public/imagePlaceholder.png
This is a binary file and will not be displayed.