a tool for shared writing and social publishing
made the card snapping is carousel work for mobile!
+10
-19
+10
-19
app/test/page.tsx
+10
-19
app/test/page.tsx
···
9
9
let [cardRef, { width: cardWidth }] = useMeasure();
10
10
let [cards, setCards] = useState([0]);
11
11
let [focusedCardIndex, setFocusedCardIndex] = useState(0);
12
-
let [focusedCard, { left: focusedCardPosition }] = useMeasure();
13
12
14
13
return (
15
14
<div className="pageWrapper h-screen flex flex-col gap-4 py-4">
···
20
19
id="card-carousel"
21
20
>
22
21
<div className="pageContent flex ">
23
-
<div
24
-
// className="bg-test"
25
-
style={{ width: `calc((100vw - ${cardWidth}px)/2)` }}
26
-
/>
22
+
<div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} />
27
23
28
24
{cards.map((card, index) => (
29
25
<div
30
26
className="flex items-stretch"
31
-
ref={
32
-
index === 0
33
-
? cardRef
34
-
: index === focusedCardIndex
35
-
? focusedCard
36
-
: undefined
37
-
}
27
+
ref={index === 0 ? cardRef : null}
38
28
>
39
29
<Card
40
30
first={index === 0}
···
110
100
))}
111
101
112
102
<div
113
-
// className="bg-test"
114
-
style={{ width: `calc((100vw / 2) - ${cardWidth}px + 12px )` }}
103
+
style={{
104
+
width: `max(calc((100vw / 2) - ${cardWidth}px + 12px ), 32px)`,
105
+
}}
115
106
/>
116
107
</div>
117
108
</div>
···
128
119
return (
129
120
<>
130
121
{/* if the card is the first one in the list, remove this div... can we do with :before? */}
131
-
{!props.first && <div className="w-6 snap-center " />}
122
+
{!props.first && <div className="w-6 sm:snap-center" />}
132
123
<div
133
124
id={props.id}
134
125
className={`
135
-
scroll-m-4
136
-
p-3 w-[calc(50vw-24px)] max-w-[200px]
137
-
bg-bg-card border border-grey-80 rounded-lg
126
+
p-3 w-[calc(100vw-12px)] sm:w-[calc(50vw-24px)] max-w-prose
127
+
bg-bg-card border rounded-lg
138
128
grow flex flex-col gap-2
129
+
snap-center sm:snap-align-none
139
130
${props.first && "snap-center"}
140
-
${props.focused && "border-4"}`}
131
+
${props.focused ? "drop-shadow-lg border-grey-80" : "border-grey-90 "}`}
141
132
>
142
133
{props.children}
143
134
</div>