moll.dev
improve styles in clone instructions
the "http" and "ssh" chips were block elements and not inline elements, and would grow according to other items in the flexbox. this pull reworks the clone-card to make chips inline, and enables overflow for urls.
+23
-11
appview/pages/templates/repo/index.html
+23
-11
appview/pages/templates/repo/index.html
···
206
{{- end -}}
207
208
209
-
<section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto">
210
<strong>push</strong>
211
-
<div class="py-2">
212
-
<code>git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
213
</div>
214
<strong>clone</strong>
215
-
216
217
-
<div class="flex flex-col gap-2">
218
-
<div class="pt-2 flex flex-row gap-2">
219
-
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">HTTP</span>
220
-
<code>git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
221
</div>
222
-
<div class="pt-2 flex flex-row gap-2">
223
-
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">SSH</span><code>git clone git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
224
</div>
225
</div>
226
-
<p class="py-2 text-gray-500">Note that for self-hosted knots, clone URLs may be different based on your setup.</p>
227
</section>
228
{{ end }}
···
206
{{- end -}}
207
208
209
+
<section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto flex flex-col gap-4">
210
+
<div class="flex flex-col gap-2">
211
<strong>push</strong>
212
+
<div class="md:pl-4 overflow-x-auto whitespace-nowrap">
213
+
<code>git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
214
</div>
215
+
</div>
216
+
217
+
<div class="flex flex-col gap-2">
218
<strong>clone</strong>
219
+
<div class="md:pl-4 flex flex-col gap-2">
220
221
+
<div class="flex items-center gap-3">
222
+
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">HTTP</span>
223
+
<div class="overflow-x-auto whitespace-nowrap flex-1">
224
+
<code>git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
225
</div>
226
+
</div>
227
+
228
+
<div class="flex items-center gap-3">
229
+
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">SSH</span>
230
+
<div class="overflow-x-auto whitespace-nowrap flex-1">
231
+
<code>git clone git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
232
</div>
233
+
</div>
234
</div>
235
+
</div>
236
+
237
+
238
+
<p class="py-2 text-gray-500">Note that for self-hosted knots, clone URLs may be different based on your setup.</p>
239
</section>
240
{{ end }}