From 3b19883ddec6674e310ecf09a1b2bf1d3c8399d5 Mon Sep 17 00:00:00 2001
From: Alex Ling <hkalexling@gmail.com>
Date: Mon, 7 Jun 2021 07:35:44 +0000
Subject: [PATCH] Use auto overflow tables

cherry-picked from a612500b0fabf7259a5ee0c841b0157d191e5bdd
---
 src/views/download-manager.html.ecr | 110 ++++++++++++++--------------
 src/views/missing-items.html.ecr    |  56 +++++++-------
 2 files changed, 85 insertions(+), 81 deletions(-)

diff --git a/src/views/download-manager.html.ecr b/src/views/download-manager.html.ecr
index c264177..73a5445 100644
--- a/src/views/download-manager.html.ecr
+++ b/src/views/download-manager.html.ecr
@@ -5,61 +5,63 @@
     <button class="uk-button uk-button-default" @click="load()" :disabled="loading">Refresh Queue</button>
     <button class="uk-button uk-button-default" x-show="paused !== undefined" x-text="paused ? 'Resume Download' : 'Pause Download'" @click="toggle()" :disabled="toggling"></button>
   </div>
-  <table class="uk-table uk-table-striped uk-overflow-auto">
-    <thead>
-      <tr>
-        <th>Chapter</th>
-        <th>Manga</th>
-        <th>Progress</th>
-        <th>Time</th>
-        <th>Status</th>
-        <th>Plugin</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <template x-for="job in jobs" :key="job">
-        <tr :id="`chapter-${job.id}`">
-
-          <template x-if="job.plugin_id">
-            <td x-text="job.title"></td>
-          </template>
-          <template x-if="!job.plugin_id">
-            <td><a :href="`<%= mangadex_base_url %>/chapter/${job.id}`" x-text="job.title"></td>
-          </template>
-
-          <template x-if="job.plugin_id">
-            <td x-text="job.manga_title"></td>
-          </template>
-          <template x-if="!job.plugin_id">
-            <td><a :href="`<%= mangadex_base_url %>/manga/${job.manga_id}`" x-text="job.manga_title"></td>
-          </template>
-
-          <td x-text="`${job.success_count}/${job.pages}`"></td>
-          <td x-text="`${moment(job.time).fromNow()}`"></td>
-
-          <td>
-            <span :class="statusClass(job.status)" x-text="job.status"></span>
-            <template x-if="job.status_message.length > 0">
-              <div class="uk-inline">
-                <span uk-icon="info"></span>
-                <div uk-dropdown x-text="job.status_message" style="white-space: pre-line;"></div>
-              </div>
-            </template>
-          </td>
-
-          <td x-text="`${job.plugin_id || ''}`"></td>
-          <td>
-            <a @click="jobAction('delete', $event)" uk-icon="trash" uk-tooltip="Delete"></a>
-            <template x-if="job.status_message.length > 0">
-              <a @click="jobAction('retry', $event)" uk-icon="refresh" uk-tooltip="Retry"></a>
-            </template>
-          </td>
+  <div class="uk-overflow-auto">
+    <table class="uk-table uk-table-striped">
+      <thead>
+        <tr>
+          <th>Chapter</th>
+          <th>Manga</th>
+          <th>Progress</th>
+          <th>Time</th>
+          <th>Status</th>
+          <th>Plugin</th>
+          <th>Actions</th>
         </tr>
-      </template>
-    </tbody>
-  </table>
-</div>
+      </thead>
+      <tbody>
+        <template x-for="job in jobs" :key="job">
+          <tr :id="`chapter-${job.id}`">
+
+            <template x-if="job.plugin_id">
+              <td x-text="job.title"></td>
+            </template>
+            <template x-if="!job.plugin_id">
+              <td><a :href="`<%= mangadex_base_url %>/chapter/${job.id}`" x-text="job.title"></td>
+            </template>
+
+            <template x-if="job.plugin_id">
+              <td x-text="job.manga_title"></td>
+            </template>
+            <template x-if="!job.plugin_id">
+              <td><a :href="`<%= mangadex_base_url %>/manga/${job.manga_id}`" x-text="job.manga_title"></td>
+            </template>
+
+            <td x-text="`${job.success_count}/${job.pages}`"></td>
+            <td x-text="`${moment(job.time).fromNow()}`"></td>
+
+            <td>
+              <span :class="statusClass(job.status)" x-text="job.status"></span>
+              <template x-if="job.status_message.length > 0">
+                <div class="uk-inline">
+                  <span uk-icon="info"></span>
+                  <div uk-dropdown x-text="job.status_message" style="white-space: pre-line;"></div>
+                </div>
+              </template>
+            </td>
+
+            <td x-text="`${job.plugin_id || ''}`"></td>
+
+            <td>
+              <a @click="jobAction('delete', $event)" uk-icon="trash"></a>
+              <template x-if="job.status_message.length > 0">
+                <a @click="jobAction('retry', $event)" uk-icon="refresh"></a>
+              </template>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
 </div>
 
 <% content_for "script" do %>
diff --git a/src/views/missing-items.html.ecr b/src/views/missing-items.html.ecr
index 334e185..024960b 100644
--- a/src/views/missing-items.html.ecr
+++ b/src/views/missing-items.html.ecr
@@ -3,34 +3,36 @@
   <div x-show="!empty">
     <p>The following items were present in your library, but now we can't find them anymore. If you deleted them mistakenly, try to recover the files or folders, put them back to where they were, and rescan the library. Otherwise, you can safely delete them and the associated metadata using the buttons below to free up database space.</p>
     <button class="uk-button uk-button-danger" @click="rmAll()">Delete All</button>
-    <table class="uk-table uk-table-striped uk-overflow-auto">
-      <thead>
-        <tr>
-          <th>Type</th>
-          <th>Relative Path</th>
-          <th>ID</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <template x-for="title in titles" :key="title">
-          <tr :id="`title-${title.id}`">
-            <td>Title</td>
-            <td x-text="title.path"></td>
-            <td x-text="title.id"></td>
-            <td><a @click="rm($event)" uk-icon="trash"></a></td>
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped">
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Relative Path</th>
+            <th>ID</th>
+            <th>Actions</th>
           </tr>
-        </template>
-        <template x-for="entry in entries" :key="entry">
-          <tr :id="`entry-${entry.id}`">
-            <td>Entry</td>
-            <td x-text="entry.path"></td>
-            <td x-text="entry.id"></td>
-            <td><a @click="rm($event)" uk-icon="trash"></a></td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          <template x-for="title in titles" :key="title">
+            <tr :id="`title-${title.id}`">
+              <td>Title</td>
+              <td x-text="title.path"></td>
+              <td x-text="title.id"></td>
+              <td><a @click="rm($event)" uk-icon="trash"></a></td>
+            </tr>
+          </template>
+          <template x-for="entry in entries" :key="entry">
+            <tr :id="`entry-${entry.id}`">
+              <td>Entry</td>
+              <td x-text="entry.path"></td>
+              <td x-text="entry.id"></td>
+              <td><a @click="rm($event)" uk-icon="trash"></a></td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>