Commit 81272b0b80
81272b0b804d31bba1ee5e540b69cffc895ef3bf
parent: 2f96910297
Verified · cmc
cmc <hello@cleberg.net> · 2026-09-18 01:10 UTC
web: tip commit row inside the tree table, fixed column widths
Ref #218
internal/web/static/style.css
+14 −9
| @@ -780,6 +780,7 @@ table.tree, table.refs { |
| 780 | 780 | overflow: hidden; |
| 781 | 781 | margin-bottom: var(--sp-4); |
| 782 | 782 | } |
| 783 | table.tree { table-layout: fixed; } |
| 783 | 784 | table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: 0; } |
| 784 | 785 | table.tree tr:hover td, table.refs tr:hover td { background: var(--hover); } |
| 785 | 786 | td.name a { color: var(--fg); } |
| @@ -787,12 +788,16 @@ td.name a:hover { color: var(--link); } |
| 787 | 788 | table.tree td.name { width: 25%; white-space: nowrap; } |
| 788 | 789 | table.tree td.name.dir a { color: var(--link); } |
| 789 | 790 | table.tree th.lastcommit, table.tree td.lastcommit { width: 55%; } |
| 791 | table.tree td.lastcommit { |
| 792 | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
| 793 | } |
| 790 | 794 | table.tree td.lastcommit a { |
| 791 | 795 | color: var(--muted); |
| 792 | 796 | display: block; |
| 793 | 797 | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
| 794 | 798 | } |
| 795 | 799 | table.tree td.lastcommit a:hover { color: var(--link); } |
| 800 | table.tree th.age, table.tree td.age { width: 20%; } |
| 796 | 801 | td.age, th.age { text-align: right; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; } |
| 797 | 802 | td.size, td.mode { color: var(--muted); white-space: nowrap; } |
| 798 | 803 | table.tree th.size, table.tree td.size { text-align: right; } |
| @@ -809,15 +814,17 @@ table.assets td.name { width: 100%; font-family: var(--mono); font-size: var(--f |
| 809 | 814 | table.assets { margin-top: var(--sp-2); } |
| 810 | 815 | |
| 811 | 816 | /* the tip commit is the first row of the file table */ |
| 812 | | .tipbar { |
| 817 | tr.tipbar td { |
| 818 | background: var(--surface); |
| 819 | padding: var(--sp-3) var(--sp-4); |
| 820 | border-bottom: 1px solid var(--line); |
| 821 | } |
| 822 | .tipbar .tip { |
| 813 | 823 | display: flex; |
| 814 | 824 | align-items: center; |
| 815 | | gap: var(--sp-3); |
| 816 | | padding: var(--sp-2) var(--sp-4); |
| 817 | | background: var(--surface); |
| 818 | | border: 1px solid var(--line); |
| 819 | | border-bottom: 0; |
| 820 | | border-radius: var(--r-card) var(--r-card) 0 0; |
| 825 | gap: var(--sp-2); |
| 826 | flex-wrap: wrap; |
| 827 | min-width: 0; |
| 821 | 828 | font-size: var(--fs-2); |
| 822 | 829 | } |
| 823 | 830 | .tipbar .who { font-weight: 600; } |
| @@ -825,8 +832,6 @@ table.assets { margin-top: var(--sp-2); } |
| 825 | 832 | .tipbar .subject:hover { color: var(--link); } |
| 826 | 833 | .tipbar .spacer { flex: 1; } |
| 827 | 834 | .tipbar .age { color: var(--muted); white-space: nowrap; } |
| 828 | | .tipbar + table.tree, |
| 829 | | .tipbar + .tablewrap table.tree { border-radius: 0 0 var(--r-card) var(--r-card); } |
| 830 | 835 | |
| 831 | 836 | .readme { margin-top: var(--sp-5); } |
| 832 | 837 | .readme .cardbody { max-width: 78ch; } |
internal/web/templates/tree.html
+1 −1
| @@ -14,7 +14,7 @@ |
| 14 | 14 | </div> |
| 15 | 15 | <div class="tablewrap"> |
| 16 | 16 | <table class="tree"> |
| 17 | | {{with .Tip}}{{if .SHA}}<tr class="tipbar"><td colspan="3"><span class="who">{{template "authorname" dict "Name" .Author "User" .User "Email" .Email}}</span> <a class="subject" href="/{{$.Repo.OwnerName}}/{{$.Repo.Name}}/commit/{{.SHA}}">{{.Subject}}</a><span class="spacer"></span><a class="sha" href="/{{$.Repo.OwnerName}}/{{$.Repo.Name}}/commit/{{.SHA}}"><code>{{short .SHA}}</code></a> <span class="age"{{if not .When.IsZero}} title="{{whenT .When}}"{{end}}>{{ago .When}}</span></td></tr>{{end}}{{end}} |
| 17 | {{with .Tip}}{{if .SHA}}<tr class="tipbar"><td colspan="3"><div class="tip"><span class="who">{{template "authorname" dict "Name" .Author "User" .User "Email" .Email}}</span> <a class="subject" href="/{{$.Repo.OwnerName}}/{{$.Repo.Name}}/commit/{{.SHA}}">{{.Subject}}</a><span class="spacer"></span><a class="sha" href="/{{$.Repo.OwnerName}}/{{$.Repo.Name}}/commit/{{.SHA}}"><code>{{short .SHA}}</code></a> <span class="age"{{if not .When.IsZero}} title="{{whenT .When}}"{{end}}>{{ago .When}}</span></div></td></tr>{{end}}{{end}} |
| 18 | 18 | <tr class="cols"><th scope="col">name</th><th scope="col" class="lastcommit">last commit</th><th scope="col" class="age">updated</th></tr> |
| 19 | 19 | {{range .Entries}}{{$c := index $.LastCommits .Name}}<tr> |
| 20 | 20 | {{if eq .Type "tree"}}<td class="name dir"><a href="/{{$.Repo.OwnerName}}/{{$.Repo.Name}}/tree/{{$.Ref}}/{{$.Prefix}}{{.Name}}">{{.Name}}/</a></td> |