leaflet.pub
a tool for shared writing and social publishing
tweaks to get the tabs working if cardBorderHidden
cozylittle.house
+17
-21
+1
-1
app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
+1
-1
app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
+1
-1
app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
+1
-1
app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
···
83
83
? parseDescription(profileRecord.description)
84
84
: null}
85
85
</pre>
86
-
<div className=" w-full overflow-x-scroll mt-3 mb-6 ">
86
+
<div className=" w-full overflow-x-scroll py-3 mb-3 ">
87
87
<div
88
88
className={`grid grid-flow-col gap-2 mx-auto w-fit px-3 sm:px-4 ${props.popover ? "auto-cols-[164px]" : "auto-cols-[164px] sm:auto-cols-[240px]"}`}
89
89
>
+11
-15
app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx
+11
-15
app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx
···
3
3
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
4
4
5
5
export function ProfileLayout(props: { children: React.ReactNode }) {
6
-
let borderHidden = useCardBorderHidden();
6
+
let cardBorderHidden = useCardBorderHidden();
7
7
return (
8
-
<div className="h-full">
9
-
<div
10
-
id="profile-content"
11
-
className={`
8
+
<div
9
+
id="profile-content"
10
+
className={`
12
11
${
13
-
borderHidden
12
+
cardBorderHidden
14
13
? ""
15
-
: "h-full border border-border-light rounded-lg overflow-y-scroll"
14
+
: "overflow-y-scroll h-full border border-border-light rounded-lg bg-bg-page"
16
15
}
17
-
max-w-prose
18
-
mx-auto
19
-
w-full
20
-
flex flex-col
21
-
text-center
16
+
max-w-prose mx-auto w-full
17
+
flex flex-col
18
+
text-center
22
19
`}
23
-
>
24
-
{props.children}
25
-
</div>
20
+
>
21
+
{props.children}
26
22
</div>
27
23
);
28
24
}
+4
-4
app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
+4
-4
app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
···
13
13
const currentTab = (segment || "posts") as ProfileTabType;
14
14
const [scrollPosWithinTabContent, setScrollPosWithinTabContent] = useState(0);
15
15
const [headerHeight, setHeaderHeight] = useState(0);
16
-
17
16
useEffect(() => {
18
17
let headerHeight =
19
18
document.getElementById("profile-header")?.clientHeight || 0;
20
19
setHeaderHeight(headerHeight);
21
20
22
-
const profileContent = document.getElementById("profile-content");
21
+
const profileContent = cardBorderHidden
22
+
? document.getElementById("home-content")
23
+
: document.getElementById("profile-content");
23
24
const handleScroll = () => {
24
25
if (profileContent) {
25
26
setScrollPosWithinTabContent(
···
37
38
}, []);
38
39
39
40
const baseUrl = `/p/${props.didOrHandle}`;
40
-
const bgColor = "255 255 255";
41
-
// const bgColor = !cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
41
+
const bgColor = cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
42
42
43
43
return (
44
44
<div className="flex flex-col w-full sticky top-3 sm:top-4 z-20 sm:px-4 px-3">