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

Added dynamic container to improve settings page rendering when undersized.

Browse source
This commit is contained in:
rainbow napkin 2024-12-12 06:41:33 -05:00
parent 864304f13b
commit 59fe38a5fe
12 changed files with 234 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/controllers/api/admin/tokeCommandController.js
View file

@ -57,7 +57,6 @@ module.exports.post = async function(req, res){
res.status(400); res.status(400);
return res.send({errors: validResult.array()}) return res.send({errors: validResult.array()})
} }
}catch(err){ }catch(err){
return exceptionHandler(res, err); return exceptionHandler(res, err);
} }
@ -87,7 +86,6 @@ module.exports.delete = async function(req, res){
res.status(400); res.status(400);
return res.send({errors: validResult.array()}) return res.send({errors: validResult.array()})
} }
}catch(err){ }catch(err){
return exceptionHandler(res, err); return exceptionHandler(res, err);
} }

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

@ -15,34 +15,36 @@ 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/>.--> along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<div id="admin-channel-list-div" class="admin-list-div"> <div id="admin-channel-list-div" class="admin-list-div">
<h3>Channel List:</h3> <h3>Channel List:</h3>
<table id="admin-channel-list-table" class="admin-list-table"> <div class="dynamic-container">
<tr id="admin-channel-list-entry-title" class="admin-list-entry-title-row"> <table id="admin-channel-list-table" class="admin-list-table">
<td id="admin-channel-list-entry-img-title" class=" admin-list-entry-title admin-list-entry-item admin-list-entry-img-title"> <tr id="admin-channel-list-entry-title" class="admin-list-entry-title-row">
<h3>Img</h3> <td id="admin-channel-list-entry-img-title" class=" admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
</td> <h3>Img</h3>
<td id="admin-channel-list-entry-name-title" class=" admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Name</h3> <td id="admin-channel-list-entry-name-title" class=" admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Name</h3>
<td id="admin-channel-list-entry-description-title" class=" admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Description</h3> <td id="admin-channel-list-entry-description-title" class=" admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Description</h3>
</tr> </td>
<% chanGuide.forEach((channel) => { %> </tr>
<tr id="admin-channel-list-entry-<%- channel.name %>" class=""> <% chanGuide.forEach((channel) => { %>
<td id="admin-channel-list-entry-img-<%- channel.name %>" class=" admin-list-entry-item"> <tr id="admin-channel-list-entry-<%- channel.name %>" class="">
<a href="/c/<%- channel.name %>" class=" admin-list-entry-item"> <td id="admin-channel-list-entry-img-<%- channel.name %>" class=" admin-list-entry-item">
<img id="admin-channel-list-entry-img-<%- channel.name %>" class=" admin-list-entry-item" src="<%- channel.thumbnail %>"> <a href="/c/<%- channel.name %>" class=" admin-list-entry-item">
</a> <img id="admin-channel-list-entry-img-<%- channel.name %>" class=" admin-list-entry-item" src="<%- channel.thumbnail %>">
</td> </a>
<td id="admin-channel-list-entry-name-<%- channel.name %>" class=" admin-list-entry-item not-first-col"> </td>
<a href="/c/<%- channel.name %>" class=" admin-list-entry-item"> <td id="admin-channel-list-entry-name-<%- channel.name %>" class=" admin-list-entry-item not-first-col">
<%- channel.name %> <a href="/c/<%- channel.name %>" class=" admin-list-entry-item">
</a> <%- channel.name %>
</td> </a>
<td id="admin-channel-list-entry-description-<%- channel.name %>" class="large admin-list-entry-item not-first-col"> </td>
<%- channel.description %> <td id="admin-channel-list-entry-description-<%- channel.name %>" class="large admin-list-entry-item not-first-col">
</td> <%- channel.description %>
</tr> </td>
<% }); %> </tr>
</table> <% }); %>
</table>
</div>
</div> </div>

56
src/views/partial/adminPanel/permList.ejs
View file

