From 1a20223c383adf97a3ccda74d2b2e2083a196323 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 6 Mar 2019 17:40:09 +0100
Subject: [PATCH] Make table scrollables (and improve their resizing)

---
 front/src/components/ShortcutsModal.vue     |   2 +-
 front/src/components/audio/track/Row.vue    |   2 +-
 front/src/components/audio/track/Table.vue  |  46 ++--
 front/src/components/auth/Settings.vue      |   2 +-
 front/src/components/common/ActionTable.vue | 264 ++++++++++----------
 front/src/components/library/FileUpload.vue |  67 ++---
 front/src/components/playlists/Editor.vue   |  39 +--
 front/src/style/_main.scss                  |  16 ++
 8 files changed, 232 insertions(+), 206 deletions(-)

diff --git a/front/src/components/ShortcutsModal.vue b/front/src/components/ShortcutsModal.vue
index 9bae0a9ca..e1c2a422c 100644
--- a/front/src/components/ShortcutsModal.vue
+++ b/front/src/components/ShortcutsModal.vue
@@ -5,7 +5,7 @@
     </header>
     <section class="scrolling content">
       <table
-        class="ui compact collapsing basic fixed single line table"
+        class="ui compact collapsing basic table"
         v-for="section in sections"
         :key="section.title">
       <caption>{{ section.title }}</caption>
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index e3005c388..e48de8e51 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -40,7 +40,7 @@
     <td colspan="4" v-else>
       <translate :translate-context="'*/*/*'">N/A</translate>
     </td>
-    <td colspan="2">
+    <td colspan="2" class="align right">
       <track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
       <track-playlist-icon
         v-if="$store.state.auth.authenticated"
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 1134e88a8..910d8f98a 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -1,26 +1,28 @@
 <template>
-  <table class="ui compact very basic fixed single line unstackable table">
-    <thead>
-      <tr>
-        <th></th>
-        <th></th>
-        <th colspan="6"><translate :translate-context="'Content/Track/Table.Label'">Title</translate></th>
-        <th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Artist</translate></th>
-        <th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Album</translate></th>
-        <th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Duration</translate></th>
-        <th colspan="2"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <track-row
-        :playable="playable"
-        :display-position="displayPosition"
-        :track="track"
-        :artist="artist"
-        :key="index + '-' + track.id"
-        v-for="(track, index) in tracks"></track-row>
-    </tbody>
-  </table>
+  <div class="table-wrapper">
+    <table class="ui compact very basic unstackable table">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th colspan="6"><translate :translate-context="'Content/Track/Table.Label'">Title</translate></th>
+          <th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Artist</translate></th>
+          <th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Album</translate></th>
+          <th colspan="4"><translate :translate-context="'Content/Track/Table.Label'">Duration</translate></th>
+          <th colspan="2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <track-row
+          :playable="playable"
+          :display-position="displayPosition"
+          :track="track"
+          :artist="artist"
+          :key="index + '-' + track.id"
+          v-for="(track, index) in tracks"></track-row>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <script>
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 3098d43f7..f7c671091 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -128,7 +128,7 @@
         <h3 class="ui header">
           <translate>Hidden artists</translate>
         </h3>
-        <table class="ui compact very basic fixed single line unstackable table">
+        <table class="ui compact very basic unstackable table">
           <thead>
             <tr>
               <th><translate :translate-context="'Content/*/Table.Label'">Name</translate></th>
diff --git a/front/src/components/common/ActionTable.vue b/front/src/components/common/ActionTable.vue
index 10d49018b..f6143e0a3 100644
--- a/front/src/components/common/ActionTable.vue
+++ b/front/src/components/common/ActionTable.vue
@@ -1,142 +1,144 @@
 <template>
