Skip to content

Commit 9bb5ba8

Browse files
abrehamgezahegnabrehamgezahegn
committed
fix some annoying css issues
1 parent 702ee20 commit 9bb5ba8

File tree

6 files changed

+158
-129
lines changed

6 files changed

+158
-129
lines changed

‎typescript/examples/vite_basic/src/App.tsx‎

Lines changed: 42 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,40 @@
11
import { JsonDocRenderer, PageDelimiter } from "@textcortex/jsondoc";
22
import "@textcortex/jsondoc/dist/index.css";
33
import { useState, useEffect } from "react";
4+
import DevPanel from "./components/DevPanel";
45

5-
interface FloatingButtonProps {
6-
onClick: () => void;
7-
children: React.ReactNode;
8-
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
9-
offset?: { x: number; y: number };
10-
backgroundColor?: string;
11-
color?: string;
12-
zIndex?: number;
13-
}
14-
15-
const FloatingButton: React.FC<FloatingButtonProps> = ({
16-
onClick,
17-
children,
18-
position = "top-right",
19-
offset = { x: 20, y: 20 },
20-
backgroundColor = "oklch(40% 0.2 250)",
21-
color = "white",
22-
zIndex = 1000,
23-
}) => {
24-
const getPositionStyles = () => {
25-
switch (position) {
26-
case "top-left":
27-
return { top: offset.y, left: offset.x };
28-
case "bottom-right":
29-
return { bottom: offset.y, right: offset.x };
30-
case "bottom-left":
31-
return { bottom: offset.y, left: offset.x };
32-
default:
33-
return { top: offset.y, right: offset.x };
34-
}
35-
};
36-
37-
return (
38-
<button
39-
onClick={onClick}
40-
style={{
41-
position: "fixed",
42-
...getPositionStyles(),
43-
zIndex,
44-
padding: "8px 16px",
45-
background: backgroundColor,
46-
color,
47-
border: "none",
48-
borderRadius: "4px",
49-
cursor: "pointer",
50-
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
51-
transition: "all 0.2s ease",
52-
}}
53-
onMouseEnter={(e) => {
54-
e.currentTarget.style.transform = "scale(1.05)";
55-
}}
56-
onMouseLeave={(e) => {
57-
e.currentTarget.style.transform = "scale(1)";
58-
}}
59-
>
60-
{children}
61-
</button>
62-
);
63-
};
6+
// Test backrefs for highlighting
7+
const testBackrefs: Array<{
8+
end_idx: number;
9+
block_id: string;
10+
start_idx: number;
11+
}> = [
12+
// {
13+
// end_idx: 50,
14+
// block_id: "blk_table_row_5",
15+
// start_idx: 0,
16+
// },
17+
// {
18+
// end_idx: 40,
19+
// block_id: "blk_toggle_1",
20+
// start_idx: 12,
21+
// },
22+
// {
23+
// end_idx: 80,
24+
// block_id: "bk_01jxwgvydze3bsy2p19cfteqge",
25+
// start_idx: 20,
26+
// },
27+
// {
28+
// block_id: "bk_01jxwgvyehecbb2bv3jtnm9bzx",
29+
// start_idx: 0,
30+
// end_idx: 70,
31+
// },
32+
// {
33+
// block_id: "bk_01jxj01879f8cvyq2hqc6p37z2",
34+
// start_idx: 0,
35+
// end_idx: 170,
36+
// },
37+
];
6438

