From 1ae571489d456ad1eb9d1a698d8bb863cce21397 Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Wed, 18 Sep 2024 12:17:16 +0100
Subject: [PATCH] table controls mobile friendly

---
 apps/static/js/table.js | 56 ++++++++++++++++-------------------------
 1 file changed, 21 insertions(+), 35 deletions(-)

diff --git a/apps/static/js/table.js b/apps/static/js/table.js
index e79c160..5ef9ffa 100644
--- a/apps/static/js/table.js
+++ b/apps/static/js/table.js
@@ -318,40 +318,35 @@ function createTable(containingSelector, tableId) {
 
 function createTableControls(containingSelector, pageSizeId) {
     $(containingSelector).append(`
-    <div class="table-controls row mb-3 px-sm-3">
-        <div class="col-lg-2">
-            <div class="table-page-info d-flex justify-content-start align-items-center mx-auto">
-                <span class="pageinfo-total"></span>
+        <div class="table-controls row px-sm-3 mb-4">
+            <div class="col-lg-6">
+                <nav class="table-pagination mb-4 mb-lg-0">
+                    <ul class="pagination mb-0">
+                        <li class="page-item">
+                            <button type="button" class="page-link page-prev rounded-start-1">
+                                <i class="bi bi-chevron-left"></i>
+                            </button>
+                        </li>
+                        <li class="page-item">
+                            <button type="button" class="page-link page-next rounded-end-1">
+                                <i class="bi bi-chevron-right"></i>
+                            </button>
+                        </li>  
+                    </ul>
+                </nav>
             </div>
-        </div>
-        <div class="col-lg-8">
-            <nav class="table-pagination d-flex justify-content-center">
-                <ul class="pagination mb-0">
-                    <li class="page-item">
-                        <button type="button" class="page-link page-prev rounded-start-1">
-                        <i class="bi bi-chevron-left"></i>
-                        </button>
-                    </li>
-                    <li class="page-item">
-                        <button type="button" class="page-link page-next rounded-end-1">
-                            <i class="bi bi-chevron-right"></i>
-                        </button>
-                    </li>
-                </ul>
-            </nav>
-        </div>
-        <div class="col-lg-2">
-            <div class="d-flex justify-content-end">
-                <label for="${pageSizeId}" class="form-label align-self-center mb-0 me-2">Per Page</label>
+            <div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
+                <label for="${pageSizeId}" class="form-label align-self-center mb-0 me-2">Show</label>
                 <select name="${pageSizeId}" id="${pageSizeId}" class="select-2 table-page-sizer">
                     <option value="10" selected>10&emsp;</option>
                     <option value="15">15&emsp;</option>
                     <option value="20">20&emsp;</option>
                     <option value="25">25&emsp;</option>
                 </select>
+                &nbsp;of&nbsp;
+                <span class="pageinfo-total text-nowrap"></span>
             </div>
         </div>
-    </div>
     `);
 
     $("#" + pageSizeId).select2({
@@ -372,17 +367,8 @@ function updateTableContainer(containerId, page, pageSize, itemsCount, totalItem
         nextExists,
         prevExists
     );
-    updateTablePaginationInfo(
-        `#${containerId} .table-page-info`,
-        itemsCount,
-        totalItemsCount
-    );
-}
 
-// Updates the pagination text for a given pageInfoId
-function updateTablePaginationInfo(pageInfoId, showing, total) {
-    $(`${pageInfoId} .pageinfo-showing`).text(showing);
-    $(`${pageInfoId} .pageinfo-total`).text(`${total} Result${total > 1 ? "s" : ""}`);
+    $(`#${containerId} .pageinfo-total`).text(`${totalItemsCount} Result${totalItemsCount !== 1 ? "s" : ""}`);
 }
 
 // Updates the pagination buttons for a given pageControlsId