@ -15,31 +15,33 @@ 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/>.--> along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<div id="admin-perm-list-div" class="admin-list-div"> <div id="admin-perm-list-div" class="admin-list-div">
<h3>Permissions:</h3> <h3>Permissions:</h3>
<form action="javascript:" id="admin-perm-list-field" class="admin-list-field"> <div class="dynamic-container">
<% Object.keys(permList).forEach((key)=>{ %> <form action="javascript:" id="admin-perm-list-field" class="admin-list-field">
<% if(key != "channelOverrides"){ %> <% Object.keys(permList).forEach((key)=>{ %>
<span class="admin-list-field-container"> <% if(key != "channelOverrides"){ %>
<label id="admin-perm-list-label-<%- key %>" class="admin-list-label admin-perm-list" for="admin-perm-list-rank-select-<%- key %>"><%- key %>: </label> <span class="admin-list-field-container">
<select id="admin-perm-list-rank-select-<%- key %>" name="admin-perm-list-rank-select-<%- key %>" class="admin-list-select admin-perm-list-rank-select"> <label id="admin-perm-list-label-<%- key %>" class="admin-list-label admin-perm-list" for="admin-perm-list-rank-select-<%- key %>"><%- key %>: </label>
<%rankEnum.slice().reverse().forEach((rank)=>{ %> <select id="admin-perm-list-rank-select-<%- key %>" name="admin-perm-list-rank-select-<%- key %>" class="admin-list-select admin-perm-list-rank-select">
<option <%if(permList[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option> <%rankEnum.slice().reverse().forEach((rank)=>{ %>
<% }); %> <option <%if(permList[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option>
</select> <% }); %>
</span> </select>
<% } %> </span>
<% }); %> <% } %>
<h4 class="admin-list-field-container">Channel Overrides:</h4> <% }); %>
<% Object.keys(permList.channelOverrides).forEach((key)=>{ %> <h4 class="admin-list-field-container">Channel Overrides:</h4>
<% if(key != "channelOverrides"){ %> <% Object.keys(permList.channelOverrides).forEach((key)=>{ %>
<span class="admin-list-field-container"> <% if(key != "channelOverrides"){ %>
<label id="admin-chan-perm-list-label-<%- key %>" class="admin-list-label admin-chan-perm-list" for="admin-chan-perm-list-rank-select-<%- key %>"><%- key %>: </label> <span class="admin-list-field-container">
<select id="admin-chan-perm-list-rank-select-<%- key %>" name="admin-chan-perm-list-rank-select-<%- key %>" class="admin-list-select admin-chan-perm-list-rank-select"> <label id="admin-chan-perm-list-label-<%- key %>" class="admin-list-label admin-chan-perm-list" for="admin-chan-perm-list-rank-select-<%- key %>"><%- key %>: </label>
<%rankEnum.slice().reverse().forEach((rank)=>{ %> <select id="admin-chan-perm-list-rank-select-<%- key %>" name="admin-chan-perm-list-rank-select-<%- key %>" class="admin-list-select admin-chan-perm-list-rank-select">
<option <%if(permList.channelOverrides[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option> <%rankEnum.slice().reverse().forEach((rank)=>{ %>
<% }); %> <option <%if(permList.channelOverrides[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option>
</select> <% }); %>
</span> </select>
<% } %> </span>
<% }); %> <% } %>
</form> <% }); %>
</form>
</div>
</div> </div>

18
src/views/partial/adminPanel/tokeCommandList.ejs Normal file
View file

@ -0,0 +1,18 @@
<!--Canopy - The next generation of stoner streaming software
Copyright (C) 2024 Rainbownapkin and the TTN Community
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
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>Toke Command List:</h3>
</div>

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

@ -15,32 +15,34 @@ 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/>.--> along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<div id="admin-ban-list-div" class="admin-list-div"> <div id="admin-ban-list-div" class="admin-list-div">
<h3>User Ban List:</h3> <h3>User Ban List:</h3>
<table id="admin-ban-list-table" class="admin-list-table"> <div class="dynamic-container">
<tr id="admin-ban-list-entry-title" class="admin-list-entry-title-row"> <table id="admin-ban-list-table" class="admin-list-table">
<td id="admin-ban-list-entry-img-title" class="admin-list-entry-title admin-list-entry-item admin-list-entry-img-title"> <tr id="admin-ban-list-entry-title" class="admin-list-entry-title-row">
<h3>Img</h3> <td id="admin-ban-list-entry-img-title" class="admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
</td> <h3>Img</h3>
<td id="admin-ban-list-entry-id-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>ID</h3> <td id="admin-ban-list-entry-id-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>ID</h3>
<td id="admin-ban-list-entry-name-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Name</h3> <td id="admin-ban-list-entry-name-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Name</h3>
<td id="admin-ban-list-entry-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Sign-Up<br>Date</h3> <td id="admin-ban-list-entry-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Sign-Up<br>Date</h3>
<td id="admin-ban-list-entry-ban-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Ban<br>Date</h3> <td id="admin-ban-list-entry-ban-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Ban<br>Date</h3>
<td id="admin-ban-list-entry-expiration-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Expires</h3> <td id="admin-ban-list-entry-expiration-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Expires</h3>
<td id="admin-ban-list-entry-expiration-type-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Expiration<br>Action</h3> <td id="admin-ban-list-entry-expiration-type-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Expiration<br>Action</h3>
<td id="admin-ban-list-entry-actions-type-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
&nbsp; <td id="admin-ban-list-entry-actions-type-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> &nbsp;
</tr> </td>
</table> </tr>
</table>
</div>
</div> </div>

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

@ -15,69 +15,71 @@ 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/>.--> along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<div id="admin-user-list-div" class="admin-list-div"> <div id="admin-user-list-div" class="admin-list-div">
<h3>User List:</h3> <h3>User List:</h3>
<table id="admin-user-list-table" class="admin-list-table"> <div class="dynamic-container">
<tr id="admin-user-list-entry-title" class="admin-list-entry-title-row"> <table id="admin-user-list-table" class="admin-list-table">
<td id="admin-user-list-entry-img-title" class="admin-list-entry-title admin-list-entry-item admin-list-entry-img-title"> <tr id="admin-user-list-entry-title" class="admin-list-entry-title-row">
<h3>Img</h3> <td id="admin-user-list-entry-img-title" class="admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
</td> <h3>Img</h3>
<td id="admin-user-list-entry-id-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>ID</h3> <td id="admin-user-list-entry-id-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>ID</h3>
<td id="admin-user-list-entry-name-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Name</h3> <td id="admin-user-list-entry-name-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Name</h3>
<td id="admin-user-list-entry-rank-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Rank</h3> <td id="admin-user-list-entry-rank-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Rank</h3>
<td id="admin-user-list-entry-mail-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>E-Mail</h3> <td id="admin-user-list-entry-mail-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>E-Mail</h3>
<td id="admin-user-list-entry-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
<h3>Sign-Up<br>Date</h3> <td id="admin-user-list-entry-date-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> <h3>Sign-Up<br>Date</h3>
<td id="admin-user-list-entry-control-title" class="admin-list-entry-title admin-list-entry-item not-first-col"> </td>
&nbsp; <td id="admin-user-list-entry-control-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
</td> &nbsp;
</tr> </td>
<% userList.forEach((curUser) => { %> </tr>
<tr id="admin-user-list-entry-<%- curUser.user %>" class="admin-list-entry"> <% userList.forEach((curUser) => { %>
<td id="admin-user-list-entry-img-<%- curUser.user %>" class="admin-list-entry-item"> <tr id="admin-user-list-entry-<%- curUser.user %>" class="admin-list-entry">
<a href="/profile/<%- curUser.user %>" class="admin-list-entry-item"> <td id="admin-user-list-entry-img-<%- curUser.user %>" class="admin-list-entry-item">
<img id="admin-user-list-entry-img-<%- curUser.user %>" class="admin-list-entry-item" src="<%- curUser.img %>"> <a href="/profile/<%- curUser.user %>" class="admin-list-entry-item">
</a> <img id="admin-user-list-entry-img-<%- curUser.user %>" class="admin-list-entry-item" src="<%- curUser.img %>">
</td> </a>
<td id="admin-user-list-entry-id-<%- curUser.user %>" class="admin-list-entry-item not-first-col"> </td>
<a href="/profile/<%- curUser.user %>" class="admin-list-entry-item"> <td id="admin-user-list-entry-id-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
<%- curUser.id %> <a href="/profile/<%- curUser.user %>" class="admin-list-entry-item">
</a> <%- curUser.id %>
</td> </a>
<td id="admin-user-list-entry-name-<%- curUser.user %>" class="admin-list-entry-item not-first-col"> </td>
<a href="/profile/<%- curUser.user %>" class="admin-list-entry-item"> <td id="admin-user-list-entry-name-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
<%- curUser.user %> <a href="/profile/<%- curUser.user %>" class="admin-list-entry-item">
</a> <%- curUser.user %>
</td> </a>
<td id="admin-user-list-entry-rank-<%- curUser.user %>" class="admin-list-entry-item not-first-col"> </td>
<% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%> <td id="admin-user-list-entry-rank-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
<select id="admin-user-list-rank-select-<%- curUser.user %>" class="admin-user-list-rank-select"> <% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%>
<%rankEnum.slice().reverse().forEach((rank)=>{ %> <select id="admin-user-list-rank-select-<%- curUser.user %>" class="admin-user-list-rank-select">
<option <%if(curUser.rank == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option> <%rankEnum.slice().reverse().forEach((rank)=>{ %>
<% }); %> <option <%if(curUser.rank == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option>
</select> <% }); %>
<% }else{ %> </select>
<%- curUser.rank %> <% }else{ %>
<% } %> <%- curUser.rank %>
</td> <% } %>
<td id="admin-user-list-entry-email-<%- curUser.user %>" class="admin-list-entry-item not-first-col"> </td>
<%- curUser.email ? curUser.email : "N/A" %> <td id="admin-user-list-entry-email-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
</td> <%- curUser.email ? curUser.email : "N/A" %>
<td id="admin-user-list-entry-date-<%- curUser.user %>" class="admin-list-entry-item not-first-col"> </td>
<%- curUser.date.toUTCString() %> <td id="admin-user-list-entry-date-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
</td> <%- curUser.date.toUTCString() %>
<td id="admin-user-list-entry-action-<%- curUser.user %>" class="admin-list-entry-item not-first-col"> </td>
<!-- It's either this or add whitespce >:( --> <td id="admin-user-list-entry-action-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
<i class="bi-radioactive admin-user-list-icon admin-user-list-nuke-icon" id="admin-user-list-nuke-icon-<%- curUser.user %>" title="Nuke Account: <%- curUser.user %>"></i><i class="bi-fire admin-user-list-icon admin-user-list-ban-icon" id="admin-user-list-ban-icon-<%- curUser.user %>" title="Ban User: <%- curUser.user %>"></i><i class="bi-arrow-clockwise admin-user-list-icon admin-user-list-pw-reset-icon" id="admin-user-list-pw-reset-icon-<%- curUser.user %>" title="Generate Password Reset Link for <%- curUser.user %>"></i> <!-- It's either this or add whitespce >:( -->
</td> <i class="bi-radioactive admin-user-list-icon admin-user-list-nuke-icon" id="admin-user-list-nuke-icon-<%- curUser.user %>" title="Nuke Account: <%- curUser.user %>"></i><i class="bi-fire admin-user-list-icon admin-user-list-ban-icon" id="admin-user-list-ban-icon-<%- curUser.user %>" title="Ban User: <%- curUser.user %>"></i><i class="bi-arrow-clockwise admin-user-list-icon admin-user-list-pw-reset-icon" id="admin-user-list-pw-reset-icon-<%- curUser.user %>" title="Generate Password Reset Link for <%- curUser.user %>"></i>
</tr> </td>
<% }); %> </tr>
</table> <% }); %>
</table>
</div>
</div> </div>

26
src/views/partial/channelSettings/banList.ejs
View file

@ -19,16 +19,18 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<input placeholder="Add Username..." id="new-ban-input" class="control-prompt"> <input placeholder="Add Username..." id="new-ban-input" class="control-prompt">
<button id="new-ban-button" class="danger-button">Ban</button> <button id="new-ban-button" class="danger-button">Ban</button>
</div> </div>
<table id="admin-ban-list-table" class="admin-list-table"> <div class="dynamic-container">
<tr class="admin-list-entry-title-row"> <table id="admin-ban-list-table" class="admin-list-table">
<td class="admin-list-entry-item admin-list-entry-img-title"><h3>Img</h3></td> <tr class="admin-list-entry-title-row">
<td id="admin-user-list-entry-id-title" class="admin-list-entry-item not-first-col"><h3>ID</h3></td> <td class="admin-list-entry-item admin-list-entry-img-title"><h3>Img</h3></td>
<td class="admin-list-entry-item not-first-col"><h3>Name</h3></td> <td id="admin-user-list-entry-id-title" class="admin-list-entry-item not-first-col"><h3>ID</h3></td>
<td class="admin-list-entry-item not-first-col"><h3>Ban<br>Alts</h3></td> <td class="admin-list-entry-item not-first-col"><h3>Name</h3></td>
<td id="channel-user-list-entry-ban-date-title" class="admin-list-entry-item not-first-col"><h3>Ban Date</h3></td> <td class="admin-list-entry-item not-first-col"><h3>Ban<br>Alts</h3></td>
<td id="channel-user-list-entry-expiration-date-title" class="admin-list-entry-item not-first-col"><h3>Expires</h3></td> <td id="channel-user-list-entry-ban-date-title" class="admin-list-entry-item not-first-col"><h3>Ban Date</h3></td>
<td id="channel-user-list-entry-actions-title" class="admin-list-entry-item not-first-col">&nbsp;</td> <td id="channel-user-list-entry-expiration-date-title" class="admin-list-entry-item not-first-col"><h3>Expires</h3></td>
</tr> <td id="channel-user-list-entry-actions-title" class="admin-list-entry-item not-first-col">&nbsp;</td>
<!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. --> </tr>
</table> <!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
</table>
</div>
</div> </div>

30
src/views/partial/channelSettings/permList.ejs
View file

@ -15,18 +15,20 @@ 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/>.--> along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<div class="admin-list-div"> <div class="admin-list-div">
<h3> Permissions:</h3> <h3> Permissions:</h3>
<form action="javascript:" class="admin-list-field"> <div class="dynamic-container">
<% Object.keys(channel.permissions.toObject()).forEach((key)=>{ %> <form action="javascript:" class="admin-list-field">
<% if(key != "channelOverrides"){ %> <% Object.keys(channel.permissions.toObject()).forEach((key)=>{ %>
<span class="admin-list-field-container"> <% if(key != "channelOverrides"){ %>
<label id="admin-perm-list-label-<%- key %>" class="admin-list-label admin-perm-list" for="admin-perm-list-rank-select-<%- key %>"><%- key %>: </label> <span class="admin-list-field-container">
<select id="admin-perm-list-rank-select-<%- key %>" name="admin-perm-list-rank-select-<%- key %>" class="channel-perm-select admin-list-select admin-perm-list-rank-select"> <label id="admin-perm-list-label-<%- key %>" class="admin-list-label admin-perm-list" for="admin-perm-list-rank-select-<%- key %>"><%- key %>: </label>
<%rankEnum.slice().reverse().forEach((rank)=>{ %> <select id="admin-perm-list-rank-select-<%- key %>" name="admin-perm-list-rank-select-<%- key %>" class="channel-perm-select admin-list-select admin-perm-list-rank-select">
<option <%if(channel.permissions.toObject()[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option> <%rankEnum.slice().reverse().forEach((rank)=>{ %>
<% }); %> <option <%if(channel.permissions.toObject()[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option>
</select> <% }); %>
</span> </select>
<% } %> </span>
<% }); %> <% } %>
</form> <% }); %>
</form>
</div>
</div> </div>

18
src/views/partial/channelSettings/settings.ejs
View file

@ -15,12 +15,14 @@ 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/>.--> along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<div class="admin-list-div"> <div class="admin-list-div">
<h3>Channel Preferences:</h3> <h3>Channel Preferences:</h3>
<form action="javascript:" class="admin-list-field"> <div class="dynamic-container">
<% Object.keys(channel.settings).forEach((key) => { %> <form action="javascript:" class="admin-list-field">
<span class="admin-list-field-container"> <% Object.keys(channel.settings).forEach((key) => { %>
<label class="admin-list-label"><%- key %>:</label> <span class="admin-list-field-container">
<input id=<%- `channel-preference-${key}` %> class="channel-preference-list-item" type="checkbox" <% if(channel.settings[key]){ %> checked <% } %>> <label class="admin-list-label"><%- key %>:</label>
</span> <input id=<%- `channel-preference-${key}` %> class="channel-preference-list-item" type="checkbox" <% if(channel.settings[key]){ %> checked <% } %>>
<% }); %> </span>
</form> <% }); %>
</form>
</div>
</div> </div>

20
src/views/partial/channelSettings/userList.ejs
View file

@ -24,13 +24,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<% }); %> <% }); %>
</select> </select>
</div> </div>
<table class="admin-list-table"> <div class="dynamic-container">
<tr class="admin-list-entry-title-row"> <table class="admin-list-table">
<td class="admin-list-entry-item admin-list-entry-img-title"><h3>Img</h3></td> <tr class="admin-list-entry-title-row">
<td id="admin-user-list-entry-id-title" class="admin-list-entry-item not-first-col"><h3>ID</h3></td> <td class="admin-list-entry-item admin-list-entry-img-title"><h3>Img</h3></td>
<td class="admin-list-entry-item not-first-col"><h3>Name</h3></td> <td id="admin-user-list-entry-id-title" class="admin-list-entry-item not-first-col"><h3>ID</h3></td>
<td id="channel-user-list-entry-rank-title" class="admin-list-entry-item not-first-col"><h3>Rank</h3></td> <td class="admin-list-entry-item not-first-col"><h3>Name</h3></td>
</tr> <td id="channel-user-list-entry-rank-title" class="admin-list-entry-item not-first-col"><h3>Rank</h3></td>
<!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. --> </tr>
</table> <!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
</table>
</div>
</div> </div>

6
www/css/global.css
View file

@ -30,10 +30,12 @@ body{
form{ form{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1em;
} }
table{ table{
border-spacing: 0px; border-spacing: 0px;
width: 100%
} }
td{ td{
@ -65,6 +67,10 @@ input.control-prompt{
flex: 1; flex: 1;
} }
div.dynamic-container{
overflow: auto;
}
/* Navbar */ /* Navbar */
#navbar{ #navbar{
display: flex; display: flex;

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

@ -137,16 +137,13 @@ button:active{
background-color: var(--focus0-alt1); background-color: var(--focus0-alt1);
} }
table, form{ .dynamic-container{
background-color: var(--bg1); background-color: var(--bg1);
color: var(--accent1); color: var(--accent1);
box-shadow: 3px 3px 1px var(--bg1-alt0) inset; box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
border-radius: 1em; border-radius: 1em;
} }
form{
padding: 1em;
}
tr{ tr{
box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em; box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;