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

appview: improve commit log styling

- uses grid layout for more controlled column scaling
- fixes commit message layout to show "expand" pill inline

Signed-off-by: oppiliappan <me@oppi.li>

oppi.li c2db75d1 0e8ec37e

verified
Changed files
+72 -75
appview
pages
templates
repo
+72 -75
appview/pages/templates/repo/log.html
···
</h2>
<!-- desktop view (hidden on small screens) -->
-
<table class="w-full border-collapse hidden md:table">
-
<thead>
-
<tr>
-
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Author</th>
-
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
-
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
-
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold"></th>
-
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
-
</tr>
-
</thead>
-
<tbody>
-
{{ range $index, $commit := .Commits }}
-
{{ $messageParts := splitN $commit.Message "\n\n" 2 }}
-
<tr class="{{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
-
<td class=" py-3 align-top">
-
{{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
-
{{ if $didOrHandle }}
-
{{ template "user/fragments/picHandleLink" $didOrHandle }}
-
{{ else }}
-
<a href="mailto:{{ $commit.Author.Email }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $commit.Author.Name }}</a>
-
{{ end }}
-
</td>
-
<td class="py-3 align-top font-mono flex items-center">
-
{{ $verified := $.VerifiedCommits.IsVerified $commit.Hash.String }}
-
{{ $hashStyle := "text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900" }}
-
{{ if $verified }}
-
{{ $hashStyle = "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 rounded" }}
-
{{ end }}
-
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="no-underline hover:underline {{ $hashStyle }} px-2 py-1/2 rounded flex items-center gap-2">
-
{{ slice $commit.Hash.String 0 8 }}
-
{{ if $verified }}
-
{{ i "shield-check" "w-4 h-4" }}
-
{{ end }}
-
</a>
-
<div class="{{ if not $verified }} ml-6 {{ end }}inline-flex">
-
<button class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
-
title="Copy SHA"
-
onclick="navigator.clipboard.writeText('{{ $commit.Hash.String }}'); this.innerHTML=`{{ i "copy-check" "w-4 h-4" }}`; setTimeout(() => this.innerHTML=`{{ i "copy" "w-4 h-4" }}`, 1500)">
-
{{ i "copy" "w-4 h-4" }}
-
</button>
-
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ $commit.Hash.String }}" class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" title="Browse repository at this commit">
-
{{ i "folder-code" "w-4 h-4" }}
-
</a>
-
</div>
+
<div class="hidden md:flex md:flex-col divide-y divide-gray-200 dark:divide-gray-700">
+
{{ $grid := "grid grid-cols-14 gap-4" }}
+
<div class="{{ $grid }}">
+
<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-2">Author</div>
+
<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-3">Commit</div>
+
<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-6">Message</div>
+
<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-1"></div>
+
<div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-2">Date</div>
+
</div>
+
{{ range $index, $commit := .Commits }}
+
{{ $messageParts := splitN $commit.Message "\n\n" 2 }}
+
<div class="{{ $grid }} py-3">
+
<div class="align-top truncate col-span-2">
+
{{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
+
{{ if $didOrHandle }}
+
{{ template "user/fragments/picHandleLink" $didOrHandle }}
+
{{ else }}
+
<a href="mailto:{{ $commit.Author.Email }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $commit.Author.Name }}</a>
+
{{ end }}
+
</div>
+
<div class="align-top font-mono flex items-start col-span-3">
+
{{ $verified := $.VerifiedCommits.IsVerified $commit.Hash.String }}
+
{{ $hashStyle := "text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900" }}
+
{{ if $verified }}
+
{{ $hashStyle = "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 rounded" }}
+
{{ end }}
+
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="no-underline hover:underline {{ $hashStyle }} px-2 py-1/2 rounded flex items-center gap-2">
+
{{ slice $commit.Hash.String 0 8 }}
+
{{ if $verified }}
+
{{ i "shield-check" "w-4 h-4" }}
+
{{ end }}
+
</a>
+
<div class="{{ if not $verified }} ml-6 {{ end }}inline-flex">
+
<button class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+
title="Copy SHA"
+
onclick="navigator.clipboard.writeText('{{ $commit.Hash.String }}'); this.innerHTML=`{{ i "copy-check" "w-4 h-4" }}`; setTimeout(() => this.innerHTML=`{{ i "copy" "w-4 h-4" }}`, 1500)">
+
{{ i "copy" "w-4 h-4" }}
+
</button>
+
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ $commit.Hash.String }}" class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" title="Browse repository at this commit">
+
{{ i "folder-code" "w-4 h-4" }}
+
</a>
+
</div>
-
</td>
-
<td class=" py-3 align-top">
-
<div class="flex items-center justify-start gap-2">
-
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="dark:text-white no-underline hover:underline">{{ index $messageParts 0 }}</a>
-
{{ if gt (len $messageParts) 1 }}
-
<button class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 rounded" hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')">{{ i "ellipsis" "w-3 h-3" }}</button>
-
{{ end }}
+
</div>
+
<div class="align-top col-span-6">
+
<div>
+
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="dark:text-white no-underline hover:underline">{{ index $messageParts 0 }}</a>
+
{{ if gt (len $messageParts) 1 }}
+
<button class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 rounded" hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')">{{ i "ellipsis" "w-3 h-3" }}</button>
+
{{ end }}
-
{{ if index $.TagMap $commit.Hash.String }}
-
{{ range $tag := index $.TagMap $commit.Hash.String }}
-
<span class="ml-2 text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 inline-flex items-center">
-
{{ $tag }}
-
</span>
-
{{ end }}
-
{{ end }}
-
</div>
+
{{ if index $.TagMap $commit.Hash.String }}
+
{{ range $tag := index $.TagMap $commit.Hash.String }}
+
<span class="ml-2 text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 inline-flex items-center">
+
{{ $tag }}
+
</span>
+
{{ end }}
+
{{ end }}
+
</div>
-
{{ if gt (len $messageParts) 1 }}
-
<p class="hidden mt-1 text-sm text-gray-600 dark:text-gray-400">{{ nl2br (index $messageParts 1) }}</p>
-
{{ end }}
-
</td>
-
<td class="py-3 align-top">
-
<!-- ci status -->
-
{{ $pipeline := index $.Pipelines .Hash.String }}
-
{{ if and $pipeline (gt (len $pipeline.Statuses) 0) }}
-
{{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" $pipeline "RepoInfo" $.RepoInfo) }}
-
{{ end }}
-
</td>
-
<td class=" py-3 align-top text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" $commit.Committer.When }}</td>
-
</tr>
-
{{ end }}
-
</tbody>
-
</table>
+
{{ if gt (len $messageParts) 1 }}
+
<p class="hidden mt-1 text-sm text-gray-600 dark:text-gray-400">{{ nl2br (index $messageParts 1) }}</p>
+
{{ end }}
+
</div>
+
<div class="align-top col-span-1">
+
<!-- ci status -->
+
{{ $pipeline := index $.Pipelines .Hash.String }}
+
{{ if and $pipeline (gt (len $pipeline.Statuses) 0) }}
+
{{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" $pipeline "RepoInfo" $.RepoInfo) }}
+
{{ end }}
+
</div>
+
<div class="align-top text-gray-500 dark:text-gray-400 col-span-2">{{ template "repo/fragments/shortTimeAgo" $commit.Committer.When }}</div>
+
</div>
+
{{ end }}
+
</div>
<!-- mobile view (visible only on small screens) -->
<div class="md:hidden">