-  <table class="ui compact very basic single line unstackable table">
-    <thead>
-      <tr>
-        <th colspan="1000">
-          <div v-if="refreshable" class="right floated">
-            <span v-if="needsRefresh">
-              <translate :translate-context="'Content/*/Button.Help text.Paragraph'">Content have been updated, click refresh to see up-to-date content</translate>
-            </span>
-            <button
-              @click="$emit('refresh')"
-              class="ui basic icon button"
-              :title="labels.refresh"
-              :aria-label="labels.refresh">
-              <i class="refresh icon"></i>
-            </button>
-          </div>
+  <div class="table-wrapper">
+    <table class="ui compact very basic unstackable table">
+      <thead>
+        <tr>
+          <th colspan="1000">
+            <div v-if="refreshable" class="right floated">
+              <span v-if="needsRefresh">
+                <translate :translate-context="'Content/*/Button.Help text.Paragraph'">Content have been updated, click refresh to see up-to-date content</translate>
+              </span>
+              <button
+                @click="$emit('refresh')"
+                class="ui basic icon button"
+                :title="labels.refresh"
+                :aria-label="labels.refresh">
+                <i class="refresh icon"></i>
+              </button>
+            </div>
 
-          <div class="ui small left floated form" v-if="actionUrl && actions.length > 0">
-            <div class="ui inline fields">
-              <div class="field">
-                <label><translate :translate-context="'Content/*/Dropdown.Label/Noun'">Actions</translate></label>
-                <select class="ui dropdown" v-model="currentActionName">
-                  <option v-for="action in actions" :value="action.name">
-                    {{ action.label }}
-                  </option>
-                </select>
+            <div class="ui small left floated form" v-if="actionUrl && actions.length > 0">
+              <div class="ui inline fields">
+                <div class="field">
+                  <label><translate :translate-context="'Content/*/Dropdown.Label/Noun'">Actions</translate></label>
+                  <select class="ui dropdown" v-model="currentActionName">
+                    <option v-for="action in actions" :value="action.name">
+                      {{ action.label }}
+                    </option>
+                  </select>
+                </div>
+                <div class="field">
+                  <dangerous-button
+                    v-if="selectAll || currentAction.isDangerous" :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']"
+                    confirm-color="green"
+                    color=""
+                    @confirm="launchAction">
+                    <translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate>
+                    <p slot="modal-header">
+                      <translate :translate-context="'Modal/*/Title'"
+                        key="1"
+                        :translate-n="affectedObjectsCount"
+                        :translate-params="{count: affectedObjectsCount, action: currentActionName}"
+                        translate-plural="Do you want to launch %{ action } on %{ count } elements?">
+                        Do you want to launch %{ action } on %{ count } element?
+                      </translate>
+                    </p>
+                    <p slot="modal-content">
+                      <translate :translate-context="'Modal/*/Paragraph'">This may affect a lot of elements or have irreversible consequences, please double check this is really what you want.</translate>
+                    </p>
+                    <div slot="modal-confirm"><translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Launch</translate></div>
+                  </dangerous-button>
+                  <div
+                    v-else
+                    @click="launchAction"
+                    :disabled="checked.length === 0"
+                    :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']">
+                    <translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate></div>
+                </div>
+                <div class="count field">
+                  <translate :translate-context="'Content/*/Paragraph'"
+                    tag="span"
+                    v-if="selectAll"
+                    key="1"
+                    :translate-n="objectsData.count"
+                    :translate-params="{count: objectsData.count, total: objectsData.count}"
+                    translate-plural="All %{ count } elements selected">
+                    All %{ count } element selected
+                  </translate>
+                  <translate :translate-context="'Content/*/Paragraph'"
+                    tag="span"
+                    v-else
+                    key="2"
+                    :translate-n="checked.length"
+                    :translate-params="{count: checked.length, total: objectsData.count}"
+                    translate-plural="%{ count } on %{ total } selected">
+                    %{ count } on %{ total } selected
+                  </translate>
+                  <template v-if="currentAction.allowAll && checkable.length > 0 && checkable.length === checked.length">
+                    <a @click="selectAll = true" v-if="!selectAll">
+                      <translate :translate-context="'Content/*/Link/Verb'"
+                        key="3"
+                        :translate-n="objectsData.count"
+                        :translate-params="{total: objectsData.count}"
+                        translate-plural="Select all %{ total } elements">
+                        Select all %{ total } elements
+                      </translate>
+                    </a>
+                    <a @click="selectAll = false" v-else>
+                      <translate :translate-context="'Content/*/Link/Verb'" key="4">Select only current page</translate>
+                    </a>
+                  </template>
+                </div>
               </div>
