Added resizable/scrollable lists on admin panel
This commit is contained in:
parent
a9f083dcc6
commit
3c37080cb7
9 changed files with 156 additions and 134 deletions
|
|
@ -15,36 +15,40 @@ 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">
|
||||
<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>
|
||||
</td>
|
||||
<td id="admin-channel-list-entry-name-title" class=" admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Name</h3>
|
||||
</td>
|
||||
<td id="admin-channel-list-entry-description-title" class=" admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Description</h3>
|
||||
</td>
|
||||
</tr>
|
||||
<% 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">
|
||||
<a href="/c/<%= encodeURI(unescape(channel.name)) %>" class=" admin-list-entry-item">
|
||||
<img id="admin-channel-list-entry-img-<%= unescape(channel.name) %>" class=" admin-list-entry-item" src="<%= encodeURI(unescape(channel.thumbnail)) %>">
|
||||
</a>
|
||||
</td>
|
||||
<td id="admin-channel-list-entry-name-<%= unescape(channel.name) %>" class=" admin-list-entry-item not-first-col">
|
||||
<a href="/c/<%= unescape(channel.name) %>" class=" admin-list-entry-item">
|
||||
<%= unescape(channel.name) %>
|
||||
</a>
|
||||
</td>
|
||||
<td id="admin-channel-list-entry-description-<%= unescape(channel.name) %>" class="large admin-list-entry-item not-first-col">
|
||||
<%= unescape(channel.description) %>
|
||||
</td>
|
||||
</tr>
|
||||
<% }); %>
|
||||
<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>
|
||||
</td>
|
||||
<td id="admin-channel-list-entry-name-title" class=" admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Name</h3>
|
||||
</td>
|
||||
<td id="admin-channel-list-entry-description-title" class=" admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<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">
|
||||
<a href="/c/<%= encodeURI(unescape(channel.name)) %>" class=" admin-list-entry-item">
|
||||
<img id="admin-channel-list-entry-img-<%= unescape(channel.name) %>" class=" admin-list-entry-item" src="<%= encodeURI(unescape(channel.thumbnail)) %>">
|
||||
</a>
|
||||
</td>
|
||||
<td id="admin-channel-list-entry-name-<%= unescape(channel.name) %>" class=" admin-list-entry-item not-first-col">
|
||||
<a href="/c/<%= unescape(channel.name) %>" class=" admin-list-entry-item">
|
||||
<%= unescape(channel.name) %>
|
||||
</a>
|
||||
</td>
|
||||
<td id="admin-channel-list-entry-description-<%= unescape(channel.name) %>" class="large admin-list-entry-item not-first-col">
|
||||
<%= unescape(channel.description) %>
|
||||
</td>
|
||||
</tr>
|
||||
<% }); %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -15,34 +15,38 @@ 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">
|
||||
<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>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-alts-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Alt<br>Users</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-ban-nuked-users-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Nuked<br>Users</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-ban-ips-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Banned<br>IPs</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-ban-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Ban<br>Date</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-expiration-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Expires</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-expiration-type-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Expiration<br>Action</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-actions-type-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<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>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-alts-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Alt<br>Users</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-ban-nuked-users-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Nuked<br>Users</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-ban-ips-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Banned<br>IPs</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-ban-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Ban<br>Date</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-expiration-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Expires</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-expiration-type-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Expiration<br>Action</h3>
|
||||
</td>
|
||||
<td id="admin-ban-list-entry-actions-type-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -15,71 +15,75 @@ 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">
|
||||
<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>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-id-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>ID</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-name-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Name</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-rank-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Rank</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-mail-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>E-Mail</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Sign-Up<br>Date</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-control-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<% 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">
|
||||
<a href="/profile/<%= unescape(curUser.user) %>" class="admin-list-entry-item">
|
||||
<img class="admin-list-entry-item" src="<%= encodeURI(unescape(curUser.img)) %>">
|
||||
</a>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<a href="/profile/<%= encodeURI(unescape(curUser.user)) %>" class="admin-list-entry-item">
|
||||
<%= curUser.id %>
|
||||
</a>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<a href="/profile/<%= encodeURI(unescape(curUser.user)) %>" class="admin-list-entry-item admin-user-list-name">
|
||||
<%= unescape(curUser.user) %>
|
||||
</a>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%>
|
||||
<select id="admin-user-list-rank-select-<%= unescape(curUser.user) %>" class="admin-user-list-rank-select">
|
||||
<%rankEnum.slice().reverse().forEach((rank)=>{ %>
|
||||
<option <%if(curUser.rank == rank){%> selected <%}%> value="<%= rank %>"><%= rank %></option>
|
||||
<% }); %>
|
||||
</select>
|
||||
<% }else{ %>
|
||||
<%= curUser.rank %>
|
||||
<% } %>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<%= unescape(curUser.email) ? curUser.email : "N/A" %>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<%= unescape(curUser.date.toUTCString()) %>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<%# It's either this or add whitespce >:( %>
|
||||
<i class="bi-radioactive admin-user-list-icon admin-user-list-nuke-icon" title="Nuke Account: <%= unescape(curUser.user) %>"></i><i class="bi-fire admin-user-list-icon admin-user-list-ban-icon" title="Ban User: <%= unescape(curUser.user) %>"></i><i class="bi-arrow-clockwise admin-user-list-icon admin-user-list-pw-reset-icon" title="Generate Password Reset Link for <%= unescape(curUser.user) %>"></i>
|
||||
</td>
|
||||
</tr>
|
||||
<% }); %>
|
||||
<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>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-id-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>ID</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-name-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Name</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-rank-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Rank</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-mail-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>E-Mail</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
<h3>Sign-Up<br>Date</h3>
|
||||
</td>
|
||||
<td id="admin-user-list-entry-control-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
|
||||
|
||||
</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">
|
||||
<a href="/profile/<%= unescape(curUser.user) %>" class="admin-list-entry-item">
|
||||
<img class="admin-list-entry-item" src="<%= encodeURI(unescape(curUser.img)) %>">
|
||||
</a>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<a href="/profile/<%= encodeURI(unescape(curUser.user)) %>" class="admin-list-entry-item">
|
||||
<%= curUser.id %>
|
||||
</a>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<a href="/profile/<%= encodeURI(unescape(curUser.user)) %>" class="admin-list-entry-item admin-user-list-name">
|
||||
<%= unescape(curUser.user) %>
|
||||
</a>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%>
|
||||
<select id="admin-user-list-rank-select-<%= unescape(curUser.user) %>" class="admin-user-list-rank-select">
|
||||
<%rankEnum.slice().reverse().forEach((rank)=>{ %>
|
||||
<option <%if(curUser.rank == rank){%> selected <%}%> value="<%= rank %>"><%= rank %></option>
|
||||
<% }); %>
|
||||
</select>
|
||||
<% }else{ %>
|
||||
<%= curUser.rank %>
|
||||
<% } %>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<%= unescape(curUser.email) ? curUser.email : "N/A" %>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<%= unescape(curUser.date.toUTCString()) %>
|
||||
</td>
|
||||
<td class="admin-list-entry-item not-first-col">
|
||||
<%# It's either this or add whitespce >:( %>
|
||||
<i class="bi-radioactive admin-user-list-icon admin-user-list-nuke-icon" title="Nuke Account: <%= unescape(curUser.user) %>"></i><i class="bi-fire admin-user-list-icon admin-user-list-ban-icon" title="Ban User: <%= unescape(curUser.user) %>"></i><i class="bi-arrow-clockwise admin-user-list-icon admin-user-list-pw-reset-icon" title="Generate Password Reset Link for <%= unescape(curUser.user) %>"></i>
|
||||
</td>
|
||||
</tr>
|
||||
<% }); %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue