diff --git a/apps/home/static/home/css/tables.css b/apps/home/static/home/css/tables.css
index 186932d..e69de29 100644
--- a/apps/home/static/home/css/tables.css
+++ b/apps/home/static/home/css/tables.css
@@ -1,128 +0,0 @@
-
-.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/js/tables.js b/apps/home/static/home/js/tables.js
index 0fd491a..c29b4b1 100644
--- a/apps/home/static/home/js/tables.js
+++ b/apps/home/static/home/js/tables.js
@@ -511,6 +511,31 @@ function renderArrayBadgesColumn(data) {
return badges.html();
}
+function renderArrayDropdownColumn(data, icon, headerText) {
+ if (!data.length) {
+ return "";
+ }
+
+ let $dropdown = $(`
+
+
+
+
+ `);
+ let $dropdownItems = $dropdown.find(".dropdown-menu")
+
+ data.forEach(item => {
+ let $itemBtn = $(``);
+ $dropdownItems.append($itemBtn);
+ });
+
+ return $dropdown.html();
+}
+
function renderHexColourColumn(data, type, row) {
if (!row.is_embed) {
return "";
diff --git a/apps/home/static/home/js/tabs/subs.js b/apps/home/static/home/js/tabs/subs.js
index 62f0e90..869ef90 100644
--- a/apps/home/static/home/js/tabs/subs.js
+++ b/apps/home/static/home/js/tabs/subs.js
@@ -27,26 +27,30 @@ function initSubscriptionsModule() {
{
title: "Channels",
data: "channels_detail",
- className: "text-center",
- render: data => renderArrayBadgesColumn(data.map(item => "#" + item.name))
+ className: "text-center dropdown 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: data => renderArrayBadgesColumn(data.map(item => item.name))
+ className: "text-center dropdown 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 dropdown 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 => renderBadgeColumn(data.name, data.is_embed ? data.colour : null)
- },
- {
- title: "Rules",
- data: "unique_rules_detail",
- className: "text-center text-nowrap",
- render: data => renderArrayBadgesColumn(data.map(item => item.name))
+ render: data => renderHexColourColumn(data.colour, null, data)
+ // render: data => renderBadgeColumn(data.name, data.is_embed ? data.colour : null)
},
{
title: "Created At",
diff --git a/apps/home/static/home/scss/index.scss b/apps/home/static/home/scss/index.scss
index a72c79a..7dbce44 100644
--- a/apps/home/static/home/scss/index.scss
+++ b/apps/home/static/home/scss/index.scss
@@ -1,79 +1,6 @@
@import "bootstrap.scss";
@import "./sidebar.scss";
-
-@keyframes bump {
- 0% {
- transform: translateY(0);
- }
- 50% {
- transform: translateY(5px); /* Adjust the height of the bump */
- }
- 100% {
- transform: translateY(0);
- }
- }
-
-.bump {
- animation: bump .2s ease-out;
-}
-
-.server-sidebar {
- width: 16rem !important;
-}
-/*
-@media (max-width: 992px) {
- .server-sidebar {
- width: 4.5rem;
- }
-
- .server-item > button {
- padding: 0.25rem !important;
- }
-
- .server-item > button > div {
- justify-content: center !important;
- }
-
- .server-item .server-item-labels {
- display: none !important;
- }
-
- .server-sidebar > ul > li:has(> #newServerBtn) {
- display: flex;
- justify-content: center !important;
- }
-
- #newServerBtn {
- width: 45px !important;
- height: 45px !important;
- padding: 0 !important;
- }
-} */
-
-.server-item {
- max-width: calc(16rem - 1rem);
-}
-
-.server-item-selector {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- flex-wrap: nowrap;
- color: var(--bs-text-body);
- background-color: var(--bg-tertiary-bg);
- transition: 0.3s;
-}
-
-.server-item-selector .font-monospace {
- color: var(--bs-secondary-color)
-}
-
-.server-item-selector:hover,
-.server-item-selector:focus,
-.server-item-selector:active,
-.active > .server-item-selector {
- background-color: var(--bs-body-bg) !important;
-}
+@import "./tables.scss";
/* widths */
@@ -98,45 +25,3 @@
#serverTabs .nav-item .nav-link:not(.active) {
color: var(--bs-text-body);
}
-
-/* Yellow Dot Indicator for the server sidebar */
-.dot-container {
- width: .75rem;
- height: .75rem;
-
- display: flex;
- position: absolute;
- top: 0;
- right: 0;
-}
-
-@media (max-width: 992px) {
- .dot-container {
- transform: translate(25%, -25%);
- }
-}
-
-.dot-icon {
- height: .75rem;
- width: .75rem;
- background-color: var(--bs-primary);
- border-radius: 50%;
- display: inline-block;
-}
-
-
-/* Sidebar Buttons */
-.sidebar-btn {
- border: none;
- width: 100%;
- height: 100%;
- padding: 0.5rem 0;
- border-radius: var(--bs-border-radius-sm);
-
- color: var(--bs-body-color);
- background-color: var(--bs-tertiary-bg);
-}
-
-.sidebar-btn:hover {
- background-color: var(--bs-body-bg);
-}
diff --git a/apps/home/static/home/scss/tables.scss b/apps/home/static/home/scss/tables.scss
new file mode 100644
index 0000000..2932869
--- /dev/null
+++ b/apps/home/static/home/scss/tables.scss
@@ -0,0 +1,198 @@
+
+.render-array-dropdown-column.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 {
+
+ 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
|