a tool for shared writing and social publishing
publist empty state in mobile
+29
-34
+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 ">
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
+27
-30
app/home/Publications.tsx
+27
-30
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";
9
-
import { AddSmall } from "components/Icons/AddSmall";
10
8
import { AddTiny } from "components/Icons/AddTiny";
11
9
12
10
export const MyPublicationList = () => {
13
11
let { identity } = useIdentityData();
14
12
// if (!identity || !identity.atp_did) return <PubListEmpty />;
15
13
return (
16
-
<div className="pubList w-full sm:w-[200px] flex flex-col gap-1 sm:gap-2 ">
17
-
<div className="flex justify-between items-end font-bold text-tertiary text-sm">
14
+
<div className="pubList w-full sm:w-[200px] flex flex-col gap-1 sm:gap-2 container p-2 sm:p-0 sm:bg-transparent sm:border-0 ">
15
+
<div className="flex justify-between items-center font-bold text-tertiary text-sm">
18
16
Publications
19
17
<Link
20
18
href={"./lish/createPub"}
···
40
38
41
39
return (
42
40
<div className="pubList w-full flex flex-row sm:flex-col gap-3 sm:gap-2">
43
-
<div className="sm:block hidden">
44
-
<HardCodePublication name="Leaflet Explorers" />
45
-
</div>
46
-
<HardCodePublication name="Arboretum" />
47
-
<HardCodePublication name="This Very Long Title Might Have Ramifications on the UI" />
41
+
<HardcodePublication name="Leaflet Explorers" />
42
+
<HardcodePublication name="Leaflet Explorers" />
48
43
49
44
{/* {props.publications?.map((d) => (
50
45
<Publication
···
56
51
</div>
57
52
);
58
53
};
59
-
60
-
function Publication(props: { uri: string; name: string; handle: string }) {
54
+
function HardcodePublication(props: { name: string }) {
61
55
return (
62
56
<Link
63
-
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 "
64
-
href={`/lish/${props.handle}/${props.name}/`}
57
+
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 outline-2 outline-offset-1 hover:outline-border basis-0 grow min-w-0"
58
+
href={`/`}
65
59
>
66
60
<div className="w-6 h-6 rounded-full bg-test" />
67
-
<h4 className="font-bold ">{props.name}</h4>
61
+
<h4 className="font-bold w-full truncate">{props.name}</h4>
68
62
</Link>
69
63
);
70
64
}
71
-
72
-
function HardCodePublication(props: { name: string }) {
65
+
function Publication(props: { uri: string; name: string; handle: string }) {
73
66
return (
74
67
<Link
75
-
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"
76
-
href={`/`}
68
+
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 outline-2 outline-offset-1 hover:outline-border basis-0 grow min-w-0"
69
+
href={`/lish/${props.handle}/${props.name}/`}
77
70
>
78
71
<div className="w-6 h-6 rounded-full bg-test" />
79
72
<h4 className="font-bold w-full truncate">{props.name}</h4>
···
84
77
const PubListEmpty = () => {
85
78
let { identity } = useIdentityData();
86
79
return (
87
-
<div className="pubListEmpty accent-container text-sm text-center py-4 px-3 max-w-[200px] w-full flex flex-col place-items-center justify-center gap-1">
88
-
<PubListEmptyIllo />
89
-
<strong>Publish with Leaflet!</strong>
90
-
<div className="text-secondary">
91
-
{!identity
92
-
? "Link a Bluesky account to publish your writing to a blog or newletter"
93
-
: identity && !!identity.atp_did
94
-
? "Publish your writing to a blog or newletter on the ATmosphere"
95
-
: ""}
80
+
<div className="pubListEmpty accent-container text-sm sm:text-center py-4 px-3 w-full sm:max-w-[200px] flex flex-row sm:flex-col items-start sm:place-items-center justify-center gap-3 sm:gap-1">
81
+
<div className="shrink-0">
82
+
<PubListEmptyIllo />
96
83
</div>
97
-
<ButtonSecondary compact className="text-sm mt-3">
98
-
<BlueskyTiny /> Link Bluesky
99
-
</ButtonSecondary>
84
+
<div className="flex flex-col sm:place-items-center">
85
+
<strong>Publish with Leaflet!</strong>
86
+
<div className="text-tertiary">
87
+
{!identity
88
+
? "Link a Bluesky account to publish your writing to a blog or newletter"
89
+
: identity && !!identity.atp_did
90
+
? "Publish your writing to a blog or newletter on the ATmosphere"
91
+
: ""}
92
+
</div>
93
+
<ButtonSecondary compact className="text-sm mt-3">
94
+
<BlueskyTiny /> Link Bluesky
95
+
</ButtonSecondary>
96
+
</div>
100
97
</div>
101
98
);
102
99
};
+1
-3
app/home/page.tsx
+1
-3
app/home/page.tsx
···
99
99
<div className={`h-full overflow-y-scroll`}>
100
100
<Media mobile>
101
101
<div className="pubListWrapper p-2 ">
102
-
<div className="pubList container p-3 ">
103
-
<MyPublicationList />
104
-
</div>
102
+
<MyPublicationList />
105
103
</div>
106
104
</Media>
107
105
<LeafletList initialFacts={home_docs_initialFacts} />