Added dynamic container to improve settings page rendering when undersized.

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

View file

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

View file

@ -15,6 +15,7 @@ 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">
<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">
@ -46,3 +47,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<% }); %>
</table>
</div>
</div>

View file

@ -15,6 +15,7 @@ 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-perm-list-div" class="admin-list-div">
<h3>Permissions:</h3>
<div class="dynamic-container">
<form action="javascript:" id="admin-perm-list-field" class="admin-list-field">
<% Object.keys(permList).forEach((key)=>{ %>
<% if(key != "channelOverrides"){ %>
@ -43,3 +44,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<% }); %>
</form>
</div>
</div>

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>

View file

@ -15,6 +15,7 @@ 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">
<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-img-title" class="admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
@ -44,3 +45,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
</tr>
</table>
</div>
</div>

View file

@ -15,6 +15,7 @@ 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">
<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">
@ -81,3 +82,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<% }); %>
</table>
</div>
</div>

View file

@ -19,6 +19,7 @@ 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>
<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>
@ -32,3 +33,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
</table>
</div>
</div>

View file

@ -15,6 +15,7 @@ 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>
<div class="dynamic-container">
<form action="javascript:" class="admin-list-field">
<% Object.keys(channel.permissions.toObject()).forEach((key)=>{ %>
<% if(key != "channelOverrides"){ %>
@ -30,3 +31,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<% }); %>
</form>
</div>
</div>

View file

@ -15,6 +15,7 @@ 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>
<div class="dynamic-container">
<form action="javascript:" class="admin-list-field">
<% Object.keys(channel.settings).forEach((key) => { %>
<span class="admin-list-field-container">
@ -24,3 +25,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<% }); %>
</form>
</div>
</div>

View file

@ -24,6 +24,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<% }); %>
</select>
</div>
<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>
@ -34,3 +35,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<!-- This is getting filled via AJAX since we need to refresh it when new users are added anywho. -->
</table>
</div>
</div>

View file

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

View file

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