From 7ba12db083177340aa22009d3caa152c70d7cc3d Mon Sep 17 00:00:00 2001 From: Corban-Lee Jones Date: Fri, 7 Feb 2025 17:54:26 +0000 Subject: [PATCH] ui work & sub table improvements --- src/client/public/css/tailwind.css | 98 +++++++++++---- src/client/public/js/guild/subscriptions.js | 131 +++++++++++++------- src/client/views/footer.ejs | 7 ++ src/client/views/guild/guildHeader.ejs | 31 +++-- src/client/views/guild/subscriptions.ejs | 31 +++-- src/client/views/layout.ejs | 3 + src/client/views/sidebar.ejs | 43 +++---- 7 files changed, 223 insertions(+), 121 deletions(-) create mode 100644 src/client/views/footer.ejs diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css index ebd2529..7bddc74 100644 --- a/src/client/public/css/tailwind.css +++ b/src/client/public/css/tailwind.css @@ -830,6 +830,10 @@ video { bottom: 0px; } +.bottom-0 { + bottom: 0px; +} + .bottom-full { bottom: 100%; } @@ -842,6 +846,14 @@ video { inset-inline-end: 0.75rem; } +.left-0 { + left: 0px; +} + +.right-0 { + right: 0px; +} + .start-0 { inset-inline-start: 0px; } @@ -936,6 +948,10 @@ video { margin-bottom: 0px !important; } +.\!mb-2 { + margin-bottom: 0.5rem !important; +} + .\!me-1 { margin-inline-end: 0.25rem !important; } @@ -1040,6 +1056,10 @@ video { margin-top: 1.75rem; } +.mt-8 { + margin-top: 2rem; +} + .mt-auto { margin-top: auto; } @@ -1164,10 +1184,18 @@ video { height: 0.625rem !important; } +.h-10 { + height: 2.5rem; +} + .h-2 { height: 0.5rem; } +.h-6 { + height: 1.5rem; +} + .h-7 { height: 1.75rem; } @@ -1220,6 +1248,10 @@ video { width: 2.5rem; } +.w-11 { + width: 2.75rem; +} + .w-20 { width: 5rem; } @@ -1252,6 +1284,11 @@ video { width: calc(100% - 2rem); } +.w-fit { + width: -moz-fit-content; + width: fit-content; +} + .w-full { width: 100%; } @@ -1268,8 +1305,8 @@ video { min-width: 100%; } -.max-w-\[120rem\] { - max-width: 120rem; +.max-w-64 { + max-width: 16rem; } .max-w-\[28rem\] { @@ -1312,10 +1349,6 @@ video { flex-basis: 100%; } -.origin-bottom-left { - transform-origin: bottom left; -} - .-translate-x-full { --tw-translate-x: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1597,10 +1630,6 @@ video { border-inline-end-width: 1px; } -.border-s { - border-inline-start-width: 1px; -} - .border-t { border-top-width: 1px; } @@ -1745,6 +1774,11 @@ video { padding-right: 0.5rem; } +.px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -1836,10 +1870,6 @@ video { padding-inline-start: 2.75rem; } -.ps-2 { - padding-inline-start: 0.5rem; -} - .ps-3\.5 { padding-inline-start: 0.875rem; } @@ -2098,12 +2128,6 @@ video { transition-duration: 150ms; } -.transition-\[margin\2c opacity\] { - transition-property: margin,opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .transition-\[opacity\2c margin\] { transition-property: opacity,margin; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -2503,6 +2527,12 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te display: inline-block; } +.before\:size-5::before { + content: var(--tw-content); + width: 1.25rem; + height: 1.25rem; +} + .before\:size-6::before { content: var(--tw-content); width: 1.5rem; @@ -2579,6 +2609,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } +.before\:content-\[\'\(\'\]::before { + --tw-content: '('; + content: var(--tw-content); +} + .after\:absolute::after { content: var(--tw-content); position: absolute; @@ -2604,6 +2639,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te width: 100%; } +.after\:content-\[\'\)\'\]::after { + --tw-content: ')'; + content: var(--tw-content); +} + .checked\:border-blue-600:checked { --tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity, 1)); @@ -2630,6 +2670,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1)); } +.empty\:hidden:empty { + display: none; +} + .hover\:bg-blue-700:hover { --tw-bg-opacity: 1; background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)); @@ -3018,6 +3062,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te height: 5rem; } + .sm\:h-16 { + height: 4rem; + } + .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -3089,6 +3137,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te font-size: 1.5rem; line-height: 2rem; } + + .sm\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } } @media (min-width: 768px) { @@ -3233,11 +3286,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te } } -.dark\:divide-neutral-300:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: 1; - border-color: rgb(212 212 212 / var(--tw-divide-opacity, 1)); -} - .dark\:divide-neutral-700:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(64 64 64 / var(--tw-divide-opacity, 1)); diff --git a/src/client/public/js/guild/subscriptions.js b/src/client/public/js/guild/subscriptions.js index 82b4fb2..4fdd5e7 100644 --- a/src/client/public/js/guild/subscriptions.js +++ b/src/client/public/js/guild/subscriptions.js @@ -1,30 +1,13 @@ -// const { dataTable } = HSDataTable.getInstance("#table"); - -// // Filter by status -// (function () { -// const radioButtons = document.querySelectorAll('input[type="radio"][name="filter"]'); - -// dataTable.search.fixed('status', function (searchStr, data, index) { -// const status = data[2].trim().toLowerCase(); // Adjust index based on your dataset - -// if (radioButtons[0].checked && status === 'active') return true; -// if (radioButtons[1].checked && status === 'inactive') return true; -// return false; -// }); - -// radioButtons.forEach(radio => { -// radio.addEventListener('change', () => dataTable.draw()); -// }); -// })(); - - -// dataTable.on("draw.dt", () => { -// console.log("Table redrawn") -// }); - const formatTimestamp = timestamp => { - const d = new Date(timestamp.replace(" ", "T")); + let d; + if (typeof timestamp === "string") { + d = new Date(timestamp.replace(" ", "T")); + } + else { + d = new Date(timestamp); + } + const now = new Date(); // If younger than a year, show time @@ -38,7 +21,7 @@ var table; const defineTable = () => { table = new HSDataTable("#table", { ajax: { - url: `/guild/${guild}/subscriptions/api/datatable`, + url: `/guild/${guildId}/subscriptions/api/datatable`, dataSrc: "data", data: (d) => { d.filters = {}; @@ -84,6 +67,13 @@ const defineTable = () => { rowCallback: (row, data, index) => { $(row).addClass("bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800"); }, + drawCallback: () => { + HSDropdown.autoInit(); + }, + select: { + style: "multi", + selector: "td:first-child input[type='checkbox']" + }, columnDefs: [ { // Row select checkbox @@ -142,11 +132,43 @@ const defineTable = () => { orderable: false, searchable: false, render: (data, type, row) => { - // ${data.length} channels - return ` - - - `; + if (type !== "display") { return data; } + if (!data.length) { return ""; } + + const wrapper = $("
").addClass("flex flex-nowrap gap-1 px-6 py-4"); + const tag = $("").addClass("inline-flex items-center whitespace-nowrap gap-1 py-1 px-2.5 border text-xs rounded-md bg-white dark:bg-neutral-800 border-gray-200 dark:border-neutral-700 text-gray-800 dark:text-neutral-200"); + + const firstChannelName = "# " + channels.find(c => c.id === data[0]).name; + wrapper.append(tag.clone().text(firstChannelName)); + + // No need to run the dropdown code if there's no more to show + if (data.length === 1) { + return wrapper.get(0); + } + else if (data.length <= 2) { + const secondChannelName = "# " + channels.find(c => c.id === data[1]).name; + wrapper.append(tag.clone().text(secondChannelName)); + data.shift(); + return wrapper.get(0); + } + + // drop the first element to exclude it from the dropdown + data.shift(); + + const dropdown = $("
").addClass("hs-dropdown inline-block"); + const dropdownBtn = $(" + + +
@@ -81,11 +94,11 @@
- Subscriptions - Filters - Styles - Content - Settings + Subscriptions + Filters + Styles + Content + Settings
\ No newline at end of file diff --git a/src/client/views/guild/subscriptions.ejs b/src/client/views/guild/subscriptions.ejs index 3fb7525..b5f0c38 100644 --- a/src/client/views/guild/subscriptions.ejs +++ b/src/client/views/guild/subscriptions.ejs @@ -26,41 +26,38 @@
- +
- @@ -375,6 +372,14 @@
- + <% block("scripts").append(''); %> \ No newline at end of file diff --git a/src/client/views/layout.ejs b/src/client/views/layout.ejs index c7c21c1..868b4d9 100644 --- a/src/client/views/layout.ejs +++ b/src/client/views/layout.ejs @@ -16,8 +16,11 @@
+ + + diff --git a/src/client/views/sidebar.ejs b/src/client/views/sidebar.ejs index 787db9d..e5c389e 100644 --- a/src/client/views/sidebar.ejs +++ b/src/client/views/sidebar.ejs @@ -72,34 +72,25 @@ -