forked from tangled.org/core
Monorepo for Tangled — https://tangled.org

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
···
{{ end }}
{{ define "repoContent" }}
-
<section>
-
<h2 class="mb-4 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">tags</h2>
-
<div class="flex flex-col py-2 gap-12 md:gap-0">
-
{{ range .Tags }}
-
<div class="md:grid md:grid-cols-12 md:items-start flex flex-col">
-
<!-- Header column (top on mobile, left on md+) -->
-
<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">
-
<!-- Mobile layout: horizontal -->
-
<div class="flex md:hidden flex-col py-2 px-2">
-
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2 font-bold">
-
{{ i "tag" "w-4 h-4" }}
-
{{ .Name }}
-
</a>
+
<section>
+
<h2 class="mb-4 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">tags</h2>
+
<div class="flex flex-col py-2 gap-12 md:gap-0">
+
{{ range .Tags }}
+
<div class="md:grid md:grid-cols-12 md:items-start flex flex-col">
+
<!-- Header column (top on mobile, left on md+) -->
+
<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">
+
<!-- Mobile layout: horizontal -->
+
<div class="flex md:hidden flex-col py-2 px-2">
+
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2 font-bold">
+
{{ i "tag" "w-4 h-4" }}
+
{{ .Name }}
+
</a>
-
<div class="flex items-center gap-3 text-gray-500 dark:text-gray-400 text-sm">
-
{{ if .Tag }}
-
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Tag.Target.String }}"
-
class="no-underline hover:underline text-gray-500 dark:text-gray-400">
-
{{ slice .Tag.Target.String 0 8 }}
-
</a>
+
<div class="flex items-center gap-3 text-gray-500 dark:text-gray-400 text-sm">
+
{{ if .Tag }}
+
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Tag.Target.String }}"
+
class="no-underline hover:underline text-gray-500 dark:text-gray-400">
+
{{ slice .Tag.Target.String 0 8 }}
+
</a>
-
<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
-
<span>{{ .Tag.Tagger.Name }}</span>
+
<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
+
<span>{{ .Tag.Tagger.Name }}</span>
-
<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
-
<time>{{ shortTimeFmt .Tag.Tagger.When }}</time>
-
{{ end }}
-
</div>
+
<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
+
<time>{{ shortTimeFmt .Tag.Tagger.When }}</time>
+
{{ end }}
</div>
+
</div>
-
<!-- Desktop layout: vertical and right-aligned -->
-
<div class="hidden md:block text-right px-2 pb-6">
-
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center justify-end gap-2 font-bold">
-
{{ i "tag" "w-4 h-4" }}
-
{{ .Name }}
+
<!-- Desktop layout: vertical and left-aligned -->
+
<div class="hidden md:block text-left px-2 pb-6">
+
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2 font-bold">
+
{{ i "tag" "w-4 h-4" }}
+
{{ .Name }}
+
</a>
+
<div class="flex flex-grow flex-col text-gray-500 dark:text-gray-400 text-sm">
+
{{ if .Tag }}
+
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Tag.Target.String }}"
+
class="no-underline hover:underline text-gray-500 dark:text-gray-400 flex items-center gap-2">
+
{{ i "git-commit-horizontal" "w-4 h-4" }}
+
{{ slice .Tag.Target.String 0 8 }}
</a>
-
<div class="flex flex-grow flex-col text-gray-500 dark:text-gray-400 text-sm">
-
{{ if .Tag }}
-
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Tag.Target.String }}"
-
class="no-underline hover:underline text-gray-500 dark:text-gray-400 flex items-center justify-end gap-2">
-
{{ i "git-commit-horizontal" "w-4 h-4" }}
-
{{ slice .Tag.Target.String 0 8 }}
-
</a>
-
<span>{{ .Tag.Tagger.Name }}</span>
-
<time>{{ timeFmt .Tag.Tagger.When }}</time>
-
{{ end }}
-
</div>
+
<span>{{ .Tag.Tagger.Name }}</span>
+
<time>{{ timeFmt .Tag.Tagger.When }}</time>
+
{{ end }}
</div>
</div>
+
</div>
-
<!-- Content column (bottom on mobile, right on md+) -->
-
<div class="md:col-span-9 px-2 py-3 md:py-0 md:pb-6">
-
{{ if .Tag }}
-
{{ $messageParts := splitN .Tag.Message "\n\n" 2 }}
-
<p class="font-bold">{{ index $messageParts 0 }}</p>
-
{{ if gt (len $messageParts) 1 }}
-
<p class="cursor-text pb-2 text-sm">{{ nl2br (index $messageParts 1) }}</p>
-
{{ end }}
-
{{ else }}
-
<p class="italic text-gray-500 dark:text-gray-400">no message</p>
+
<!-- Content column (bottom on mobile, right on md+) -->
+
<div class="md:col-span-9 px-2 py-3 md:py-0 md:pb-6">
+
{{ if .Tag }}
+
{{ $messageParts := splitN .Tag.Message "\n\n" 2 }}
+
<p class="font-bold">{{ index $messageParts 0 }}</p>
+
{{ if gt (len $messageParts) 1 }}
+
<p class="cursor-text pb-2 text-sm">{{ nl2br (index $messageParts 1) }}</p>
{{ end }}
-
</div>
+
{{ else }}
+
<p class="italic text-gray-500 dark:text-gray-400">no message</p>
+
{{ end }}
</div>
-
{{ end }}
</div>
-
</section>
+
{{ end }}
+
</div>
+
</section>
{{ end }}