Finished up cleaning css.

This commit is contained in:
rainbow napkin 2024-12-08 05:53:00 -05:00
parent b13e2bde24
commit ff69762a1f
15 changed files with 87 additions and 98 deletions

View file

@ -17,29 +17,29 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<h3>Channel List:</h3>
<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 admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<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-<%- channel.name %>" class="admin-list-entry">
<td id="admin-channel-list-entry-img-<%- channel.name %>" class="admin-list-entry admin-list-entry-item">
<a href="/c/<%- channel.name %>" class="admin-list-entry admin-list-entry-item">
<img id="admin-channel-list-entry-img-<%- channel.name %>" class="admin-list-entry admin-list-entry-item" src="<%- channel.thumbnail %>">
<tr id="admin-channel-list-entry-<%- channel.name %>" class="">
<td id="admin-channel-list-entry-img-<%- channel.name %>" class=" admin-list-entry-item">
<a href="/c/<%- 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>
</td>
<td id="admin-channel-list-entry-name-<%- channel.name %>" class="admin-list-entry admin-list-entry-item not-first-col">
<a href="/c/<%- channel.name %>" class="admin-list-entry admin-list-entry-item">
<td id="admin-channel-list-entry-name-<%- channel.name %>" class=" admin-list-entry-item not-first-col">
<a href="/c/<%- channel.name %>" class=" admin-list-entry-item">
<%- channel.name %>
</a>
</td>
<td id="admin-channel-list-entry-description-<%- channel.name %>" class="admin-list-entry admin-list-entry-large admin-list-entry-item not-first-col">
<td id="admin-channel-list-entry-description-<%- channel.name %>" class="large admin-list-entry-item not-first-col">
<%- channel.description %>
</td>
</tr>

View file

@ -17,28 +17,28 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<h3>User Ban List:</h3>
<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 admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
<td id="admin-ban-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-ban-list-entry-id-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
<td id="admin-ban-list-entry-id-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
<h3>ID</h3>
</td>
<td id="admin-ban-list-entry-name-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
<td id="admin-ban-list-entry-name-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
<h3>Name</h3>
</td>
<td id="admin-ban-list-entry-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
<td id="admin-ban-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-ban-list-entry-ban-date-title" class="admin-list-entry admin-list-entry-title admin-list-entry-item not-first-col">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<td id="admin-ban-list-entry-actions-type-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
&nbsp;
</td>
</tr>

View file

