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

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
Download patch file Download diff file Expand all files Collapse all files

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">
<button id="new-ban-button" class="danger-button">Ban</button>
</div>
<table id="admin-ban-list-table" class="admin-list-table">
<tr class="admin-list-entry-title-row">
<td class="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-item not-first-col"><h3>ID</h3></td>
<td class="admin-list-entry-item not-first-col"><h3>Name</h3></td>
<td class="admin-list-entry-item not-first-col"><h3>Ban<br>Alts</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-expiration-date-title" class="admin-list-entry-item not-first-col"><h3>Expires</h3></td>
<td id="channel-user-list-entry-actions-title" class="admin-list-entry-item not-first-col">&nbsp;</td>
</tr>
<!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
</table>
<div class="dynamic-container">
<table id="admin-ban-list-table" class="admin-list-table">
<tr class="admin-list-entry-title-row">
<td class="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-item not-first-col"><h3>ID</h3></td>
<td class="admin-list-entry-item not-first-col"><h3>Name</h3></td>
<td class="admin-list-entry-item not-first-col"><h3>Ban<br>Alts</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-expiration-date-title" class="admin-list-entry-item not-first-col"><h3>Expires</h3></td>
<td id="channel-user-list-entry-actions-title" class="admin-list-entry-item not-first-col">&nbsp;</td>
</tr>
<!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
</table>
</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/>.-->
<div class="admin-list-div">
<h3> Permissions:</h3>
<form action="javascript:" class="admin-list-field">
<% Object.keys(channel.permissions.toObject()).forEach((key)=>{ %>
<% if(key != "channelOverrides"){ %>
<span class="admin-list-field-container">
<label id="admin-perm-list-label-<%- key %>" class="admin-list-label admin-perm-list" for="admin-perm-list-rank-select-<%- key %>"><%- key %>: </label>
<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">
<%rankEnum.slice().reverse().forEach((rank)=>{ %>
<option <%if(channel.permissions.toObject()[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option>
<% }); %>
</select>
</span>
<% } %>
<% }); %>
</form>
<div class="dynamic-container">
<form action="javascript:" class="admin-list-field">
<% Object.keys(channel.permissions.toObject()).forEach((key)=>{ %>
<% if(key != "channelOverrides"){ %>
<span class="admin-list-field-container">
<label id="admin-perm-list-label-<%- key %>" class="admin-list-label admin-perm-list" for="admin-perm-list-rank-select-<%- key %>"><%- key %>: </label>
<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">
<%rankEnum.slice().reverse().forEach((rank)=>{ %>
<option <%if(channel.permissions.toObject()[key] == rank){%> selected <%}%> value="<%- rank %>"><%- rank %></option>
<% }); %>
</select>
</span>
<% } %>
<% }); %>
</form>
</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/>.-->
<div class="admin-list-div">
<h3>Channel Preferences:</h3>
<form action="javascript:" class="admin-list-field">
<% Object.keys(channel.settings).forEach((key) => { %>
<span class="admin-list-field-container">
<label class="admin-list-label"><%- key %>:</label>
<input id=<%- `channel-preference-${key}` %> class="channel-preference-list-item" type="checkbox" <% if(channel.settings[key]){ %> checked <% } %>>
</span>
<% }); %>
</form>
<div class="dynamic-container">
<form action="javascript:" class="admin-list-field">
<% Object.keys(channel.settings).forEach((key) => { %>
<span class="admin-list-field-container">
<label class="admin-list-label"><%- key %>:</label>
<input id=<%- `channel-preference-${key}` %> class="channel-preference-list-item" type="checkbox" <% if(channel.settings[key]){ %> checked <% } %>>
</span>
<% }); %>
</form>
</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>
</div>
<table class="admin-list-table">
<tr class="admin-list-entry-title-row">
<td class="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-item not-first-col"><h3>ID</h3></td>
<td class="admin-list-entry-item not-first-col"><h3>Name</h3></td>
<td id="channel-user-list-entry-rank-title" class="admin-list-entry-item not-first-col"><h3>Rank</h3></td>
</tr>
<!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
</table>
<div class="dynamic-container">
<table class="admin-list-table">
<tr class="admin-list-entry-title-row">
<td class="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-item not-first-col"><h3>ID</h3></td>
<td class="admin-list-entry-item not-first-col"><h3>Name</h3></td>
<td id="channel-user-list-entry-rank-title" class="admin-list-entry-item not-first-col"><h3>Rank</h3></td>
</tr>
<!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
</table>
</div>
</div>