an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
add insert stop before button
+30
-2
+17
-1
app/at/(trail)/[handle]/trail/[rkey]/TrailStop.css
+17
-1
app/at/(trail)/[handle]/trail/[rkey]/TrailStop.css
···
150
150
151
151
.TrailStop-insertButton {
152
152
position: absolute;
153
-
top: calc(100% + 2rem);
154
153
left: 50%;
155
154
transform: translate(-50%, -50%);
156
155
z-index: 5;
156
+
}
157
+
158
+
.TrailStop-insertButton--before {
159
+
top: -2rem;
160
+
opacity: 0.3;
161
+
transition: opacity 0.2s ease;
162
+
}
163
+
164
+
@media (hover: hover) {
165
+
.TrailStop-insertButton--before:hover {
166
+
opacity: 1;
167
+
}
168
+
}
169
+
170
+
.TrailStop-insertButton--between,
171
+
.TrailStop-insertButton--final {
172
+
top: calc(100% + 2rem);
157
173
}
158
174
159
175
/* Between-stops buttons are subtle by default, show fully on hover */
+13
-1
app/at/(trail)/[handle]/trail/[rkey]/TrailStop.tsx
+13
-1
app/at/(trail)/[handle]/trail/[rkey]/TrailStop.tsx
···
135
135
</div>
136
136
)}
137
137
138
-
{/* Insert stop button - appears after current step only, and only if less than 12 steps */}
138
+
{isEditing && editContext && isCurrent && index > 0 && totalStops < 12 && (
139
+
<div className="TrailStop-insertButton TrailStop-insertButton--before">
140
+
<AddButton
141
+
onClick={(e) => {
142
+
e.stopPropagation();
143
+
editContext.addStop(index - 1);
144
+
handleGoToStop(index);
145
+
}}
146
+
title="insert stop before"
147
+
/>
148
+
</div>
149
+
)}
150
+
139
151
{isEditing &&
140
152
editContext &&
141
153
(isCurrent ||