From 8b89e32f4df78247a6fb606733244b0d321bff09 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Wed, 13 Nov 2024 00:19:55 +0000
Subject: [PATCH] updated table design for all tabs

---
 apps/home/templates/home/tabs/content.html | 53 +++++++++----------
 apps/home/templates/home/tabs/filters.html | 57 +++++++++------------
 apps/home/templates/home/tabs/styles.html  | 59 ++++++++++------------
 apps/home/templates/home/tabs/subs.html    | 12 ++---
 4 files changed, 79 insertions(+), 102 deletions(-)

diff --git a/apps/home/templates/home/tabs/content.html b/apps/home/templates/home/tabs/content.html
index fd63c91..904cba6 100644
--- a/apps/home/templates/home/tabs/content.html
+++ b/apps/home/templates/home/tabs/content.html
@@ -1,41 +1,34 @@
 <div class="js-tableFilters row mt-4 mb-3 px-sm-3">
-    <div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
-        <div class="table-search-group mb-lg-0 mb-3">
+    <div class="col-md-6 col-lg-5 col-xl-4 d-flex">
+        <div class="table-search-group mb-md-0 mb-3 dropdown">
             <label for="searchForContent" class="table-search-label">
                 <i class="bi bi-search"></i>
             </label>
-            <input type="search" id="searchForContent" class="table-search-input disable-while-loading" placeholder="search">
+            <input type="search" id="searchForContent" class="table-search-input" placeholder="search">
+            <button type="button" class="table-search-button dropdown-toggle" disabled data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+                <i class="bi bi-funnel"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end mt-1">
+                <li>
+                    <h6 class="dropdown-header">Sort By</h6>
+                </li>
+                <li>
+                    <h6 class="dropdown-header">Filter By</h6>
+                </li>
+            </ul>
         </div>
     </div>
-    <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-button-controls">
-        <div class="d-inline-block">
-            <div 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>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li><h6 class="dropdown-header">Sort By</h6></li>
-                </ul>
-            </div>
-        </div>
-        <div class="d-inline-block">
-            <div 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>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li><h6 class="dropdown-header">Filter By</h6></li>
-                </ul>
-            </div>
-        </div>
+    <div class="col-md-6 col-lg-7 col-xl-8 text-md-end table-button-controls">
         <div class="d-inline-block">
             <button type="button" class="js-tableRefreshBtn btn btn-outline-secondary rounded-1 disable-while-loading">
                 <i class="bi bi-arrow-clockwise"></i>
+                <span class="ms-2">Refresh</span>
             </button>
         </div>
         <div class="d-inline-block">
             <button type="button" class="js-tableDeleteBtn btn btn-danger rounded-1" disabled>
                 <i class="bi bi-trash3"></i>
+                <span class="ms-2">Trash</span>
             </button>
         </div>
     </div>
@@ -62,12 +55,12 @@
     </div>
     <div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
         <label for="contentTablePageSizer" class="form-label align-self-center mb-0 me-2">Show</label>
-        <select name="contentTablePageSizer" id="contentTablePageSizer" class="select-2 table-page-sizer disable-while-loading">
-            <option value="1">1&emsp;</option>
-            <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 name="contentTablePageSizer" id="contentTablePageSizer" class="corbz-select table-page-sizer disable-while-loading">
+            <option value="1">1</option>
+            <option value="10" selected>10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+            <option value="25">25</option>
         </select>
         <span class="ms-2">of&nbsp;</span>
         <span class="pageinfo-total text-nowrap">10</span>
diff --git a/apps/home/templates/home/tabs/filters.html b/apps/home/templates/home/tabs/filters.html
index 2dd746c..2afa209 100644
--- a/apps/home/templates/home/tabs/filters.html
+++ b/apps/home/templates/home/tabs/filters.html
@@ -1,51 +1,40 @@
 <div class="js-tableFilters row mt-4 mb-3 px-sm-3">
-    <div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
-        <div class="table-search-group mb-lg-0 mb-3">
+    <div class="col-md-6 col-lg-5 col-xl-4 d-flex">
+        <div class="table-search-group mb-md-0 mb-3 dropdown">
             <label for="searchForFilter" class="table-search-label">
                 <i class="bi bi-search"></i>
             </label>
             <input type="search" id="searchForFilter" class="table-search-input" placeholder="search">
+            <button type="button" class="table-search-button dropdown-toggle" disabled data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+                <i class="bi bi-funnel"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end mt-1">
+                <li>
+                    <h6 class="dropdown-header">Sort By</h6>
+                </li>
+                <li>
+                    <h6 class="dropdown-header">Filter By</h6>
+                </li>
+            </ul>
         </div>
     </div>
-    <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-button-controls">
+    <div class="col-md-6 col-lg-7 col-xl-8 text-md-end table-button-controls">
         <div class="d-inline-block">
             <button type="button" class="js-tableAddBtn btn btn-primary rounded-1">
                 <i class="bi bi-plus-lg"></i>
+                 <span class="ms-2">Create</span>
             </button>
         </div>
-        <div class="d-inline-block">
-            <div 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>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li><h6 class="dropdown-header">Sort By</h6></li>
-                </ul>
-            </div>
-        </div>
-        <div class="d-inline-block">
-            <div 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>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li><h6 class="dropdown-header">Filter By</h6></li>
-                </ul>
-            </div>
-        </div>
         <div class="d-inline-block">
             <button type="button" class="js-tableRefreshBtn btn btn-outline-secondary rounded-1 disable-while-loading">
                 <i class="bi bi-arrow-clockwise"></i>
