forked from tangled.org/core
Monorepo for Tangled

appview: pages/templates/repo: align tags to left on desktop

anirudh.fi 2f49ac9b f13bcce7

verified
Changed files
+54 -54
appview
pages
templates
repo
+54 -54
appview/pages/templates/repo/tags.html
··· 3 3 {{ end }} 4 4 5 5 {{ define "repoContent" }} 6 - <section> 7 - <h2 class="mb-4 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">tags</h2> 8 - <div class="flex flex-col py-2 gap-12 md:gap-0"> 9 - {{ range .Tags }} 10 - <div class="md:grid md:grid-cols-12 md:items-start flex flex-col"> 11 - <!-- Header column (top on mobile, left on md+) --> 12 - <div class="md:col-span-3 md:border-r border-b md:border-b-0 border-gray-200 dark:border-gray-700 w-full md:h-full"> 13 - <!-- Mobile layout: horizontal --> 14 - <div class="flex md:hidden flex-col py-2 px-2"> 15 - <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2 font-bold"> 16 - {{ i "tag" "w-4 h-4" }} 17 - {{ .Name }} 18 - </a> 6 + <section> 7 + <h2 class="mb-4 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">tags</h2> 8 + <div class="flex flex-col py-2 gap-12 md:gap-0"> 9 + {{ range .Tags }} 10 + <div class="md:grid md:grid-cols-12 md:items-start flex flex-col"> 11 + <!-- Header column (top on mobile, left on md+) --> 12 + <div class="md:col-span-2 md:border-r border-b md:border-b-0 border-gray-200 dark:border-gray-700 w-full md:h-full"> 13 + <!-- Mobile layout: horizontal --> 14 + <div class="flex md:hidden flex-col py-2 px-2"> 15 + <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2 font-bold"> 16 + {{ i "tag" "w-4 h-4" }} 17 + {{ .Name }} 18 + </a> 19 19 20 - <div class="flex items-center gap-3 text-gray-500 dark:text-gray-400 text-sm"> 21 - {{ if .Tag }} 22 - <a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Tag.Target.String }}" 23 - class="no-underline hover:underline text-gray-500 dark:text-gray-400"> 24 - {{ slice .Tag.Target.String 0 8 }} 25 - </a> 20 + <div class="flex items-center gap-3 text-gray-500 dark:text-gray-400 text-sm"> 21 + {{ if .Tag }} 22 + <a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Tag.Target.String }}" 23 + class="no-underline hover:underline text-gray-500 dark:text-gray-400"> 24 + {{ slice .Tag.Target.String 0 8 }} 25 + </a> 26 26 27 - <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span> 28 - <span>{{ .Tag.Tagger.Name }}</span> 27 + <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span> 28 + <span>{{ .Tag.Tagger.Name }}</span> 29 29 30 - <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span> 31 - <time>{{ shortTimeFmt .Tag.Tagger.When }}</time> 32 - {{ end }} 33 - </div> 30 + <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span> 31 + <time>{{ shortTimeFmt .Tag.Tagger.When }}</time> 32 + {{ end }} 34 33 </div> 34 + </div> 35 35 36 - <!-- Desktop layout: vertical and right-aligned --> 37 - <div class="hidden md:block text-right px-2 pb-6"> 38 - <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center justify-end gap-2 font-bold"> 39 - {{ i "tag" "w-4 h-4" }} 40 - {{ .Name }} 36 + <!-- Desktop layout: vertical and left-aligned --> 37 + <div class="hidden md:block text-left px-2 pb-6"> 38 + <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2 font-bold"> 39 + {{ i "tag" "w-4 h-4" }} 40 + {{ .Name }} 41 + </a> 42 + <div class="flex flex-grow flex-col text-gray-500 dark:text-gray-400 text-sm"> 43 + {{ if .Tag }} 44 + <a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Tag.Target.String }}" 45 + class="no-underline hover:underline text-gray-500 dark:text-gray-400 flex items-center gap-2"> 46 + {{ i "git-commit-horizontal" "w-4 h-4" }} 47 + {{ slice .Tag.Target.String 0 8 }} 41 48 </a> 42 - <div class="flex flex-grow flex-col text-gray-500 dark:text-gray-400 text-sm"> 43 - {{ if .Tag }} 44 - <a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Tag.Target.String }}" 45 - class="no-underline hover:underline text-gray-500 dark:text-gray-400 flex items-center justify-end gap-2"> 46 - {{ i "git-commit-horizontal" "w-4 h-4" }} 47 - {{ slice .Tag.Target.String 0 8 }} 48 - </a> 49 - <span>{{ .Tag.Tagger.Name }}</span> 50 - <time>{{ timeFmt .Tag.Tagger.When }}</time> 51 - {{ end }} 52 - </div> 49 + <span>{{ .Tag.Tagger.Name }}</span> 50 + <time>{{ timeFmt .Tag.Tagger.When }}</time> 51 + {{ end }} 53 52 </div> 54 53 </div> 54 + </div> 55 55 56 - <!-- Content column (bottom on mobile, right on md+) --> 57 - <div class="md:col-span-9 px-2 py-3 md:py-0 md:pb-6"> 58 - {{ if .Tag }} 59 - {{ $messageParts := splitN .Tag.Message "\n\n" 2 }} 60 - <p class="font-bold">{{ index $messageParts 0 }}</p> 61 - {{ if gt (len $messageParts) 1 }} 62 - <p class="cursor-text pb-2 text-sm">{{ nl2br (index $messageParts 1) }}</p> 63 - {{ end }} 64 - {{ else }} 65 - <p class="italic text-gray-500 dark:text-gray-400">no message</p> 56 + <!-- Content column (bottom on mobile, right on md+) --> 57 + <div class="md:col-span-9 px-2 py-3 md:py-0 md:pb-6"> 58 + {{ if .Tag }} 59 + {{ $messageParts := splitN .Tag.Message "\n\n" 2 }} 60 + <p class="font-bold">{{ index $messageParts 0 }}</p> 61 + {{ if gt (len $messageParts) 1 }} 62 + <p class="cursor-text pb-2 text-sm">{{ nl2br (index $messageParts 1) }}</p> 66 63 {{ end }} 67 - </div> 64 + {{ else }} 65 + <p class="italic text-gray-500 dark:text-gray-400">no message</p> 66 + {{ end }} 68 67 </div> 69 - {{ end }} 70 68 </div> 71 - </section> 69 + {{ end }} 70 + </div> 71 + </section> 72 72 {{ end }}