Improve /files table layout.

diff --git a/src/templates/files.html b/src/templates/files.html
index 183301af0f2b8ca2f5861a44d6e74b5b8534bef1..11fde0329ffd174b5a546aad742c70eef92bf4c8 100644 (file)
--- a/src/templates/files.html
+++ b/src/templates/files.html
@@ -4,6 +4,9 @@
 
 {% block css %}
 {{ macros.css_sortable_table() }}
+.nowrap {
+    text-wrap-mode: nowrap;
+}
 {% endblock %}
 
 
@@ -22,12 +25,12 @@ known files (shown: <span id="files_count">?</span>):
 </p>
 <table id="sortable_table">
 <tr>
+<th><button id="clickable:-last_updates" class="sorter">last update</button></th>
 <th><button id="clickable:size" class="sorter">size</button></th>
 <th><button id="clickable:duration" class="sorter">duration</button></th>
-<th>actions</th>
-<th>tags <button id="clickable:n_tags" class="sorter">count</button></th>
+<th>add as …</th>
+<th class="nowrap">tags <button id="clickable:n_tags" class="sorter">count</button></th>
 <th><button id="clickable:rel_path" class="sorter">path</button></th>
-<th><button id="clickable:-last_updates" class="sorter">last update</button></th>
 </tr>
 </table>
 {% endblock %}

diff --git a/src/templates/files.js b/src/templates/files.js
index 7629481551425e0fd4dbf53e0ab0dd74d2a3c064..15393c8aa7852e901eb9d6ff6c569415b1b00574 100644 (file)
--- a/src/templates/files.js
+++ b/src/templates/files.js
@@ -25,8 +25,6 @@ import {
     CMD_ADD_NEXT,
     CMD_ADD_PLAY,
     IDX_START,
-    LABEL_ADD_NEXT,
-    LABEL_ADD_PLAY,
     LEN_EMPTY,
     PARAM_TAG_NEEDED,
     PATH_FILES_JSON,
@@ -85,6 +83,10 @@ sortableTableSetup.populateListItemRow = (
     tr,
     file
 ) => {
+    addTdTo(
+        tr,
+        {"textContent": file.last_update}
+    );
     addTdTo(
         tr,
         {"textContent": file.size}
@@ -94,15 +96,16 @@ sortableTableSetup.populateListItemRow = (
         {"textContent": file.duration}
     );
     const tdInject = addTdTo(tr);
+    tdInject.classList.add("nowrap");
     addPlayerBtnTo(
         tdInject,
-        LABEL_ADD_NEXT,
+        "next",
         `${CMD_ADD_NEXT}_${file.digest}`,
         !file.present
     );
     addPlayerBtnTo(
         tdInject,
-        LABEL_ADD_PLAY,
+        "now",
         `${CMD_ADD_PLAY}_${file.digest}`,
         !file.present
     );
@@ -115,10 +118,6 @@ sortableTableSetup.populateListItemRow = (
         file.rel_path,
         `${PATH_PREFIX_FILE}${file.digest}`
     );
-    addTdTo(
-        tr,
-        {"textContent": file.last_update}
-    );
 };
 
 const updateFilesList = async ( // eslint-disable-line one-var