leaflet.pub
a tool for shared writing and social publishing
ensure layout doesn't break with canvases
cozylittle.house
+24
-21
+1
-4
components/Canvas.tsx
+1
-4
components/Canvas.tsx
···
53
53
id={elementId.page(props.entityID).canvasScrollArea}
54
54
className={`
55
55
canvasWrapper
56
-
h-full w-fit mx-auto
57
-
max-w-[calc(100vw-12px)]
58
-
${!narrowWidth ? "sm:max-w-[calc(100vw-128px)] lg:max-w-[calc(var(--page-width-units)*2 + 24px))]" : " sm:max-w-(--page-width-units)"}
59
-
rounded-lg
56
+
h-full w-fit
60
57
overflow-y-scroll
61
58
`}
62
59
>
+20
-15
components/Pages/Page.tsx
+20
-15
components/Pages/Page.tsx
···
33
33
return focusedPageID === props.entityID;
34
34
});
35
35
let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
36
+
let canvasNarrow =
37
+
pageType === "canvas" &&
38
+
useEntity(props.entityID, "canvas/narrow-width")?.data.value;
36
39
let cardBorderHidden = useCardBorderHidden(props.entityID);
37
40
let drawerOpen = useDrawerOpen(props.entityID);
38
41
return (
···
51
54
isFocused={isFocused}
52
55
fullPageScroll={props.fullPageScroll}
53
56
pageType={pageType}
57
+
canvasNarrow={canvasNarrow}
54
58
pageOptions={
55
59
<PageOptions
56
60
entityID={props.entityID}
···
73
77
74
78
export const PageWrapper = (props: {
75
79
id: string;
76
-
77
80
children: React.ReactNode;
78
81
pageOptions?: React.ReactNode;
79
82
cardBorderHidden: boolean;
···
81
84
isFocused?: boolean;
82
85
onClickAction?: (e: React.MouseEvent) => void;
83
86
pageType?: "canvas" | "doc";
87
+
canvasNarrow?: boolean | undefined;
84
88
drawerOpen: boolean | undefined;
85
89
}) => {
86
90
return (
···
100
104
className={`
101
105
pageScrollWrapper
102
106
grow
103
-
w-[10000px] sm:mx-0
107
+
104
108
shrink-0 snap-center
105
109
overflow-y-scroll
106
110
${
107
111
!props.cardBorderHidden &&
108
112
`h-full border
109
113
bg-[rgba(var(--bg-page),var(--bg-page-alpha))]
110
-
${props.drawerOpen ? "rounded-l-lg " : ""}
114
+
${props.drawerOpen ? "rounded-l-lg " : "rounded-lg"}
111
115
${props.isFocused ? "shadow-md border-border" : "border-border-light"}`
112
116
}
113
117
${props.cardBorderHidden && "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3"}
114
-
}
115
-
${props.fullPageScroll ? "max-w-full" : "max-w-[var(--page-width-units)]"}
116
-
`}
118
+
${props.fullPageScroll && "max-w-full"}
119
+
${props.pageType === "doc" && !props.fullPageScroll && "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]"}
120
+
${
121
+
props.pageType === "canvas" &&
122
+
!props.fullPageScroll &&
123
+
(props.canvasNarrow
124
+
? "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]"
125
+
: "sm:max-w-[calc(100vw-128px)] lg:max-w-fit lg:w-[calc(var(--page-width-units)*2 + 24px))]")
126
+
}
127
+
128
+
`}
117
129
>
118
-
{/* this div controls the width of the content*/}
119
-
<div
120
-
className={`postPageContent mx-auto h-fit w-full
121
-
${props.pageType === "canvas" ? "!lg:max-w-[1152px]" : "sm:max-w-[var(--page-width-units)]"}
122
-
`}
123
-
>
124
-
{props.children}
125
-
</div>
130
+
{props.children}
126
131
</div>
127
132
{props.pageOptions}
128
133
</div>
129
134
);
130
135
};
131
-
136
+
// ${narrowWidth ? " sm:max-w-(--page-width-units)" : }
132
137
const PageContent = (props: { entityID: string }) => {
133
138
let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
134
139
if (pageType === "doc") return <DocContent entityID={props.entityID} />;
+3
-2
components/Pages/index.tsx
+3
-2
components/Pages/index.tsx
···
25
25
let queryRoot = params.get("page");
26
26
let firstPage = queryRoot || rootPage?.data.value || props.rootPage;
27
27
let cardBorderHidden = useCardBorderHidden(rootPage.id);
28
-
29
-
let fullPageScroll = !!cardBorderHidden && pages.length === 0;
28
+
let firstPageIsCanvas = useEntity(firstPage, "page/type");
29
+
let fullPageScroll =
30
+
!!cardBorderHidden && pages.length === 0 && !firstPageIsCanvas;
30
31
31
32
return (
32
33
<>