a tool for shared writing and social publishing
fixed alignment of bullet points on mobile, fixed issue where drop shadow was being cut off on mobile
+15
-11
+3
-1
app/[leaflet_id]/Leaflet.tsx
+3
-1
app/[leaflet_id]/Leaflet.tsx
···
37
37
<UpdateLeafletTitle entityID={props.leaflet_id} />
38
38
<AddLeafletToHomepage />
39
39
<SelectionManager />
40
+
{/* we need the padding bottom here because if we don't have it the mobile footer will cut off
41
+
the dropshadow on the page... the padding is compensated by a negative top margin in mobile footer */}
40
42
<div
41
-
className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full"
43
+
className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4"
42
44
id="page-carousel"
43
45
>
44
46
<Pages rootPage={props.leaflet_id} />
+4
-2
components/Blocks/Block.tsx
+4
-2
components/Blocks/Block.tsx
···
18
18
import { CheckboxChecked, CheckboxEmpty } from "components/Icons";
19
19
import { AreYouSure } from "./DeleteBlock";
20
20
import { useEntitySetContext } from "components/EntitySetProvider";
21
+
import { useIsMobile } from "src/hooks/isMobile";
21
22
22
23
export type Block = {
23
24
factID: string;
···
190
191
className?: string;
191
192
},
192
193
) => {
194
+
let isMobile = useIsMobile();
193
195
let checklist = useEntity(props.value, "block/check-list");
194
196
let headingLevel = useEntity(props.value, "block/heading-level")?.data.value;
195
197
let children = useEntity(props.value, "card/block");
···
217
219
style={{
218
220
width:
219
221
depth &&
220
-
`calc(${depth} * ${`var(--list-marker-width) ${checklist ? " + 20px" : ""} - 12px)`} `,
222
+
`calc(${depth} * ${`var(--list-marker-width) ${checklist ? " + 20px" : ""} - ${isMobile ? "6px" : "12px"})`} `,
221
223
}}
222
224
>
223
225
<button
···
232
234
${
233
235
folded
234
236
? "outline-secondary"
235
-
: ` ${children.length > 0 ? "group-hover/list-marker:outline-secondary outline-transparent" : "outline-transparent"}`
237
+
: ` ${children.length > 0 ? "sm:group-hover/list-marker:outline-secondary outline-transparent" : "outline-transparent"}`
236
238
}`}
237
239
/>
238
240
</button>
+4
-4
components/Watermark.tsx
+4
-4
components/Watermark.tsx
···
8
8
let showWatermark = useEntity(rootEntity, "theme/page-leaflet-watermark");
9
9
if (!showWatermark?.data.value) return null;
10
10
return (
11
-
<Link href="/" className="hover:no-underline">
11
+
<Link href="/" className="hover:no-underline w-fit italic">
12
12
<div className="sm:mb-2 sm:mr-4 group/watermark flex sm:flex-col gap-2 items-center justify-center ">
13
13
<div
14
-
className="hidden group-hover/watermark:block sm:rotate-180 sm:py-1 sm:px-0 px-1 w-max rounded-md h-fit whitespace-nowrap text-sm text-tertiary"
14
+
className="sm:hidden group-hover/watermark:block sm:rotate-180 sm:py-1 sm:px-0 px-1 w-max rounded-md h-fit whitespace-nowrap text-sm text-tertiary"
15
15
style={{
16
16
writingMode: !props.mobile ? "vertical-lr" : "horizontal-tb",
17
-
backgroundColor: "rgba(var(--bg-page), 0.6)",
17
+
backgroundColor: "rgba(var(--bg-page), 0.7)",
18
18
}}
19
19
>
20
20
made using <span className="text-accent-1">Leaflet</span>
21
21
</div>
22
22
<LogoSmall
23
23
strokeColor={theme.colors["bg-page"]}
24
-
className="text-tertiary group-hover/watermark:text-accent-1"
24
+
className="text-accent-1 sm:text-tertiary group-hover/watermark:text-accent-1"
25
25
/>
26
26
</div>
27
27
</Link>