-              <div class="field">
-                <dangerous-button
-                  v-if="selectAll || currentAction.isDangerous" :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']"
-                  confirm-color="green"
-                  color=""
-                  @confirm="launchAction">
-                  <translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate>
-                  <p slot="modal-header">
-                    <translate :translate-context="'Modal/*/Title'"
-                      key="1"
-                      :translate-n="affectedObjectsCount"
-                      :translate-params="{count: affectedObjectsCount, action: currentActionName}"
-                      translate-plural="Do you want to launch %{ action } on %{ count } elements?">
-                      Do you want to launch %{ action } on %{ count } element?
-                    </translate>
-                  </p>
-                  <p slot="modal-content">
-                    <translate :translate-context="'Modal/*/Paragraph'">This may affect a lot of elements or have irreversible consequences, please double check this is really what you want.</translate>
-                  </p>
-                  <div slot="modal-confirm"><translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Launch</translate></div>
-                </dangerous-button>
-                <div
-                  v-else
-                  @click="launchAction"
-                  :disabled="checked.length === 0"
-                  :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']">
-                  <translate :translate-context="'Content/*/Button.Label/Short, Verb'">Go</translate></div>
+              <div v-if="actionErrors.length > 0" class="ui negative message">
+                <div class="header"><translate :translate-context="'Content/*/Error message/Header'">Error while applying action</translate></div>
+                <ul class="list">
+                  <li v-for="error in actionErrors">{{ error }}</li>
+                </ul>
               </div>
-              <div class="count field">
-                <translate :translate-context="'Content/*/Paragraph'"
-                  tag="span"
-                  v-if="selectAll"
-                  key="1"
-                  :translate-n="objectsData.count"
-                  :translate-params="{count: objectsData.count, total: objectsData.count}"
-                  translate-plural="All %{ count } elements selected">
-                  All %{ count } element selected
-                </translate>
-                <translate :translate-context="'Content/*/Paragraph'"
-                  tag="span"
-                  v-else
-                  key="2"
-                  :translate-n="checked.length"
-                  :translate-params="{count: checked.length, total: objectsData.count}"
-                  translate-plural="%{ count } on %{ total } selected">
-                  %{ count } on %{ total } selected
-                </translate>
-                <template v-if="currentAction.allowAll && checkable.length > 0 && checkable.length === checked.length">
-                  <a @click="selectAll = true" v-if="!selectAll">
-                    <translate :translate-context="'Content/*/Link/Verb'"
-                      key="3"
-                      :translate-n="objectsData.count"
-                      :translate-params="{total: objectsData.count}"
-                      translate-plural="Select all %{ total } elements">
-                      Select all %{ total } elements
-                    </translate>
-                  </a>
-                  <a @click="selectAll = false" v-else>
-                    <translate :translate-context="'Content/*/Link/Verb'" key="4">Select only current page</translate>
-                  </a>
-                </template>
-              </div>
-            </div>
-            <div v-if="actionErrors.length > 0" class="ui negative message">
-              <div class="header"><translate :translate-context="'Content/*/Error message/Header'">Error while applying action</translate></div>
-              <ul class="list">
-                <li v-for="error in actionErrors">{{ error }}</li>
-              </ul>
-            </div>
-            <div v-if="actionResult" class="ui positive message">
-              <p>
-                <translate :translate-context="'Content/*/Paragraph'"
-                  :translate-n="actionResult.updated"
-                  :translate-params="{count: actionResult.updated, action: actionResult.action}"
-                  translate-plural="Action %{ action } was launched successfully on %{ count } elements">
-                  Action %{ action } was launched successfully on %{ count } element
-                </translate>
-              </p>
+              <div v-if="actionResult" class="ui positive message">
+                <p>
+                  <translate :translate-context="'Content/*/Paragraph'"
+                    :translate-n="actionResult.updated"
+                    :translate-params="{count: actionResult.updated, action: actionResult.action}"
+                    translate-plural="Action %{ action } was launched successfully on %{ count } elements">
+                    Action %{ action } was launched successfully on %{ count } element
+                  </translate>
+                </p>
 
