julien.rbrt.fr / tangled-core
forked from tangled.org/core
Monorepo for Tangled — https://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 206 {{- end -}} 207 207 208 208 209 - <section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto"> 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"> 210 211 <strong>push</strong> 211 - <div class="py-2"> 212 - <code>git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code> 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> 213 214 </div> 215 + </div> 216 + 217 + <div class="flex flex-col gap-2"> 214 218 <strong>clone</strong> 215 - 219 + <div class="md:pl-4 flex flex-col gap-2"> 216 220 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 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> 221 225 </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> 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> 224 232 </div> 233 + </div> 225 234 </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> 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> 227 239 </section> 228 240 {{ end }}