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 | 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 | 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 @@
-
+
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 @@
- |