use table for tree view as it is more compatible with eg w3m and netsurf

This commit is contained in:
Iris Lightshard 2023-02-03 17:56:23 -07:00
parent fd41ddefb0
commit 839be3691d
Signed by: Iris Lightshard
GPG key ID: 3B7FBC22144E6398
2 changed files with 38 additions and 24 deletions

View file

@ -123,14 +123,20 @@ a:hover {
font-style: italic;
}
.tree {
display: grid;
grid-template-columns: 10ch auto 1fr;
grid-row-gap: 0.5em;
grid-column-gap: 1em;
min-width: 0;
.tree td {
padding: 0.5em 0.5ch;
box-sizing: content-box;
}
.mode, .size {
font-family: var(--mono-font);
width: 10ch;
white-space: nowrap;
}
.size {
text-align: right;
width: 15ch;
}
.log {
display: grid;
grid-template-columns: 20rem minmax(0, 1fr);
@ -145,12 +151,7 @@ a:hover {
white-space: pre-wrap;
}
.mode, .size {
font-family: var(--mono-font);
}
.size {
text-align: right;
}
.readme pre {
white-space: pre-wrap;
@ -314,6 +315,7 @@ a:hover {
width: 100%;
}
}
.diff-type {
color: var(--gray);
}
@ -351,3 +353,9 @@ a:hover {
font-size: 0.8rem;
}
}
@media (max-width: 420px) {
.tree .size {
display: none;
}
}

View file

@ -15,36 +15,42 @@
{{ $ref := .ref }}
{{ $parent := .parent }}
<div class="tree">
<table class="tree">
{{ if $parent }}
<div></div>
<div></div>
<div><a href="/{{ $repo }}/tree/{{ $ref }}/{{ .dotdot }}">..</a></div>
<tr>
<td></td>
<td></td>
<td><a href="/{{ $repo }}/tree/{{ $ref }}/{{ .dotdot }}">..</a></td>
</tr>
{{ end }}
{{ range .files }}
{{ if not .IsFile }}
<div class="mode">{{ .Mode }}</div>
<div class="size">{{ .Size }}</div>
<div>
<tr>
<td class="mode">{{ .Mode }}</td>
<td class="size">{{ .Size }}</td>
<td>
{{ if $parent }}
<a href="/{{ $repo }}/tree/{{ $ref }}/{{ $parent }}/{{ .Name }}">{{ .Name }}/</a>
{{ else }}
<a href="/{{ $repo }}/tree/{{ $ref }}/{{ .Name }}">{{ .Name }}/</a>
{{ end }}
</div>
</td>
</tr>
{{ end }}
{{ end }}
{{ range .files }}
{{ if .IsFile }}
<div class="mode">{{ .Mode }}</div>
<div class="size">{{ .Size }}</div>
<div>
<tr>
<td class="mode">{{ .Mode }}</td>
<td class="size">{{ .Size }}</td>
<td>
{{ if $parent }}
<a href="/{{ $repo }}/blob/{{ $ref }}/{{ $parent }}/{{ .Name }}">{{ .Name }}</a>
{{ else }}
<a href="/{{ $repo }}/blob/{{ $ref }}/{{ .Name }}">{{ .Name }}</a>
{{ end }}
</div>
</td>
</tr>
{{ end }}
{{ end }}
</div>