-              <slot name="action-success-footer" :result="actionResult">
-              </slot>
+                <slot name="action-success-footer" :result="actionResult">
+                </slot>
+              </div>
             </div>
-          </div>
-        </th>
-      </tr>
-      <tr>
-        <th v-if="actions.length > 0">
-          <div class="ui checkbox">
+          </th>
+        </tr>
+        <tr>
+          <th v-if="actions.length > 0">
+            <div class="ui checkbox">
+              <input
+                type="checkbox"
+                @change="toggleCheckAll"
+                :disabled="checkable.length === 0"
+                :checked="checkable.length > 0 && checked.length === checkable.length"><label>&nbsp;</label>
+            </div>
+          </th>
+          <slot name="header-cells"></slot>
+        </tr>
+      </thead>
+      <tbody v-if="objectsData.count > 0">
+        <tr v-for="(obj, index) in objects">
+          <td v-if="actions.length > 0" class="collapsing">
             <input
               type="checkbox"
-              @change="toggleCheckAll"
-              :disabled="checkable.length === 0"
-              :checked="checkable.length > 0 && checked.length === checkable.length"><label>&nbsp;</label>
-          </div>
-        </th>
-        <slot name="header-cells"></slot>
-      </tr>
-    </thead>
-    <tbody v-if="objectsData.count > 0">
-      <tr v-for="(obj, index) in objects">
-        <td v-if="actions.length > 0" class="collapsing">
-          <input
-            type="checkbox"
-            :disabled="checkable.indexOf(getId(obj)) === -1"
-            @click="toggleCheck($event, getId(obj), index)"
-            :checked="checked.indexOf(getId(obj)) > -1"><label>&nbsp;</label>
-        </td>
-        <slot name="row-cells" :obj="obj"></slot>
-      </tr>
-    </tbody>
-  </table>
+              :disabled="checkable.indexOf(getId(obj)) === -1"
+              @click="toggleCheck($event, getId(obj), index)"
+              :checked="checked.indexOf(getId(obj)) > -1"><label>&nbsp;</label>
+          </td>
+          <slot name="row-cells" :obj="obj"></slot>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 <script>
 import axios from 'axios'
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index ec5e0dd23..09297caec 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -79,39 +79,42 @@
           <i><translate :translate-context="'Content/Library/Paragraph'" :translate-params="{extensions: supportedExtensions.join(', ')}">Supported extensions: %{ extensions }</translate></i>
         </file-upload-widget>
       </div>
-      <table v-if="files.length > 0" class="ui single line table">
-        <thead>
-          <tr>
-            <th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th>
-            <th><translate :translate-context="'Content/Library/Table.Label'">Size</translate></th>
-            <th><translate :translate-context="'Content/Library/Table.Label'">Status</translate></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(file, index) in sortedFiles" :key="file.id">
-            <td :title="file.name">{{ file.name | truncate(60) }}</td>
-            <td>{{ file.size | humanSize }}</td>
-            <td>
-              <span v-if="file.error" class="ui tooltip" :data-tooltip="labels.tooltips[file.error]">
-                <span class="ui red icon label">
-                  <i class="question circle outline icon" /> {{ file.error }}
+      <div v-if="files.length > 0" class="table-wrapper">
+        <div class="ui hidden divider"></div>
+        <table class="ui unstackable table">
+          <thead>
+            <tr>
+              <th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th>
+              <th><translate :translate-context="'Content/Library/Table.Label'">Size</translate></th>
+              <th><translate :translate-context="'Content/Library/Table.Label'">Status</translate></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(file, index) in sortedFiles" :key="file.id">
+              <td :title="file.name">{{ file.name | truncate(60) }}</td>
+              <td>{{ file.size | humanSize }}</td>
+              <td>
+                <span v-if="file.error" class="ui tooltip" :data-tooltip="labels.tooltips[file.error]">
+                  <span class="ui red icon label">
+                    <i class="question circle outline icon" /> {{ file.error }}
+                  </span>
                 </span>
