From 7f580a0f1f5623c74927000dcd6dfc7f799e426c Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Mon, 16 Sep 2024 10:24:03 +0100
Subject: [PATCH] mobile friendly buttons

---
 CHANGELOG.md             |  1 +
 apps/static/css/base.css |  8 ++++++++
 apps/static/js/table.js  | 14 +++++++-------
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2850f29..36028ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Web interface now uses the full device width, rather than a smaller maximum width
 - Server sidebar use more width, also displays name and guild ID, becomes smaller on small devices
 - Update changelog to follow [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
+- Made the tables and their respective buttons more mobile friendly
 
 ## [0.3.4] - 2024-09-12
 
diff --git a/apps/static/css/base.css b/apps/static/css/base.css
index dec8437..317ca8d 100644
--- a/apps/static/css/base.css
+++ b/apps/static/css/base.css
@@ -74,4 +74,12 @@
     .w-xxl-75 { width: 75%; }
     .w-xxl-100 { width: 100%; }
     .w-xxl-auto { width: auto; }
+}
+
+.table-search-buttons > div {
+    margin-left: 1rem;
+}
+
+.table-search-buttons > div:first-of-type {
+    margin-left: 0 !important;
 }
\ No newline at end of file
diff --git a/apps/static/js/table.js b/apps/static/js/table.js
index 9c607ed..f6122fa 100644
--- a/apps/static/js/table.js
+++ b/apps/static/js/table.js
@@ -50,7 +50,7 @@ async function initTable(containingSelector, tableId, loadDataFunc, newRowFunc,
 function createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options, newRowFunc, deleteSelectedFunc) {
     $(containingSelector).append(`
         <div class="row my-3 px-3 table-search-row">
-            <div class="col-lg-4">
+            <div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
                 <div class="input-group mb-lg-0 mb-3 rounded-1">
                     <span class="input-group-text">
                         <i class="bi bi-search"></i>
@@ -58,8 +58,8 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
                     <input type="search" id="${searchId}" name="${searchId}" class="form-control table-searchbar" placeholder="Search">
                 </div>
             </div>
-            <div class="col-lg-8 text-end table-search-buttons">
-                <div class="d-inline-block ms-3">
+            <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">
+                <div class="d-inline-block">
                     <button type="button" class="table-refresh-btn btn btn-outline-secondary rounded-1">
                         <i class="bi bi-arrow-clockwise"></i>
                     </button>
@@ -71,7 +71,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
     // If there is a function that allows the creation of new rows, create a button for it
     if (newRowFunc) {
         $(`${containingSelector} .table-search-row .table-search-buttons`).prepend(`
-            <div class="d-inline-block ms-3">
+            <div class="d-inline-block">
                 <button type="button" class="table-new-btn btn btn-primary rounded-1">
                     <i class="bi bi-plus-lg"></i>
                 </button>
@@ -83,7 +83,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
     // Show the sort dropdown
     if (options.sort && options.actions.GET) {
         $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
-            <div class="d-inline-block ms-3">
+            <div class="d-inline-block">
                 <div id="${sortDropdownId}" class="dropdown table-sort-dropdown">
                     <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                         <i class="bi bi-sort-alpha-up"></i>
@@ -100,7 +100,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
     // Show the filters dropdown
     if (options.filter && options.actions.GET) {
         $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
-            <div class="d-inline-block ms-3">
+            <div class="d-inline-block">
                 <div id="${filterDropdownId}" class="dropdown table-filter-dropdown">
                     <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                         <i class="bi bi-funnel"></i>
@@ -117,7 +117,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
     // If there is a function for deleting selected rows, create a button for it
     if (deleteSelectedFunc) {
         $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
-            <div class="d-inline-block ms-3">
+            <div class="d-inline-block">
                 <button type="button" class="table-del-btn btn btn-danger rounded-1">
                     <i class="bi bi-trash3"></i>
                 </button>