From bf887db7cba08b1a107fc5c813dd9d64e527337e Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Fri, 18 Oct 2024 23:17:38 +0100
Subject: [PATCH] bring changes

---
 apps/home/static/home/js/tabs/subs.js      |   6 +-
 apps/home/static/home/scss/_.scss          | 204 +++++++++++++++
 apps/home/static/home/scss/tables.scss     | 290 ++++++++-------------
 apps/home/templates/home/tabs/content.html |   4 +-
 apps/home/templates/home/tabs/filters.html |   2 +-
 apps/home/templates/home/tabs/styles.html  |   4 +-
 apps/home/templates/home/tabs/subs.html    |   4 +-
 7 files changed, 326 insertions(+), 188 deletions(-)
 create mode 100644 apps/home/static/home/scss/_.scss

diff --git a/apps/home/static/home/js/tabs/subs.js b/apps/home/static/home/js/tabs/subs.js
index 9665bec..d166ab5 100644
--- a/apps/home/static/home/js/tabs/subs.js
+++ b/apps/home/static/home/js/tabs/subs.js
@@ -29,28 +29,24 @@ function initSubscriptionsModule() {
                 data: "channels_detail",
                 className: "text-center render-array-dropdown-column",
                 render: data => renderArrayDropdownColumn(data.map(item => `#${item.name}`), "bi-hash", "Discord Channels")
-                // render: data => renderArrayBadgesColumn(data.map(item => "#" + item.name))
             },
             {
                 title: "Filters",
                 data: "filters_detail",
                 className: "text-center render-array-dropdown-column",
                 render: data => renderArrayDropdownColumn(data.map(item => item.name), "bi-funnel", "Selected Filters")
-                // render: data => renderArrayBadgesColumn(data.map(item => item.name))
             },
             {
                 title: "Rules",
                 data: "unique_rules_detail",
                 className: "text-center render-array-dropdown-column",
                 render: data => renderArrayDropdownColumn(data.map(item => item.name), "bi-vr", "Unique Rules")
-                // render: data => renderArrayBadgesColumn(data.map(item => item.name))
             },
             {
                 title: "Style",
                 data: "message_style_detail",
                 className: "text-center",
                 render: data => renderHexColourColumn(data.colour, null, data)
-                // render: data => renderBadgeColumn(data.name, data.is_embed ? data.colour : null)
             },
             {
                 title: "Created At",
@@ -68,7 +64,7 @@ function initSubscriptionsModule() {
                     `).popover()[0];
                 }
             },
-            { 
+            {
                 title: "Enabled",
                 data: "active",
                 orderable: false,
diff --git a/apps/home/static/home/scss/_.scss b/apps/home/static/home/scss/_.scss
new file mode 100644
index 0000000..f41bc1c
--- /dev/null
+++ b/apps/home/static/home/scss/_.scss
@@ -0,0 +1,204 @@
+
+.render-array-dropdown-column {
+
+    position: relative;
+
+    .dropdown {
+
+    }
+
+    // .col-badge {
+
+    //     position: absolute;
+    //     top: 50%;
+    //     left: 50%;
+    //     transform: translate(-50%, -50%);
+    //     background-color: var(--bs-danger);
+    //     border-radius: 50%;
+    //     width: 1.25rem;
+    //     height: 1.25rem;
+    //     display: flex;
+    //     justify-content: center;
+    //     align-items: center;
+    //     flex-shrink: 0;
+
+    //     >* {
+
+    //     }
+
+    // }
+
+    button[data-bs-toggle="dropdown"] {
+
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        padding: 0;
+        background: none;
+
+    }
+
+    // .col-badge {
+
+    //     position: absolute;
+    //     top: 0;
+    //     right: 100%;
+    //     transform: translateY(-100%);
+    //     background-color: var(--bs-danger);
+
+    // }
+
+    .dropdown-menu {
+
+        border: none;
+        padding: 0.25rem;
+        box-shadow: var(--bs-box-shadow);
+        border-radius: var(--bs-border-radius-sm);
+        background-color: var(--bs-tertiary-bg);
+
+        .dropdown-item {
+
+            border-radius: var(--bs-border-radius-sm);
+
+            &:hover, &:focus { background-color: var(--bs-body-bg); }
+
+        }
+
+    }
+
+}
+
+
+
+
+
+
+
+.table {
+    color: var(--bs-body-color) !important;
+}
+
+.table tbody tr.selected > * {
+    box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
+    color: var(--bs-body-color) !important;
+}
+
+.table.dataTable > tbody > tr.selected a {
+    color: var(--bs-link-color) !important;
+}
+
+/* Fuck ugly <td> height fix */
+td {
+    height: 1px;
+    text-wrap: nowrap;
+}
+td > .btn-link { padding-left: 0; }
+  
+@-moz-document url-prefix() {
+    tr { height: 100%; }
+    td { height: 100%; }
+}
+
+
+/* Empty Table */
+
+.table .dt-empty {
+    padding: 2rem 0;
+    border-bottom: none !important;
+}
+
+.table tr:hover > .dt-empty {
+    box-shadow: none !important;
+}
+
+
+/* Table Search */
+
+.table-search-group {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 100%;
+    max-width: 450px;
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.25rem;
+    background-color: var(--bs-body-bg);
+    overflow: hidden;
+}
+
+.table-search-label {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    text-align: center;
+    white-space: nowrap;
+    padding-right: 0;
+    border: none;
+    background-color: inherit;
+}
+
+.table-search-input {
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    appearance: none;
+    background-clip: padding-box;
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+    border: none;
+    border-radius: 0;
+    background-color: inherit
+}
+
+.table-search-input:focus {
+    outline: 0;
+    box-shadow: none;
+}
+
+
+/* Button Controls */
+
+.table-search-buttons > div {
+    margin-left: 1rem;
+}
+
+@media (max-width: 576px) {
+    .table-search-buttons > div {
+        margin-left: 0.25rem;
+    }
+}
+
+.table-search-buttons > div:first-of-type {
+    margin-left: 0 !important;
+}
+
+
+/* Table Border Colour */
+
+table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
+    border-bottom: 1px solid var(--bs-border-color);
+}
+
+div.dt-container.dt-empty-footer tbody > tr:last-child > * {
+    border-bottom: 1px solid var(--bs-border-color);
+}
+
+
+/* Cell Data Types */
+
+.table-cell-hex {
+    margin: 0 auto;
+    width: 25px;
+    height: 25px;
+    border-radius: 0.25rem;
+}
\ No newline at end of file
diff --git a/apps/home/static/home/scss/tables.scss b/apps/home/static/home/scss/tables.scss
index f41bc1c..e68b1cb 100644
--- a/apps/home/static/home/scss/tables.scss
+++ b/apps/home/static/home/scss/tables.scss
@@ -1,121 +1,7 @@
 
-.render-array-dropdown-column {
-
-    position: relative;
-
-    .dropdown {
-
-    }
-
-    // .col-badge {
-
-    //     position: absolute;
-    //     top: 50%;
-    //     left: 50%;
-    //     transform: translate(-50%, -50%);
-    //     background-color: var(--bs-danger);
-    //     border-radius: 50%;
-    //     width: 1.25rem;
-    //     height: 1.25rem;
-    //     display: flex;
-    //     justify-content: center;
-    //     align-items: center;
-    //     flex-shrink: 0;
-
-    //     >* {
-
-    //     }
-
-    // }
-
-    button[data-bs-toggle="dropdown"] {
-
-        position: relative;
-        width: 100%;
-        height: 100%;
-        border: 0;
-        padding: 0;
-        background: none;
-
-    }
-
-    // .col-badge {
-
-    //     position: absolute;
-    //     top: 0;
-    //     right: 100%;
-    //     transform: translateY(-100%);
-    //     background-color: var(--bs-danger);
-
-    // }
-
-    .dropdown-menu {
-
-        border: none;
-        padding: 0.25rem;
-        box-shadow: var(--bs-box-shadow);
-        border-radius: var(--bs-border-radius-sm);
-        background-color: var(--bs-tertiary-bg);
-
-        .dropdown-item {
-
-            border-radius: var(--bs-border-radius-sm);
-
-            &:hover, &:focus { background-color: var(--bs-body-bg); }
-
-        }
-
-    }
-
-}
-
-
-
-
-
-
-
-.table {
-    color: var(--bs-body-color) !important;
-}
-
-.table tbody tr.selected > * {
-    box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
-    color: var(--bs-body-color) !important;
-}
-
-.table.dataTable > tbody > tr.selected a {
-    color: var(--bs-link-color) !important;
-}
-
-/* Fuck ugly <td> height fix */
-td {
-    height: 1px;
-    text-wrap: nowrap;
-}
-td > .btn-link { padding-left: 0; }
-  
-@-moz-document url-prefix() {
-    tr { height: 100%; }
-    td { height: 100%; }
-}
-
-
-/* Empty Table */
-
-.table .dt-empty {
-    padding: 2rem 0;
-    border-bottom: none !important;
-}
-
-.table tr:hover > .dt-empty {
-    box-shadow: none !important;
-}
-
-
-/* Table Search */
-
+// Table Search Bar
 .table-search-group {
+
     position: relative;
     display: flex;
     flex-wrap: wrap;
@@ -124,81 +10,133 @@ td > .btn-link { padding-left: 0; }
     max-width: 450px;
     border: 1px solid var(--bs-border-color);
     border-radius: 0.25rem;
+    color: var(--bs-body-color);
     background-color: var(--bs-body-bg);
     overflow: hidden;
-}
-
-.table-search-label {
-    display: flex;
-    align-items: center;
-    padding: 0.375rem 0.75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--bs-body-color);
-    text-align: center;
-    white-space: nowrap;
-    padding-right: 0;
-    border: none;
-    background-color: inherit;
-}
-
-.table-search-input {
-    padding: 0.375rem 0.75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--bs-body-color);
-    appearance: none;
-    background-clip: padding-box;
-    position: relative;
-    flex: 1 1 auto;
-    width: 1%;
-    min-width: 0;
-    border: none;
-    border-radius: 0;
-    background-color: inherit
-}
-
-.table-search-input:focus {
-    outline: 0;
-    box-shadow: none;
-}
 
 
-/* Button Controls */
+    .table-search-label {
 
-.table-search-buttons > div {
-    margin-left: 1rem;
-}
+        display: flex;
+        align-items: center;
+        padding: 0.375rem 0.75rem;
+        padding-right: 0;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5;
+        color: inherit;
+        background-color: inherit;
+        border: none;
+        text-align: center;
+        white-space: nowrap;
 
-@media (max-width: 576px) {
-    .table-search-buttons > div {
-        margin-left: 0.25rem;
     }
+
+    .table-search-input {
+
+        position: relative;
+        flex: 1 1 auto;
+        padding: 0.375rem 0.75rem;
+        appearance: none;
+        width: 1%;
+        min-width: 0;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5;
+        border: none;
+        border-radius: 0;
+        color: inherit;
+        background-color: inherit;
+        background-clip: padding-box;
+
+        // Disable bootstrap's focus highlights
+        &:focus {
+
+            outline: 0;
+            box-shadow: none;
+
+        }
+
+    }
+
 }
 
-.table-search-buttons > div:first-of-type {
-    margin-left: 0 !important;
+// Table Button Controls
+
+.table-button-controls > div {
+
+    margin-left: 1rem;
+
+    &:first-of-type { margin-left: 0 !important; }
+
+    @include media-breakpoint-down(md) { margin-left: 0.25rem; }
+
 }
 
 
-/* Table Border Colour */
+// Table
+.table {
 
-table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
-    border-bottom: 1px solid var(--bs-border-color);
-}
+    td, th { vertical-align: middle; }
+
+    // Top & bottom border colours
+    border-color: var(--bs-border-color);
+    tr:first-child > *,
+    tr:last-child > * {
+        border-color: inherit !important;
+    }
+
+    thead { }
+    tbody { }
+    tfoot { }
+
+    // Custom column sizes
 
-div.dt-container.dt-empty-footer tbody > tr:last-child > * {
-    border-bottom: 1px solid var(--bs-border-color);
 }
 
 
-/* Cell Data Types */
+// .table {
+
+//     // color: var(--bs-body-color);
+
+//     // // Empty table
+//     // .dt-empty {
+
+//     //     padding: 2rem 0;
+//     //     border-bottom: none;
+
+//     // }
+
+//     // Top & bottom border colour
+//     &.dataTable > thead > tr > th,
+//     &.dataTable > thead > tr > td {
+
+//         border-bottom: 1px solid var(--bs-border-color);
+
+//     }
+
+//     .dt-container.dt-empty-footer tbody > tr:last-child > * {
+
+//         border-bottom: 1px solid var(--bs-border-color);
+
+//     }
+
+//     // tr:hover > .dt-empty {
+
+//     //     box-shadow: none !important;
+
+//     // }
+
+//     // tbody {
+
+//     //     tr.selected > * {
+
+//     //         color: var(--bs-body-color);
+//     //         box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9);
+
+//     //     }
+
+//     // }
+
+// }
 
-.table-cell-hex {
-    margin: 0 auto;
-    width: 25px;
-    height: 25px;
-    border-radius: 0.25rem;
-}
\ No newline at end of file
diff --git a/apps/home/templates/home/tabs/content.html b/apps/home/templates/home/tabs/content.html
index 043de36..3449c8d 100644
--- a/apps/home/templates/home/tabs/content.html
+++ b/apps/home/templates/home/tabs/content.html
@@ -7,7 +7,7 @@
             <input type="search" id="searchForContent" class="table-search-input disable-while-loading" placeholder="search">
         </div>
     </div>
-    <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">
+    <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">
@@ -41,7 +41,7 @@
     </div>
 </div>
 <div class="js-tableBody table-responsive my-3 px-sm-3">
-    <table id="contentTable" class="table table-hover align-middle"></table>
+    <table id="contentTable" class="table table-hover"></table>
 </div>
 <div class="js-tableControls row px-sm-3 mb-4">
     <div class="col-lg-6">
diff --git a/apps/home/templates/home/tabs/filters.html b/apps/home/templates/home/tabs/filters.html
index 1670ab4..3e69138 100644
--- a/apps/home/templates/home/tabs/filters.html
+++ b/apps/home/templates/home/tabs/filters.html
@@ -46,7 +46,7 @@
     </div>
 </div>
 <div class="js-tableBody table-responsive my-3 px-sm-3">
-    <table id="filterTable" class="table table-hover align-middle"></table>
+    <table id="filterTable" class="table table-hover"></table>
 </div>
 <div class="js-tableControls row px-sm-3 mb-4">
     <div class="col-lg-6">
diff --git a/apps/home/templates/home/tabs/styles.html b/apps/home/templates/home/tabs/styles.html
index d777785..c836674 100644
--- a/apps/home/templates/home/tabs/styles.html
+++ b/apps/home/templates/home/tabs/styles.html
@@ -7,7 +7,7 @@
             <input type="search" id="searchForMessageStyle" 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-search-buttons">
+    <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>
@@ -46,7 +46,7 @@
     </div>
 </div>
 <div class="js-tableBody table-responsive my-3 px-sm-3">
-    <table id="styleTable" class="table table-hover align-middle"></table>
+    <table id="styleTable" class="table table-hover"></table>
 </div>
 <div class="js-tableControls row px-sm-3 mb-4">
     <div class="col-lg-6">
diff --git a/apps/home/templates/home/tabs/subs.html b/apps/home/templates/home/tabs/subs.html
index cb83d8b..1f9eff4 100644
--- a/apps/home/templates/home/tabs/subs.html
+++ b/apps/home/templates/home/tabs/subs.html
@@ -7,7 +7,7 @@
             <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-search-buttons">
+    <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>
@@ -46,7 +46,7 @@
     </div>
 </div>
 <div class="js-tableBody table-responsive my-3 px-sm-3">
-    <table id="subTable" class="table table-hover align-middle"></table>
+    <table id="subTable" class="table table-hover"></table>
 </div>
 <div class="js-tableControls row px-sm-3 mb-4">
     <div class="col-lg-6">