-              </span>
-              <span v-else-if="file.success" class="ui green label">
-                <translate :translate-context="'Content/Library/Table'" key="1">Uploaded</translate>
-              </span>
-              <span v-else-if="file.active" class="ui yellow label">
-                <translate :translate-context="'Content/Library/Table'" key="2">Uploading…</translate>
-                ({{ parseInt(file.progress) }}%)
-              </span>
-              <template v-else>
-                <span class="ui label"><translate :translate-context="'Content/Library/Table'" key="3">Pending</translate></span>
-                <button class="ui tiny basic red icon button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
-              </template>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+                <span v-else-if="file.success" class="ui green label">
+                  <translate :translate-context="'Content/Library/Table'" key="1">Uploaded</translate>
+                </span>
+                <span v-else-if="file.active" class="ui yellow label">
+                  <translate :translate-context="'Content/Library/Table'" key="2">Uploading…</translate>
+                  ({{ parseInt(file.progress) }}%)
+                </span>
+                <template v-else>
+                  <span class="ui label"><translate :translate-context="'Content/Library/Table'" key="3">Pending</translate></span>
+                  <button class="ui tiny basic red icon button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
+                </template>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
     </div>
     <div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'processing'}]">
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index eb533fd01..d558ed38f 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -48,24 +48,27 @@
       <div class="ui hidden divider"></div>
       <template v-if="plts.length > 0">
         <p><translate :translate-context="'Content/Playlist/Paragraph/Call to action'">Drag and drop rows to reorder tracks in the playlist</translate></p>
-        <table class="ui compact very basic fixed single line unstackable table">
-          <draggable v-model="plts" element="tbody" @update="reorder">
-            <tr v-for="(plt, index) in plts" :key="plt.id">
-              <td class="left aligned">{{ plt.index + 1}}</td>
-              <td class="center aligned">
-                <img class="ui mini image" v-if="plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
-                <img class="ui mini image" v-else src="../../assets/audio/default-cover.png">
-              </td>
-              <td colspan="4">
-                <strong>{{ plt.track.title }}</strong><br />
-                  {{ plt.track.artist.name }}
-              </td>
-              <td class="right aligned">
-                <i @click.stop="removePlt(index)" class="circular red trash icon"></i>
-              </td>
-            </tr>
-          </draggable>
-        </table>
+        <div class="table-wrapper">
+          <table class="ui compact very basic unstackable table">
+            <draggable v-model="plts" element="tbody" @update="reorder">
+              <tr v-for="(plt, index) in plts" :key="plt.id">
+                <td class="left aligned">{{ plt.index + 1}}</td>
+                <td class="center aligned">
+                  <img class="ui mini image" v-if="plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
+                  <img class="ui mini image" v-else src="../../assets/audio/default-cover.png">
+                </td>
+                <td colspan="4">
+                  <strong>{{ plt.track.title }}</strong><br />
+                    {{ plt.track.artist.name }}
+                </td>
+                <td class="right aligned">
+                  <i @click.stop="removePlt(index)" class="circular red trash icon"></i>
+                </td>
+              </tr>
+            </draggable>
+          </table>
+
+        </div>
       </template>
     </div>
   </div>
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 55e23f320..7dda3b264 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -285,3 +285,19 @@ span.diff.added {
 span.diff.removed {
   background-color: rgba(255, 0, 0, 0.25);
 }
+
+.table-wrapper {
+  display: block;
+  overflow-x: auto;
+}
+
+td.align.right {
+  text-align: right;
+}
+
+.ui.pagination.menu {
+  margin-top: 1em;
+  + span {
+    margin-left: 1em;
+  }
+}