alice.pds.demo.boltless.dev / core
This repository has no description
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

appview: tags: optimize layout for mobile

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