From 3c37080cb73c295b89a401905a479651c3abde84 Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Wed, 28 Oct 2026 20:18:10 -0400 Subject: [PATCH] Added resizable/scrollable lists on admin panel --- src/views/partial/adminPanel/channelList.ejs | 62 ++++---- src/views/partial/adminPanel/emoteList.ejs | 2 +- .../partial/adminPanel/tokeCommandList.ejs | 2 +- src/views/partial/adminPanel/userBanList.ejs | 58 ++++---- src/views/partial/adminPanel/userList.ejs | 132 +++++++++--------- www/css/global.css | 12 +- www/css/theme/movie-night.css | 4 + www/css/theme/the-network-classic.css | 5 + www/js/adminPanel.js | 13 +- 9 files changed, 156 insertions(+), 134 deletions(-) diff --git a/src/views/partial/adminPanel/channelList.ejs b/src/views/partial/adminPanel/channelList.ejs index c92fe2a..8ecbacf 100644 --- a/src/views/partial/adminPanel/channelList.ejs +++ b/src/views/partial/adminPanel/channelList.ejs @@ -15,36 +15,40 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . %>

Channel List:

-
+
- - - - - - <% chanGuide.forEach((channel) => { %> - - - - - - <% }); %> + + + + + + + + + <% chanGuide.forEach((channel) => { %> + + + + + + <% }); %> +
-

Img

- 		-

Name

- 		-

Description

-
- - - - - - <%= unescape(channel.name) %> - - - <%= unescape(channel.description) %> -
+

Img

+ 		+

Name

+ 		+

Description

+
+ + + + + + <%= unescape(channel.name) %> + + + <%= unescape(channel.description) %> +
\ No newline at end of file diff --git a/src/views/partial/adminPanel/emoteList.ejs b/src/views/partial/adminPanel/emoteList.ejs index ba94793..78fdc2b 100644 --- a/src/views/partial/adminPanel/emoteList.ejs +++ b/src/views/partial/adminPanel/emoteList.ejs @@ -23,6 +23,6 @@ along with this program. If not, see . %>
-
+
\ No newline at end of file diff --git a/src/views/partial/adminPanel/tokeCommandList.ejs b/src/views/partial/adminPanel/tokeCommandList.ejs index 5bc5afb..2361c67 100644 --- a/src/views/partial/adminPanel/tokeCommandList.ejs +++ b/src/views/partial/adminPanel/tokeCommandList.ejs @@ -19,6 +19,6 @@ along with this program. If not, see . %> !
-
+
\ No newline at end of file diff --git a/src/views/partial/adminPanel/userBanList.ejs b/src/views/partial/adminPanel/userBanList.ejs index 4746eae..8cc6e52 100644 --- a/src/views/partial/adminPanel/userBanList.ejs +++ b/src/views/partial/adminPanel/userBanList.ejs @@ -15,34 +15,38 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . %>

User Ban List:

-
+
- - - - - - - - - - + + + + + + + + + + + + + +
-

Main
User

- 		-

Alt
Users

- 		-

Nuked
Users

- 		-

Banned
IPs

- 		-

Ban
Date

- 		-

Expires

- 		-

Expiration
Action

- 		-   -
+

Main
User

+ 		+

Alt
Users

+ 		+

Nuked
Users

+ 		+

Banned
IPs

+ 		+

Ban
Date

+ 		+

Expires

+ 		+

Expiration
Action

+ 		+   +
\ No newline at end of file diff --git a/src/views/partial/adminPanel/userList.ejs b/src/views/partial/adminPanel/userList.ejs index e517f5b..0600c7c 100644 --- a/src/views/partial/adminPanel/userList.ejs +++ b/src/views/partial/adminPanel/userList.ejs @@ -15,71 +15,75 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . %>

User List:

-
+
- - - - - - - - - - <% userList.forEach((curUser) => { %> - - - - - - - - - - <% }); %> + + + + + + + + + + + + + <% userList.forEach((curUser) => { %> + + + + + + + + + + <% }); %> +
-

Img

- 		-

ID

- 		-

