From 839be3691dbb93f16a50d819c61aa0916a8e40d8 Mon Sep 17 00:00:00 2001
From: Derek Stevens <nilix@nilfm.cc>
Date: Fri, 3 Feb 2023 17:56:23 -0700
Subject: [PATCH] use table for tree view as it is more compatible with eg w3m
 and netsurf

---
 static/style.css    | 32 ++++++++++++++++++++------------
 templates/tree.html | 30 ++++++++++++++++++------------
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/static/style.css b/static/style.css
index e411b33..9d7ea35 100644
--- a/static/style.css
+++ b/static/style.css
@@ -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;
+  }
+}
diff --git a/templates/tree.html b/templates/tree.html
index 496dceb..33a4dd3 100644
--- a/templates/tree.html
+++ b/templates/tree.html
@@ -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>