rainbownapkin/canopy
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Added resizable/scrollable lists on admin panel

Browse source
This commit is contained in:
rainbow napkin 2026-10-28 20:18:10 -04:00
parent a9f083dcc6
commit 3c37080cb7
9 changed files with 156 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/views/partial/adminPanel/channelList.ejs
View file

@ -15,8 +15,9 @@ You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<div id="admin-channel-list-div" class="admin-list-div">
<h3>Channel List:</h3>
<div class="dynamic-container">
<div class="dynamic-container resizable table-container">
<table id="admin-channel-list-table" class="admin-list-table">
<thead>
<tr id="admin-channel-list-entry-title" class="admin-list-entry-title-row">
<td id="admin-channel-list-entry-img-title" class=" admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
<h3>Img</h3>
@ -28,6 +29,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<h3>Description</h3>
</td>
</tr>
</thead>
<tbody>
<% chanGuide.forEach((channel) => { %>
<tr id="admin-channel-list-entry-<%= unescape(channel.name) %>" class="">
<td id="admin-channel-list-entry-img-<%= unescape(channel.name) %>" class=" admin-list-entry-item">
@ -45,6 +48,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>

2
src/views/partial/adminPanel/emoteList.ejs
View file

@ -23,6 +23,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<div class="control-prompt">
<input placeholder="Emote Link..." id="new-emote-link-input" class="control-prompt">
</div>
<div class="dynamic-container" id="emote-list">
<div class="dynamic-container resizable" id="emote-list">
</div>
</div>

2
src/views/partial/adminPanel/tokeCommandList.ejs
View file

@ -19,6 +19,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
!<input placeholder="Add Command..." id="new-toke-command-input" class="control-prompt">
<button id="new-toke-command-button" class="positive-button">Add</button>
</div>
<div class="dynamic-container toke-command-list">
<div class="dynamic-container toke-command-list resizable">
</div>
</div>

6
src/views/partial/adminPanel/userBanList.ejs
View file

@ -15,8 +15,9 @@ You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<div id="admin-ban-list-div" class="admin-list-div">
<h3>User Ban List:</h3>
<div class="dynamic-container">
<div class="dynamic-container resizable table-container">
<table id="admin-ban-list-table" class="admin-list-table">
<thead>
<tr id="admin-ban-list-entry-title" class="admin-list-entry-title-row">
<td id="admin-ban-list-entry-user-title" class="admin-list-entry-title admin-list-entry-item">
<h3>Main<br>User</h3>
@ -43,6 +44,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
&nbsp;
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>

6
src/views/partial/adminPanel/userList.ejs
View file

@ -15,8 +15,9 @@ You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<div id="admin-user-list-div" class="admin-list-div">
<h3>User List:</h3>
<div class="dynamic-container resizable">
<div class="dynamic-container resizable table-container">
<table id="admin-user-list-table" class="admin-list-table">
<thead>
<tr id="admin-user-list-entry-title" class="admin-list-entry-title-row">
<td id="admin-user-list-entry-img-title" class="admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
<h3>Img</h3>
@ -40,6 +41,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
&nbsp;
</td>
</tr>
</thead>
<tbody>
<% userList.forEach((curUser) => { %>
<tr id="admin-user-list-entry-<%= unescape(curUser.user) %>" class="admin-list-entry" data-name="<%= unescape(curUser.user) %>" >
<td class="admin-list-entry-item">
@ -80,6 +83,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>

12
www/css/global.css
View file

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

4
www/css/theme/movie-night.css
View file

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

5
www/css/theme/the-network-classic.css
View file

@ -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;
}

13
www/js/adminPanel.js
View file

@ -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),