Commit bb5b01c9 authored by Sebastian Pipping's avatar Sebastian Pipping Committed by Matt Holt

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
parent 3ca6bc4a
...@@ -146,12 +146,12 @@ header, ...@@ -146,12 +146,12 @@ header,
th:first-child, th:first-child,
td:first-child { td:first-child {
padding-left: 5%; width: 5%;
} }
th:last-child, th:last-child,
td:last-child { td:last-child {
padding-right: 5%; width: 5%;
} }
header { header {
...@@ -242,20 +242,20 @@ td { ...@@ -242,20 +242,20 @@ td {
font-size: 14px; font-size: 14px;
} }
td:first-child { td:nth-child(2) {
width: 100%; width: 80%;
} }
td:nth-child(2) { td:nth-child(3) {
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
} }
th:last-child, th:nth-child(4),
td:last-child { td:nth-child(4) {
text-align: right; text-align: right;
} }
td:first-child svg { td:nth-child(2) svg {
position: absolute; position: absolute;
} }
...@@ -302,12 +302,12 @@ footer { ...@@ -302,12 +302,12 @@ footer {
display: none; display: none;
} }
td:first-child { td:nth-child(2) {
width: auto; width: auto;
} }
th:nth-child(2), th:nth-child(3),
td:nth-child(2) { td:nth-child(3) {
padding-right: 5%; padding-right: 5%;
text-align: right; text-align: right;
} }
...@@ -391,6 +391,7 @@ footer { ...@@ -391,6 +391,7 @@ footer {
<table aria-describedby="summary"> <table aria-describedby="summary">
<thead> <thead>
<tr> <tr>
<th></th>
<th> <th>
{{- if and (eq .Sort "namedirfirst") (ne .Order "desc")}} {{- 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> <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 { ...@@ -426,11 +427,13 @@ footer {
<a href="?sort=time&order=asc{{if ne 0 .ItemsLimitedTo}}&limit={{.ItemsLimitedTo}}{{end}}">Modified</a> <a href="?sort=time&order=asc{{if ne 0 .ItemsLimitedTo}}&limit={{.ItemsLimitedTo}}{{end}}">Modified</a>
{{- end}} {{- end}}
</th> </th>
<th class="hideable"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{{- if .CanGoUp}} {{- if .CanGoUp}}
<tr> <tr>
<td></td>
<td> <td>
<a href=".."> <a href="..">
<span class="goup">Go up</span> <span class="goup">Go up</span>
...@@ -438,10 +441,12 @@ footer { ...@@ -438,10 +441,12 @@ footer {
</td> </td>
<td>&mdash;</td> <td>&mdash;</td>
<td class="hideable">&mdash;</td> <td class="hideable">&mdash;</td>
<td class="hideable"></td>
</tr> </tr>
{{- end}} {{- end}}
{{- range .Items}} {{- range .Items}}
<tr class="file"> <tr class="file">
<td></td>
<td> <td>
<a href="{{html .URL}}"> <a href="{{html .URL}}">
{{- if .IsDir}} {{- if .IsDir}}
...@@ -458,6 +463,7 @@ footer { ...@@ -458,6 +463,7 @@ footer {
<td data-order="{{.Size}}">{{.HumanSize}}</td> <td data-order="{{.Size}}">{{.HumanSize}}</td>
{{- end}} {{- 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"><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> </tr>
{{- end}} {{- end}}
</tbody> </tbody>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment