Widen the administration interface

web/templates/admin.html

@@ -13,69 +13,66 @@
   {{if not .Objects}}
     <p class="hint">Nothing stored right now.</p>
   {{else}}
-  <div class="tablewrap">
-    <table class="admin">
-      <thead>
-        <tr>
-          <th><a href="?sort=name">Name</a></th>
-          <th><a href="?sort=name">Filename</a></th>
-          <th class="num"><a href="?sort=size">Size</a></th>
-          <th><a href="?sort=owner">Owner</a></th>
-          <th><a href="?sort=created">Uploaded</a></th>
-          <th><a href="?sort=expires">Expires</a></th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-      {{range .Objects}}
-        <tr>
-          <td class="mono"><a href="{{$.Base}}i/{{.ID}}">{{.ID}}</a>{{if .Vanity}} <em title="custom name">★</em>{{end}}</td>
-          <td class="wrap">{{.Filename}}</td>
-          <td class="num">{{.Size}}</td>
-          <td>{{if .Owner}}{{.Owner}}{{else}}<em>anonymous</em>{{end}}</td>
-          <td class="mono small">{{.Created}}</td>
-          <td class="mono small">{{.Expires}}</td>
-          <td>
-            <form method="post" action="{{$.Base}}api/d/{{.ID}}/delete">
-              <input type="hidden" name="from" value="admin">
-              <button type="submit" class="danger small"
-                      data-confirm="Delete {{.Filename}}?">Delete</button>
-            </form>
-          </td>
-        </tr>
-      {{end}}
-      </tbody>
-    </table>
-  </div>
+  <table class="admin files">
+    <thead>
+      <tr>
+        <th><a href="?sort=name">File</a></th>
+        <th class="num"><a href="?sort=size">Size</a></th>
+        <th><a href="?sort=owner">Owner</a></th>
+        <th><a href="?sort=created">Uploaded</a></th>
+        <th><a href="?sort=expires">Expires</a></th>
+        <th><span class="visually-hidden">Actions</span></th>
+      </tr>
+    </thead>
+    <tbody>
+    {{range .Objects}}
+      <tr>
+        <td data-label="File" class="filecell">
+          <a href="{{$.Base}}i/{{.ID}}">{{.Filename}}</a>
+          <span class="id mono">{{.ID}}{{if .Vanity}} <em title="custom name">★</em>{{end}}</span>
+        </td>
+        <td data-label="Size" class="num nowrap">{{.Size}}</td>
+        <td data-label="Owner">{{if .Owner}}{{.Owner}}{{else}}<em>anonymous</em>{{end}}</td>
+        <td data-label="Uploaded" class="nowrap" title="{{.Created}}">{{.CreatedAgo}}</td>
+        <td data-label="Expires" class="nowrap" title="{{.Expires}}">{{.ExpiresIn}}</td>
+        <td class="actions-cell">
+          <form method="post" action="{{$.Base}}api/d/{{.ID}}/delete">
+            <input type="hidden" name="from" value="admin">
+            <button type="submit" class="danger small"
+                    data-confirm="Delete {{.Filename}}? This cannot be undone.">Delete</button>
+          </form>
+        </td>
+      </tr>
+    {{end}}
+    </tbody>
+  </table>
   {{end}}
 </section>
 
 <section class="card">
   <h2>Tokens</h2>
   <p class="hint">
-    Tokens are minted and revoked with <code>send token</code> on the server.
-    They are deliberately not manageable from here: nothing that hands out
-    credentials should be reachable over the network.
+    Tokens are minted, rotated and revoked with <code>./send token</code> on the
+    server. They are deliberately not manageable from here: nothing that hands
+    out credentials should be reachable over the network.
   </p>
   {{if .Tokens}}
-  <div class="tablewrap">
-    <table class="admin">
-      <thead>
-        <tr><th>Name</th><th>Max size</th><th>Max lifetime</th><th>Vanity</th><th>Admin</th></tr>
-      </thead>
-      <tbody>
-      {{range .Tokens}}
-        <tr>
-          <td>{{.Name}}</td>
-          <td>{{.MaxSize}}</td>
-          <td>{{.MaxExpiry}}</td>
-          <td>{{if .Vanity}}yes{{else}}no{{end}}</td>
-          <td>{{if .Admin}}yes{{else}}no{{end}}</td>
-        </tr>
-      {{end}}
-      </tbody>
-    </table>
-  </div>
+  <table class="admin">
+    <thead>
+      <tr><th>Name</th><th>Max size</th><th>Max lifetime</th><th>Vanity</th><th>Admin</th></tr>
+    </thead>
+    <tbody>
+    {{range .Tokens}}
+      <tr>
+        <td data-label="Name">{{.Name}}</td>
+        <td data-label="Max size" class="nowrap">{{.MaxSize}}</td>
+        <td data-label="Max lifetime" class="nowrap">{{.MaxExpiry}}</td>
+        <td data-label="Vanity">{{if .Vanity}}yes{{else}}no{{end}}</td>
+        <td data-label="Admin">{{if .Admin}}yes{{else}}no{{end}}</td>
+      </tr>
+    {{end}}
+    </tbody>
+  </table>
   {{end}}
 </section>
 {{end}}

web/templates/layout.html

@@ -6,7 +6,7 @@
 <title>{{.Title}} · Uncensored Send</title>
 <link rel="stylesheet" href="{{.Base}}static/style.css">
 </head>
-<body data-base="{{.Base}}">
+<body data-base="{{.Base}}"{{if .Wide}} class="wide"{{end}}>
 <header>
   <a class="brand" href="{{.Base}}">Uncensored&nbsp;Send</a>
   <nav>