leaflet.pub
a tool for shared writing and social publishing
styled stuff in mobile
cozylittle.house
+1
-1
app/home/LeafletList.tsx
+1
-1
app/home/LeafletList.tsx
···
54
54
.map((ll) => ll.token);
55
55
56
56
return (
57
-
<div className="homeLeafletGrid grow w-full h-full overflow-y-scroll no-scrollbar ">
57
+
<div className="homeLeafletGrid grow w-full h-full ">
58
58
<div className="grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-6 grow pt-3 pb-28 px-2 sm:pt-6 sm:pb-12 sm:pl-6 sm:pr-1">
59
59
{leaflets.map((leaflet, index) => (
60
60
<ReplicacheProvider
+24
-11
app/home/Publications.tsx
+24
-11
app/home/Publications.tsx
···
5
5
import { useIdentityData } from "components/IdentityProvider";
6
6
import { theme } from "tailwind.config";
7
7
import { BlueskyTiny } from "components/Icons/BlueskyTiny";
8
+
import { GoToArrow } from "components/Icons/GoToArrow";
8
9
9
10
export const MyPublicationList = () => {
10
11
let { identity } = useIdentityData();
11
12
// if (!identity || !identity.atp_did) return <PubListEmpty />;
12
13
return (
13
-
<div className="pubList w-[200px] flex flex-col gap-2 ">
14
+
<div className="pubList w-full sm:w-[200px] flex flex-col gap-1 sm:gap-2 ">
14
15
<PublicationList />
15
-
<Link
16
-
href={"./lish/createPub"}
17
-
className="text-sm place-self-start text-accent-contrast font-bold hover:text-accent-contrast"
18
-
>
19
-
New Publication
20
-
</Link>
16
+
<div className="flex justify-between">
17
+
<Link
18
+
href={"./lish/createPub"}
19
+
className="pubListCreateNew text-accent-contrast font-bold hover:text-accent-contrast"
20
+
>
21
+
new
22
+
</Link>
23
+
{identity && identity?.publications.length > 2}
24
+
<Link
25
+
href={"./lish/createPub"}
26
+
className="pubListSeeAll flex items-center gap-2 text-accent-contrast font-bold hover:text-accent-contrast"
27
+
>
28
+
all <GoToArrow />
29
+
</Link>
30
+
</div>
21
31
</div>
22
32
);
23
33
};
···
33
43
let { identity } = useIdentityData();
34
44
35
45
return (
36
-
<div className="pubList w-full flex flex-col gap-2">
37
-
<HardCodePublication name="Leaflet Explorers" />
46
+
<div className="pubList w-full flex flex-row sm:flex-col gap-3 sm:gap-2">
47
+
<div className="sm:block hidden">
48
+
<HardCodePublication name="Leaflet Explorers" />
49
+
</div>
38
50
<HardCodePublication name="Arboretum" />
39
51
<HardCodePublication name="This Very Long Title Might Have Ramifications on the UI" />
52
+
40
53
{/* {props.publications?.map((d) => (
41
54
<Publication
42
55
{...d}
···
51
64
function Publication(props: { uri: string; name: string; handle: string }) {
52
65
return (
53
66
<Link
54
-
className="pubListItem w-full p-3 opaque-container rounded-lg! text-secondary text-center hover:no-underline flex flex-col gap-1 place-items-center transparent-outline hover:outline-border"
67
+
className="pubListItem w-full p-3 opaque-container rounded-lg! text-secondary text-center hover:no-underline flex flex-col gap-1 place-items-center transparent-outline hover:outline-border "
55
68
href={`/lish/${props.handle}/${props.name}/`}
56
69
>
57
70
<div className="w-6 h-6 rounded-full bg-test" />
···
63
76
function HardCodePublication(props: { name: string }) {
64
77
return (
65
78
<Link
66
-
className="hardcodepubListItem w-full p-3 opaque-container rounded-lg! text-secondary text-center hover:no-underline flex flex-col gap-1 place-items-center transparent-outline outline-2 outline-offset-1 hover:outline-border"
79
+
className="hardcodepubListItem w-full p-3 opaque-container rounded-lg! text-secondary text-center hover:no-underline flex flex-col gap-1 place-items-center transparent-outline outline-2 outline-offset-1 hover:outline-border basis-0 grow min-w-0"
67
80
href={`/`}
68
81
>
69
82
<div className="w-6 h-6 rounded-full bg-test" />
+8
-1
app/home/page.tsx
+8
-1
app/home/page.tsx
···
15
15
import { getFactsFromHomeLeaflets } from "app/api/rpc/[command]/getFactsFromHomeLeaflets";
16
16
import { HomeSidebar } from "./HomeSidebar";
17
17
import { HomeFooter } from "./HomeFooter";
18
+
import { Media } from "components/Media";
18
19
import { MyPublicationList } from "./Publications";
19
20
import { supabaseServerClient } from "supabase/serverClient";
20
21
···
96
97
<div className="home relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6 ">
97
98
<HomeSidebar />
98
99
<div className={`h-full overflow-y-scroll`}>
99
-
<MyPublicationList />
100
+
<Media mobile>
101
+
<div className="pubListWrapper p-2 ">
102
+
<div className="pubList container p-3 ">
103
+
<MyPublicationList />
104
+
</div>
105
+
</div>
106
+
</Media>
100
107
<LeafletList initialFacts={home_docs_initialFacts} />
101
108
</div>
102
109
<HomeFooter />
+18
components/Icons/GoToArrow.tsx
+18
components/Icons/GoToArrow.tsx
···
1
+
import { Props } from "./Props";
2
+
3
+
export const GoToArrow = (props: Props) => {
4
+
return (
5
+
<svg
6
+
width="16"
7
+
height="16"
8
+
viewBox="0 0 16 16"
9
+
fill="none"
10
+
xmlns="http://www.w3.org/2000/svg"
11
+
>
12
+
<path
13
+
d="M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8.75781 2.69629C8.46492 2.4034 7.98918 2.4034 7.69629 2.69629C7.4034 2.98918 7.4034 3.46492 7.69629 3.75781L11.1895 7.25H3C2.58579 7.25 2.25 7.58579 2.25 8C2.25 8.41421 2.58579 8.75 3 8.75H11.1895L7.69629 12.2422C7.4034 12.5351 7.4034 13.0108 7.69629 13.3037C7.98918 13.5966 8.46492 13.5966 8.75781 13.3037L13.5303 8.53027C13.8232 8.23738 13.8232 7.76262 13.5303 7.46973L8.75781 2.69629Z"
14
+
fill="currentColor"
15
+
/>
16
+
</svg>
17
+
);
18
+
};