From 5cb200c5978f2d43584bb9645e0a69ab030559af Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Mon, 4 Nov 2024 23:04:54 +0000
Subject: [PATCH] trying table layout

---
 apps/home/templates/home/tabs/subs.html | 53 ++++++++++++++-----------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/apps/home/templates/home/tabs/subs.html b/apps/home/templates/home/tabs/subs.html
index 1f9eff4..62e34c5 100644
--- a/apps/home/templates/home/tabs/subs.html
+++ b/apps/home/templates/home/tabs/subs.html
@@ -1,46 +1,51 @@
 <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 me-md-0 me-3">
             <label for="searchForSubscription" class="table-search-label">
                 <i class="bi bi-search"></i>
             </label>
             <input type="search" id="searchForSubscription" class="table-search-input" placeholder="search">
         </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">
-            <button type="button" class="table-new-btn btn btn-primary rounded-1">
-                <i class="bi bi-plus-lg"></i>
-            </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">
+        <div class="btn-group rounded-1 ms-md-3 ms-auto mb-md-0 mb-3" role="group">
+            <div class="btn-group" role="group">
+                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-autoclose="outside" aria-expanded="false">
                     <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 class="dropdown-menu">
+                    <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>
+            <div class="btn-group" role="group">
+                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-autoclose="outside" aria-expanded="false">
+                    <i class="bi bi-funnel-fill"></i>
                 </button>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li><h6 class="dropdown-header">Filter By</h6></li>
+                <ul class="dropdown-menu">
+                    <li>
+                        <h6 class="dropdown-header">Filter By</h6>
+                    </li>
                 </ul>
             </div>
         </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="table-refresh-btn btn btn-outline-secondary rounded-1 disable-while-loading">
-                <i class="bi bi-arrow-clockwise"></i>
+            <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">
-            <button type="button" class="table-del-btn btn btn-danger rounded-1" disabled>
+            <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>