From bb5b01c9111dfb362da557e8aa5e7c4bc39a8da5 Mon Sep 17 00:00:00 2001
From: Sebastian Pipping <sebastian@pipping.org>
Date: Thu, 19 Jul 2018 19:03:44 +0200
Subject: [PATCH] browse: Improve table layout in Firefox (fixes #2179) (#2221)

Current Caddy code used a combination of CSS styles that
some mainstream browsers (e.g. Firefox) do not support well:
"td:first-child { width: 100%; }" together with
"td:last-child { padding-right: 5%; }".

The old approach was three columns with:
- "Name": 100% width, 5% padding left
- "Size": minimal width
- "Modified": minimal width, 5% padding right

Now the new approach is five columns with:
- <Dummy>: 5% width
- "Name": 80% width
- "Size": minimal width
- "Modified": minimal width
- <Dummy>: 5% width
---
 caddyhttp/browse/setup.go | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/caddyhttp/browse/setup.go b/caddyhttp/browse/setup.go
index 8692c9f5..fd8a443e 100644
--- a/caddyhttp/browse/setup.go
+++ b/caddyhttp/browse/setup.go
@@ -146,12 +146,12 @@ header,
 
 th:first-child,
 td:first-child {
-	padding-left: 5%;
+	width: 5%;
 }
 
 th:last-child,
 td:last-child {
-	padding-right: 5%;
+	width: 5%;
 }
 
 header {
@@ -242,20 +242,20 @@ td {
 	font-size: 14px;
 }
 
-td:first-child {
-	width: 100%;
+td:nth-child(2) {
+	width: 80%;
 }
 
-td:nth-child(2) {
+td:nth-child(3) {
 	padding: 0 20px 0 20px;
 }
 
-th:last-child,
-td:last-child {
+th:nth-child(4),
+td:nth-child(4) {
 	text-align: right;
 }
 
-td:first-child svg {
+td:nth-child(2) svg {
 	position: absolute;
 }
 
@@ -302,12 +302,12 @@ footer {
 		display: none;
 	}
 
-	td:first-child {
+	td:nth-child(2) {
 		width: auto;
 	}
 
-	th:nth-child(2),
-	td:nth-child(2) {
+	th:nth-child(3),
+	td:nth-child(3) {
 		padding-right: 5%;
 		text-align: right;
 	}
@@ -391,6 +391,7 @@ footer {
 				<table aria-describedby="summary">
 					<thead>
 					<tr>
+						<th></th>
 						<th>
 							{{- if and (eq .Sort "namedirfirst") (ne .Order "desc")}}
 							<a href="?sort=namedirfirst&order=desc{{if ne 0 .ItemsLimitedTo}}&limit={{.ItemsLimitedTo}}{{end}}" class="icon"><svg width="1em" height=".5em" version="1.1" viewBox="0 0 12.922194 6.0358899"><use xlink:href="#up-arrow"></use></svg></a>
@@ -426,11 +427,13 @@ footer {
 							<a href="?sort=time&order=asc{{if ne 0 .ItemsLimitedTo}}&limit={{.ItemsLimitedTo}}{{end}}">Modified</a>
 							{{- end}}
 						</th>
+						<th class="hideable"></th>
 					</tr>
 					</thead>
 					<tbody>
 					{{- if .CanGoUp}}
 					<tr>
+						<td></td>
 						<td>
 							<a href="..">
 								<span class="goup">Go up</span>
@@ -438,10 +441,12 @@ footer {
 						</td>
 						<td>&mdash;</td>
 						<td class="hideable">&mdash;</td>
+						<td class="hideable"></td>
 					</tr>
 					{{- end}}
 					{{- range .Items}}
 					<tr class="file">
+						<td></td>
 						<td>
 							<a href="{{html .URL}}">
 								{{- if .IsDir}}
@@ -458,6 +463,7 @@ footer {
 						<td data-order="{{.Size}}">{{.HumanSize}}</td>
 						{{- end}}
 						<td class="hideable"><time datetime="{{.HumanModTime "2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time></td>
+						<td class="hideable"></td>
 					</tr>
 					{{- end}}
 					</tbody>