Name

- 		-

Rank

- 		-

E-Mail

- 		-

Sign-Up
Date

- 		-   -
- - - - - - <%= curUser.id %> - - - - <%= unescape(curUser.user) %> - - - <% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%> - - <% }else{ %> - <%= curUser.rank %> - <% } %> - - <%= unescape(curUser.email) ? curUser.email : "N/A" %> - - <%= unescape(curUser.date.toUTCString()) %> - - <%# It's either this or add whitespce >:( %> - -
+

Img

+ 		+

ID

+ 		+

Name

+ 		+

Rank

+ 		+

E-Mail

+ 		+

Sign-Up
Date

+ 		+   +
+ + + + + + <%= curUser.id %> + + + + <%= unescape(curUser.user) %> + + + <% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%> + + <% }else{ %> + <%= curUser.rank %> + <% } %> + + <%= unescape(curUser.email) ? curUser.email : "N/A" %> + + <%= unescape(curUser.date.toUTCString()) %> + + <%# It's either this or add whitespce >:( %> + +
\ No newline at end of file diff --git a/www/css/global.css b/www/css/global.css index bb7d9c6..d3a2919 100644 --- a/www/css/global.css +++ b/www/css/global.css @@ -71,10 +71,9 @@ div.dynamic-container, div.nested-dynamic-container{ div.dynamic-container.resizable{ resize: vertical; - width: fit-content; height: fit-content; min-height: 1.5em; - max-height: 8em; + max-height: 17.5em; padding: 0.5em 0.2em; border-bottom-right-radius: 0; } @@ -84,6 +83,15 @@ div.dynamic-container.resizable[style*="height"]{ max-height: 100%; } +div.dynamic-container.table-container{ + padding-top: 0; +} + +div.dynamic-container.table-container table thead{ + position: sticky; + top: 0; +} + .interactive{ cursor: pointer; user-select: none; diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css index 4caf154..09930a2 100644 --- a/www/css/theme/movie-night.css +++ b/www/css/theme/movie-night.css @@ -257,6 +257,10 @@ textarea{ color: var(--accent1); } +div.dynamic-container.table-container table thead{ + background-color: var(--bg1); + box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px 1em 1px -1em; +} tr{ box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em; diff --git a/www/css/theme/the-network-classic.css b/www/css/theme/the-network-classic.css index 01edf2a..7ac3401 100644 --- a/www/css/theme/the-network-classic.css +++ b/www/css/theme/the-network-classic.css @@ -277,6 +277,11 @@ textarea{ color: var(--accent1); } +div.dynamic-container.table-container table thead{ + background-color: var(--bg2-alt1); + box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px 1em 1px -1em; +} + tr{ box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em; } diff --git a/www/js/adminPanel.js b/www/js/adminPanel.js index bff3f28..80e0c25 100644 --- a/www/js/adminPanel.js +++ b/www/js/adminPanel.js @@ -143,7 +143,7 @@ class adminPermissionList{ class adminUserBanList{ constructor(){ - this.table = document.querySelector("#admin-ban-list-table"); + this.tbody = document.querySelector("#admin-ban-list-table tbody"); this.getBanList(); } @@ -152,13 +152,6 @@ class adminUserBanList{ this.renderBanList(await adminUtil.getBans()); } - clearBanList(){ - const oldRows = this.table.querySelectorAll('tr.gen-row'); - oldRows.forEach((row) => { - row.remove(); - }); - } - async unban(event){ //Get username from target id const user = event.target.dataset.name; @@ -168,7 +161,7 @@ class adminUserBanList{ renderBanList(banList){ //Clear out the ban list - this.clearBanList(); + this.tbody.innerHTML = ""; //For each ban received banList.forEach((ban) => { @@ -195,7 +188,7 @@ class adminUserBanList{ } //Generate and append row to table - this.table.appendChild(utils.ux.newTableRow([ + this.tbody.appendChild(utils.ux.newTableRow([ this.renderUser(ban.user, nuked), this.renderUsers(ban.alts, nuked), this.renderDeadUsers(ban.deletedNames),