-            </button>
-        </div>
-        <div class="d-inline-block">
-            <button type="button" class="js-tableShareBtn btn btn-secondary rounded-1" disabled>
-                <i class="bi bi-share-fill"></i>
+                <span class="ms-2">Refresh</span>
             </button>
         </div>
         <div class="d-inline-block">
             <button type="button" class="js-tableDeleteBtn btn btn-danger rounded-1" disabled>
                 <i class="bi bi-trash3"></i>
+                <span class="ms-2">Trash</span>
             </button>
         </div>
     </div>
@@ -72,12 +61,12 @@
     </div>
     <div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
         <label for="filterTablePageSizer" class="form-label align-self-center mb-0 me-2">Show</label>
-        <select name="filterTablePageSizer" id="filterTablePageSizer" class="select-2 table-page-sizer disable-while-loading">
-            <option value="1">1&emsp;</option>
-            <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 name="filterTablePageSizer" id="filterTablePageSizer" class="corbz-select table-page-sizer disable-while-loading">
+            <option value="1">1</option>
+            <option value="10" selected>10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+            <option value="25">25</option>
         </select>
         <span class="ms-2">of&nbsp;</span>
         <span class="pageinfo-total text-nowrap">10</span>
diff --git a/apps/home/templates/home/tabs/styles.html b/apps/home/templates/home/tabs/styles.html
index 0fe34d3..784ba95 100644
--- a/apps/home/templates/home/tabs/styles.html
+++ b/apps/home/templates/home/tabs/styles.html
@@ -1,46 +1,40 @@
 <div class="js-tableFilters row mt-4 mb-3 px-sm-3">
-    <div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
-        <div class="table-search-group mb-lg-0 mb-3">
-            <label for="searchForMessageStyle" class="table-search-label">
+    <div class="col-md-6 col-lg-5 col-xl-4 d-flex">
+        <div class="table-search-group mb-md-0 mb-3 dropdown">
+            <label for="searchForStyle" class="table-search-label">
                 <i class="bi bi-search"></i>
             </label>
-            <input type="search" id="searchForMessageStyle" class="table-search-input" placeholder="search">
+            <input type="search" id="searchForStyle" class="table-search-input" placeholder="search">
+            <button type="button" class="table-search-button dropdown-toggle" disabled data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+                <i class="bi bi-funnel"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end mt-1">
+                <li>
+                    <h6 class="dropdown-header">Sort By</h6>
+                </li>
+                <li>
+                    <h6 class="dropdown-header">Filter By</h6>
+                </li>
+            </ul>
         </div>
     </div>
-    <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-button-controls">
+    <div class="col-md-6 col-lg-7 col-xl-8 text-md-end table-button-controls">
         <div class="d-inline-block">
             <button type="button" class="js-tableAddBtn btn btn-primary rounded-1">
                 <i class="bi bi-plus-lg"></i>
+                 <span class="ms-2">Create</span>
             </button>
         </div>
         <div class="d-inline-block">
-            <div 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>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li><h6 class="dropdown-header">Sort By</h6></li>
-                </ul>
-            </div>
-        </div>
-        <div class="d-inline-block">
-            <div 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>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li><h6 class="dropdown-header">Filter By</h6></li>
-                </ul>
-            </div>
-        </div>
-        <div class="d-inline-block">
-            <button type="button" class="js-tableRefreshBtn btn btn-outline-secondary rounded-1">
+            <button type="button" class="js-tableRefreshBtn btn btn-outline-secondary rounded-1 disable-while-loading">
                 <i class="bi bi-arrow-clockwise"></i>
+                <span class="ms-2">Refresh</span>
             </button>
         </div>
         <div class="d-inline-block">
             <button type="button" class="js-tableDeleteBtn btn btn-danger rounded-1" disabled>
                 <i class="bi bi-trash3"></i>
+                <span class="ms-2">Trash</span>
             </button>
         </div>
     </div>
@@ -50,7 +44,7 @@
 </div>
 <div class="js-tableControls row px-sm-3 mb-4">
     <div class="col-lg-6">
-        <nav class="table-pagination mb-4 mb-lg-0">
+        <nav class="table-pagination mb-4 mb-lg-0 table-pagination-group"> <!-- TODO: continue here -->
             <ul class="pagination mb-0">
                 <li class="page-item">
                     <button type="button" class="page-link page-prev rounded-start-1">
@@ -67,11 +61,12 @@
     </div>
     <div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
         <label for="styleTablePageSizer" class="form-label align-self-center mb-0 me-2">Show</label>
-        <select name="styleTablePageSizer" id="styleTablePageSizer" 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 name="styleTablePageSizer" id="styleTablePageSizer" class="corbz-select table-page-sizer disable-while-loading">
+            <option value="1">1</option>
+            <option value="10" selected>10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+            <option value="25">25</option>
         </select>
         <span class="ms-2">of&nbsp;</span>
         <span class="pageinfo-total text-nowrap">10</span>
diff --git a/apps/home/templates/home/tabs/subs.html b/apps/home/templates/home/tabs/subs.html
index 2296b26..82019fb 100644
--- a/apps/home/templates/home/tabs/subs.html
+++ b/apps/home/templates/home/tabs/subs.html
@@ -61,12 +61,12 @@
     </div>
     <div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
         <label for="subTablePageSizer" class="form-label align-self-center mb-0 me-2">Show</label>
-        <select name="subTablePageSizer" id="subTablePageSizer" class="select-2 table-page-sizer disable-while-loading">
-            <option value="1">1&emsp;</option>
-            <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 name="subTablePageSizer" id="subTablePageSizer" class="corbz-select table-page-sizer disable-while-loading">
+            <option value="1">1</option>
+            <option value="10" selected>10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+            <option value="25">25</option>
         </select>
         <span class="ms-2">of&nbsp;</span>
         <span class="pageinfo-total text-nowrap">10</span>