6539
const App = () => {
6640
const [testPage, setTestPage] = useState(null);
@@ -70,7 +44,7 @@ const App = () => {
7044
useEffect(() => {
7145
const loadData = async () => {
7246
try {
73-
const response = await fetch("/spacing_test.json");
47+
const response = await fetch("/test_document.json");
7448
const data = await response.json();
7549
setTestPage(data);
7650
} catch (error) {
@@ -84,74 +58,29 @@ const App = () => {
8458
return <div>Loading...</div>;
8559
}
8660

87-
// Test backrefs for highlighting
88-
const testBackrefs: Array<{
89-
end_idx: number;
90-
block_id: string;
91-
start_idx: number;
92-
}> = [
93-
// {
94-
// end_idx: 50,
95-
// block_id: "blk_table_row_5",
96-
// start_idx: 0,
97-
// },
98-
// {
99-
// end_idx: 40,
100-
// block_id: "blk_toggle_1",
101-
// start_idx: 12,
102-
// },
103-
// {
104-
// end_idx: 80,
105-
// block_id: "bk_01jxwgvydze3bsy2p19cfteqge",
106-
// start_idx: 20,
107-
// },
108-
// {
109-
// block_id: "bk_01jxwgvyehecbb2bv3jtnm9bzx",
110-
// start_idx: 0,
111-
// end_idx: 70,
112-
// },
113-
// {
114-
// block_id: "bk_01jxj01879f8cvyq2hqc6p37z2",
115-
// start_idx: 0,
116-
// end_idx: 170,
117-
// },
118-
];
119-
12061
return (
12162
<div
12263
style={{
12364
background: theme === "dark" ? "oklch(20.5% 0 0)" : "oklch(95% 0 0)",
12465
}}
12566
>
126-
{/* Floating Dev Mode Button */}
127-
<FloatingButton
128-
onClick={() => setDevMode(!devMode)}
129-
backgroundColor={devMode ? "oklch(60% 0.2 250)" : "oklch(40% 0.2 250)"}
130-
offset={{ x: 20, y: 20 }}
131-
>
132-
{devMode ? "Disable" : "Enable"} Dev Mode
133-
</FloatingButton>
134-
135-
{/* Floating Theme Toggle Button */}
136-
<FloatingButton
137-
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
138-
backgroundColor={
139-
theme === "dark" ? "oklch(60% 0.2 50)" : "oklch(40% 0.2 50)"
140-
}
141-
offset={{ x: 200, y: 20 }}
142-
>
143-
{theme === "dark" ? "☀️ Light" : "🌙 Dark"} Mode
144-
</FloatingButton>
67+
<DevPanel
68+
devMode={devMode}
69+
setDevMode={setDevMode}
70+
theme={theme}
71+
setTheme={setTheme}
72+
/>
14573

14674
<div
14775
style={{
14876
padding: "20px",
149-
maxWidth: "700px",
77+
maxWidth: "500px",
15078
margin: "0 auto",
15179
color: theme === "dark" ? "oklch(90% 0 0)" : "oklch(10% 0 0)",
15280
display: "flex",
15381
justifyContent: "center",
15482
paddingTop: 160,
83+
background: "rgba(0,0,0,0.3)",
15584
}}
15685
>
15786
<JsonDocRenderer

‎typescript/examples/vite_basic/src/components/DevPanel.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react";
2+
import FloatingButton from "./FloatingButton";
3+
4+
interface DevPanelProps {
5+
devMode: boolean;
6+
setDevMode: (mode: boolean) => void;
7+
theme: "light" | "dark";
8+
setTheme: (theme: "light" | "dark") => void;
9+
}
10+
11+
const DevPanel: React.FC<DevPanelProps> = ({
12+
devMode,
13+
setDevMode,
14+
theme,
15+
setTheme,
16+
}) => {
17+
return (
18+
<>
19+
{/* Floating Dev Mode Button */}
20+
<FloatingButton
21+
onClick={() => setDevMode(!devMode)}
22+
backgroundColor={devMode ? "oklch(60% 0.2 250)" : "oklch(40% 0.2 250)"}
23+
offset={{ x: 20, y: 20 }}
24+
>
25+
{devMode ? "Disable" : "Enable"} Dev Mode
26+
</FloatingButton>
27+
28+
{/* Floating Theme Toggle Button */}
29+
<FloatingButton
30+
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
31+
backgroundColor={
32+
theme === "dark" ? "oklch(60% 0.2 50)" : "oklch(40% 0.2 50)"
33+
}
34+
offset={{ x: 200, y: 20 }}
35+
>
36+
{theme === "dark" ? "☀️ Light" : "🌙 Dark"} Mode
37+
</FloatingButton>
38+
</>
39+
);
40+
};
41+
42+
export default DevPanel;

‎typescript/examples/vite_basic/src/components/FloatingButton.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from "react";
2+
3+
interface FloatingButtonProps {
4+
onClick: () => void;
5+
children: React.ReactNode;
6+
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
7+
offset?: { x: number; y: number };
8+
backgroundColor?: string;
9+
color?: string;
10+
zIndex?: number;
11+
}
12+
13+
const FloatingButton: React.FC<FloatingButtonProps> = ({
14+
onClick,
15+
children,
16+
position = "top-right",
17+
offset = { x: 20, y: 20 },
18+
backgroundColor = "oklch(40% 0.2 250)",
19+
color = "white",
20+
zIndex = 1000,
21+
}) => {
22+
const getPositionStyles = () => {
23+
switch (position) {
24+
case "top-left":
25+
return { top: offset.y, left: offset.x };
26+
case "bottom-right":
27+
return { bottom: offset.y, right: offset.x };
28+
case "bottom-left":
29+
return { bottom: offset.y, left: offset.x };
30+
default:
31+
return { top: offset.y, right: offset.x };
32+
}
33+
};
34+
35+
return (
36+
<button
37+
onClick={onClick}
38+
style={{
39+
position: "fixed",
40+
...getPositionStyles(),
41+
zIndex,
42+
padding: "8px 16px",
43+
background: backgroundColor,
44+
color,
45+
border: "none",
46+
borderRadius: "4px",
47+
cursor: "pointer",
48+
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
49+
transition: "all 0.2s ease",
50+
}}
51+
onMouseEnter={(e) => {
52+
e.currentTarget.style.transform = "scale(1.05)";
53+
}}
54+
onMouseLeave={(e) => {
55+
e.currentTarget.style.transform = "scale(1)";
56+
}}
57+
>
58+
{children}
59+
</button>
60+
);
61+
};
62+
63+
export default FloatingButton;

‎typescript/src/renderer/components/PageDelimiter.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,8 @@ export const PageDelimiter: React.FC<PageDelimiterProps> = ({
1111
}) => {
1212
return (
1313
<div className={`jsondoc-page-delimiter ${className || ""}`.trim()}>
14-
<div className="jsondoc-page-delimiter-line">
15-
<span className="jsondoc-page-number">Page {pageNumber}</span>
16-
</div>
14+
<div className="jsondoc-page-delimiter-line"></div>
15+
<span className="jsondoc-page-number">Page {pageNumber}</span>
1716
</div>
1817
);
1918
};

‎typescript/src/renderer/styles/base.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
/* Base Layout and Page Styles */
22

3+
.json-doc-renderer {
4+
max-width: inherit;
5+
}
36
.json-doc-page {
47
max-width: var(--jsondoc-page-max-width);
8+
max-width: inherit;
59
margin: 0 auto;
610
/* padding: var(--jsondoc-page-padding-desktop)
711
var(--jsondoc-page-padding-desktop) var(--jsondoc-page-bottom-padding); */
@@ -25,7 +29,7 @@
2529

2630
/* Base Block Styles */
2731
.notion-selectable {
28-
position: relative;
32+
/* position: relative; */
2933
margin: 0;
3034
padding: var(--jsondoc-spacing-sm) 0px;
3135
}

‎typescript/src/renderer/styles/layout.css‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,15 @@
33
/* Page Delimiter */
44
.jsondoc-page-delimiter {
55
margin: var(--jsondoc-spacing-xl) 0;
6-
margin-bottom: var(--jsondoc-spacing-3xl);
7-
position: relative;
6+
margin-bottom: var(--jsondoc-spacing-xl);
87
display: flex;
9-
align-items: center;
10-
justify-content: center;
8+
flex-direction: column;
119
}
1210

1311
.jsondoc-page-delimiter-line {
14-
position: absolute;
15-
top: 50%;
16-
left: 0;
17-
right: 0;
12+
width: 100%;
1813
height: 1px;
1914
background: var(--jsondoc-border-light);
20-
z-index: var(--jsondoc-z-base);
2115
}
2216

2317
.jsondoc-page-number {
@@ -27,9 +21,7 @@
2721
font-size: var(--jsondoc-font-size-caption);
2822
font-weight: var(--jsondoc-font-weight-normal);
2923
border-radius: var(--jsondoc-radius-sm);
30-
position: relative;
31-
z-index: var(--jsondoc-z-elevated);
32-
display: inline-block;
24+
width: fit-content;
3325
}
3426

3527
/* Dark theme support for page delimiter */

0 commit comments

Comments
 (0)