Added resizable/scrollable lists on admin panel

src/views/partial/adminPanel/channelList.ejs

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

src/views/partial/adminPanel/emoteList.ejs

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

src/views/partial/adminPanel/tokeCommandList.ejs

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

src/views/partial/adminPanel/userBanList.ejs

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

src/views/partial/adminPanel/userList.ejs

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

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;

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;

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

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