update browse interface

assets/src/css/main.css

@@ -42,6 +42,11 @@ h2 {
   text-align: right;
 }
 
+#content > header {
+  background-color: #EFEBEB;
+  padding: 1px 0;
+}
+
 
 /* NAVIGATION */
 
@@ -349,12 +354,8 @@ fieldset input {
   text-decoration: none;
 }
 
-.browse table {
-  width: 100%;
-}
-
 .browse .actions {
-  background-color: #455a64;
+  background-color: #90CAF9;
   color: #fff;
   padding: 1.5em 0;
 }
@@ -367,6 +368,21 @@ fieldset input {
   display: flex;
 }
 
+.browse .actions .container > a,
+.browse .actions .container > span {
+  line-height: 2em;
+  vertical-align: middle;
+}
+
+.browse .actions .container > a {
+  margin-right: 0.5em;
+}
+
+.browse .actions .container > span {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
 .browse .actions .fa {
   vertical-align: middle;
 }
@@ -376,11 +392,32 @@ fieldset input {
   position: relative;
 }
 
+.browse .go-right input[type="file"] {
+  display: none;
+}
+
+.browse table {
+  margin: 1em 0;
+  width: 100%;
+}
+
 .browse tr {
   line-height: 2em;
   border-bottom: 1px solid rgba(0, 0, 0, 0.03);
 }
 
+.browse th.buttons {
+  width: 4em;
+}
+
+.browse tr button {
+  line-height: 1.5em;
+  border-radius: 50%;
+  width: 1.5em;
+  height: 1.5em;
+  padding: 0;
+}
+
 .browse #new-file {
   display: none;
   position: absolute;

templates/browse.tmpl

@@ -1,24 +1,23 @@
 {{ define "content" }}{{ $path := .Path }}
 
-<div class="container">
+<main class="browse">
-  <h1 id="site-title">Path: {{ $path }}</h1>
+  <div class="actions">
-
+    <div class="container">
-  <main class="browse">
+      {{if .CanGoUp}}<a data-pjax href=".." class="up" title="Up one level"><i class="fa fa-arrow-left fa-lg"></i></a>{{end}}
-    <div class="actions">
+      <span id="site-title">Path: {{ $path }}</span>
-      <div class="container">
+      <div class="go-right">
-        {{if .CanGoUp}}<a data-pjax href=".." class="up" title="Up one level"><i class="fa fa-arrow-left fa-lg"></i></a>{{end}}
+        <input type="file" value="Upload" multiple>
-        <div class="go-right">
+        <button id="upload">Upload <i class="fa fa-cloud-upload"></i></button>
-          <input type="file" value="Upload" multiple>
+        <button class="default new">New <i class="fa fa-plus"></i></button>
-          <button id="upload">Upload <i class="fa fa-cloud-upload"></i></button>
+        <div id="new-file">
-          <button class="default new">New &#43;</button>
+          Write the name of the new file. If you want to use an archetype, add ':archetype' in the end, replacing 'archetype' by its name.
-          <div id="new-file">
+          <input id="new-file-name" type="text">
-            Write the name of the new file. If you want to use an archetype, add ':archetype' in the end, replacing 'archetype' by its name.
-            <input id="new-file-name" type="text">
-          </div>
         </div>
       </div>
     </div>
+  </div>
 
+  <div class="container">
     <table>
       <tr>
         <th class="left">
@@ -35,12 +34,11 @@
         </th>
         <th class="hideable right">
           {{if and (eq .Sort "time") (ne .Order "desc")}}
-          <a href="?sort=time&order=desc">Modified <i class="fa fa-arrow-up"></i></a> {{else if and (eq .Sort "time") (ne .Order "asc")}}
+          <a data-pjax href="?sort=time&order=desc">Modified <i class="fa fa-arrow-up"></i></a> {{else if and (eq .Sort "time") (ne .Order "asc")}}
-          <a href="?sort=time&order=asc">Modified <i class="fa fa-arrow-down"></i></a> {{else}}
+          <a data-pjax href="?sort=time&order=asc">Modified <i class="fa fa-arrow-down"></i></a> {{else}}
-          <a href="?sort=time&order=asc">Modified</a> {{end}}
+          <a data-pjax href="?sort=time&order=asc">Modified</a> {{end}}
         </th>
-        <th class="right"></th>
+        <th class="right buttons"></th>
-        <th class="right"></th>
       </tr>
       {{range .Items}}
       <tr>
@@ -52,11 +50,10 @@
         </td>
         <td class="right hideable">{{.HumanSize}}</td>
         <td class="right hideable">{{.HumanModTime "01/02/2006 3:04:05 PM"}}</td>
-        <td class="right"><button data-file="/admin/browse{{ $path }}{{.URL}}" data-message="File renamed." class="rename">&#9998;</button></td>
+        <td class="right"><button data-file="/admin/browse{{ $path }}{{.URL}}" data-message="File renamed." class="rename">&#9998;</button> <button data-file="/admin/browse{{ $path }}{{.URL}}" data-message="File deleted." class="delete">&#10006;</button></td>
-        <td class="right"><button data-file="/admin/browse{{ $path }}{{.URL}}" data-message="File deleted." class="delete">&#10006;</button></td>
       </tr>
       {{end}}
     </table>
-  </main>
+  </div>
-</div>
+</main>
 {{ end }}