tangled.org / core
Monorepo for Tangled tangled.org
fork atom

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.

Tangled 5d57f0ab a7d0a5cd

options
unified split
Changed files
+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 }}