mobile friendly buttons

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
 

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;
 }

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="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">
-                <div class="d-inline-block ms-3">
+                <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>