@ -17,46 +17,46 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<h3>User List:</h3>
<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 admin-list-entry-title admin-list-entry-item admin-list-entry-img-title">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<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 admin-list-entry-title admin-list-entry-item not-first-col">
<td id="admin-user-list-entry-control-title" class="admin-list-entry-title admin-list-entry-item not-first-col">
&nbsp;
</td>
</tr>
<% userList.forEach((curUser) => { %>
<tr id="admin-user-list-entry-<%- curUser.user %>" class="admin-list-entry">
<td id="admin-user-list-entry-img-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item">
<a href="/profile/<%- curUser.user %>" class="admin-list-entry admin-list-entry-item">
<img id="admin-user-list-entry-img-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item" src="<%- curUser.img %>">
<td id="admin-user-list-entry-img-<%- curUser.user %>" class="admin-list-entry-item">
<a href="/profile/<%- 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>
</td>
<td id="admin-user-list-entry-id-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
<a href="/profile/<%- curUser.user %>" class="admin-list-entry admin-list-entry-item">
<td id="admin-user-list-entry-id-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
<a href="/profile/<%- curUser.user %>" class="admin-list-entry-item">
<%- curUser.id %>
</a>
</td>
<td id="admin-user-list-entry-name-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
<a href="/profile/<%- curUser.user %>" class="admin-list-entry admin-list-entry-item">
<td id="admin-user-list-entry-name-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
<a href="/profile/<%- curUser.user %>" class="admin-list-entry-item">
<%- curUser.user %>
</a>
</td>
<td id="admin-user-list-entry-rank-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
<td id="admin-user-list-entry-rank-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
<% if(rankEnum.indexOf(curUser.rank) < rankEnum.indexOf(user.rank)){%>
<select id="admin-user-list-rank-select-<%- curUser.user %>" class="admin-user-list-rank-select">
<%rankEnum.slice().reverse().forEach((rank)=>{ %>
@ -67,13 +67,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<%- curUser.rank %>
<% } %>
</td>
<td id="admin-user-list-entry-email-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
<td id="admin-user-list-entry-email-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
<%- curUser.email ? curUser.email : "N/A" %>
</td>
<td id="admin-user-list-entry-date-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
<td id="admin-user-list-entry-date-<%- curUser.user %>" class="admin-list-entry-item not-first-col">
<%- curUser.date.toUTCString() %>
</td>
<td id="admin-user-list-entry-action-<%- curUser.user %>" class="admin-list-entry admin-list-entry-item not-first-col">
<td id="admin-user-list-entry-action-<%- curUser.user %>" 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" 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>
</td>

View file

@ -21,13 +21,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
</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 admin-list-entry-img-title"><h3>Img</h3></td>
<td id="admin-user-list-entry-id-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>ID</h3></td>
<td class="admin-list-entry-item admin-list-entry not-first-col"><h3>Name</h3></td>
<td class="admin-list-entry-item admin-list-entry not-first-col"><h3>Ban<br>Alts</h3></td>
<td id="channel-user-list-entry-ban-date-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>Ban Date</h3></td>
<td id="channel-user-list-entry-expiration-date-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>Expires</h3></td>
<td id="channel-user-list-entry-actions-title" class="admin-list-entry-item admin-list-entry not-first-col">&nbsp;</td>
<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>

View file

@ -26,10 +26,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
</div>
<table class="admin-list-table">
<tr class="admin-list-entry-title-row">
<td class="admin-list-entry-item admin-list-entry admin-list-entry-img-title"><h3>Img</h3></td>
<td id="admin-user-list-entry-id-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>ID</h3></td>
<td class="admin-list-entry-item admin-list-entry not-first-col"><h3>Name</h3></td>
<td id="channel-user-list-entry-rank-title" class="admin-list-entry-item admin-list-entry not-first-col"><h3>Rank</h3></td>
<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>

View file

@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
even if I'm usually against that, sometimes you gotta break da rulez :P -->
<link rel="stylesheet" type="text/css" href="/css/popup/ban.css">
<h3 class="popup-title">Ban NULL</h3>
<form class="ban-popup-content" action="javascript:">
<div class="ban-popup-content">
<span>
<label for="ban-popup-perm">Perma-Ban:</label>
<input type="checkbox" name="ban-popup-perm" id="ban-popup-perm">
@ -36,4 +36,4 @@ even if I'm usually against that, sometimes you gotta break da rulez :P -->
<span id="ban-popup-button-span-spacer"></span>
<button id="ban-popup-ban-button" class="danger-button">Ban</button>
</span>
</form>
</div>

View file

@ -15,10 +15,10 @@ 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/>.-->
<link rel="stylesheet" type="text/css" href="/css/popup/delete.css">
<h3 id="delete-channel-popup-title" class="popup-title">Delete Channel</h3>
<form action="javascript:">
<div>
<p id="delete-channel-popup-content">WARNING: You are about to nuke channel '[CHANNEL]' off of the face of the fucking planet.<br>
Enter '[CHANNEL]' below to confirm:</p>
<span id="delete-channel-popup-prompt-span">
<input type="text" id="delete-channel-popup-prompt">
</span>
</form>
</div>

View file

@ -15,10 +15,10 @@ 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/>.-->
<link rel="stylesheet" type="text/css" href="/css/popup/delete.css">
<h3 id="delete-account-popup-title" class="popup-title">Delete Account</h3>
<form action="javascript:">
<div>
<p id="delete-account-popup-content">WARNING: You are about to nuke your account off of the face of the fucking planet.<br>
Enter your password below to confirm:</p>
<span id="delete-account-popup-password-span">
<input type="password" id="delete-account-popup-password">
</span>
</form>
</div>

View file

@ -15,7 +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/>.-->
<link rel="stylesheet" type="text/css" href="/css/popup/ban.css">
<h3 class="popup-title">Ban NULL</h3>
<form class="ban-popup-content" action="javascript:">
<div class="ban-popup-content">
<span>
<label for="ban-popup-perm">Perma-Ban:</label>
<input type="checkbox" name="ban-popup-perm" id="ban-popup-perm">
@ -30,4 +30,4 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<span id="ban-popup-button-span-spacer"></span>
<button id="ban-popup-ban-button" class="danger-button">Ban</button>
</span>
</form>
</div>

View file

@ -14,7 +14,7 @@ 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/>.*/
.admin-list-field, .admin-list-div{
.admin-list-div{
display: flex;
flex-direction: column;
}
@ -24,18 +24,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
max-width: 100%;
}
.admin-list-field{
padding: 1em 15%;
}
.admin-list-entry{
text-align: center;
}
.admin-list-entry-large{
text-align: left;
}
.admin-list-entry-img-title{
width: 1.5em;
}

View file

@ -26,12 +26,23 @@ body{
flex-direction: column;
}
form{
display: flex;
flex-direction: column;
}
table{
border-spacing: 0px;
}
td{
padding: 0.3em 1em;
text-align: center;
}
td.large{
text-align: left;
}
div.control-prompt{

View file

@ -132,6 +132,17 @@ button:active{
background-color: var(--focus0-alt1);
}
table, form{
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;
}
@ -140,11 +151,8 @@ td.not-first-col{
box-shadow: var(--accent1) 1em 0px 1px -2em, var(--accent1) -1em 0px 1px -1em;
}
.admin-list-field,.admin-list-table{
background-color: var(--bg1);
a.admin-list-entry-item{
color: var(--accent1);
box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
border-radius: 1em;
}
div.control-prompt{
@ -176,7 +184,6 @@ input.control-prompt, input.control-prompt:focus{
}
/* index */
.channel-guide-entry{
background-color: var(--bg1);
color: var(--accent1);
@ -203,15 +210,6 @@ p.channel-guide-entry-item{
background-color: var(--bg1-alt0);
}
/* channel settings/admin panel mixed */
a.admin-list-entry-item{
color: var(--accent1);
}
a:hover.admin-list-entry-item{
color: var(--accent1-alt0);
}
/* channel */
#media-panel-div{
background-color: black;

View file

@ -268,7 +268,7 @@ class adminUserBanList{
}
clearBanList(){
const oldRows = this.table.querySelectorAll('tr.admin-list-entry');
const oldRows = this.table.querySelectorAll('tr.gen-row');
oldRows.forEach((row) => {
row.remove();
});
@ -330,8 +330,8 @@ class adminUserBanList{
//append img cell to row
entryRow.appendChild(utils.ux.newTableCell(imgNode, true));
//Append standard cells to row
[
//Generate and append row to table
this.table.appendChild(utils.ux.newTableRow([
ban.user.id,
ban.user.user,
signUpDateString,
@ -339,15 +339,7 @@ class adminUserBanList{
expirationDateString,
banActionString,
(ban.user.deleted ? unbanIcon : [unbanIcon, nukeAccount])
].forEach((content)=>{
//I don't like repeating myself, and this didn't really need it's own function
//though we could make one where each is an object that contains ever property needed and pass it to a mktable function
//I just don't see us using it enough to justify it :P
entryRow.appendChild(utils.ux.newTableCell(content));
});
//Append row to table
this.table.appendChild(entryRow);
]));
});
}
}

View file

@ -130,7 +130,7 @@ class rankList{
clearTable(){
//get all non-title table rows
const rows = this.table.querySelectorAll("tr.admin-list-entry");
const rows = this.table.querySelectorAll("tr.gen-row");
//for each row
rows.forEach((row) => {
@ -161,7 +161,7 @@ class banList{
}
clearList(){
const oldRows = this.table.querySelectorAll('tr.admin-list-entry');
const oldRows = this.table.querySelectorAll('tr.gen-row');
oldRows.forEach((row) => {
row.remove();
});

View file

@ -39,7 +39,6 @@ class canopyUXUtils{
newTableCell(content, firstCol = false){
//Create a new 'td' element
const cell = document.createElement('td');
cell.classList.add("admin-list-entry","admin-list-entry-item");
//If it's not the first column, mention it!
if(!firstCol){
@ -78,7 +77,8 @@ class canopyUXUtils{
newTableRow(cellContent){
//Create an empty table row to hold the cells
const entryRow = document.createElement('tr');
entryRow.classList.add("admin-list-entry");
entryRow.classList.add("gen-row");
entryRow.appendChild(this.newTableCell(cellContent[0], true));