More table refactoring (#3602)

* Rename .table-header to .units-header

* Tidy table class names

web/css/src/themes/dark.css

@@ -351,7 +351,7 @@ strong {
 	color: #fff;
 }
 
-.table-header {
+.units-header {
 	background: #404040;
 	border-left: 1px solid #212121;
 	border-right: 1px solid #212121;

web/css/src/themes/default.css

@@ -903,7 +903,7 @@
 	}
 }
 
-.table-header {
+.units-header {
 	font-size: 0.8rem;
 	background: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
 	background-color: #fff;

web/css/src/themes/flat.css

@@ -57,7 +57,7 @@ strong {
 	background-color: #fff;
 }
 
-.table-header {
+.units-header {
 	box-shadow: none;
 	background: #fafafa;
 }

web/css/src/themes/vestia.css

@@ -205,7 +205,7 @@ strong {
 	}
 }
 
-.table-header {
+.units-header {
 	box-shadow: none;
 	background: #fafafa;
 	line-height: 1.2rem;

web/js/src/alpineInit.js

@@ -5,7 +5,7 @@ export default function alpineInit() {
 		/** @param {SubmitEvent} evt */
 		'@submit'(evt) {
 			evt.preventDefault();
-			document.querySelectorAll('.ch-toggle').forEach((el) => {
+			document.querySelectorAll('.js-unit-checkbox').forEach((el) => {
 				if (el.checked) {
 					const input = document.createElement('input');
 					input.type = 'hidden';

web/js/src/listSelectAll.js

@@ -1,6 +1,6 @@
 // Select all checkbox on list view pages
 export default function handleListSelectAll() {
-	const selectAllCheckbox = document.querySelector('.js-toggle-all');
+	const selectAllCheckbox = document.querySelector('.js-toggle-all-checkbox');
 	if (selectAllCheckbox) {
 		selectAllCheckbox.addEventListener('change', toggleAll);
 	}
@@ -9,11 +9,11 @@ export default function handleListSelectAll() {
 function toggleAll(evt) {
 	const isChecked = evt.target.checked;
 
-	document.querySelectorAll('.ch-toggle').forEach((el) => {
+	document.querySelectorAll('.js-unit-checkbox').forEach((el) => {
 		el.checked = isChecked;
 	});
 
-	document.querySelectorAll('.l-unit').forEach((el) => {
+	document.querySelectorAll('.js-unit').forEach((el) => {
 		el.classList.toggle('selected', isChecked);
 	});
 }

web/js/src/listSorting.js

@@ -56,7 +56,7 @@ export default function handleListSorting() {
 			faIcon.classList.add(span.classList.contains('up') ? 'fa-arrow-up-a-z' : 'fa-arrow-down-a-z');
 
 			// Sort units and reattach them to the DOM
-			const units = Array.from(document.querySelectorAll('.js-sortable-unit')).sort((a, b) => {
+			const units = Array.from(document.querySelectorAll('.js-unit')).sort((a, b) => {
 				const aAttr = a.getAttribute(`data-${state.sort_par}`);
 				const bAttr = b.getAttribute(`data-${state.sort_par}`);
 

web/js/src/shortcuts.js

@@ -128,11 +128,11 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'A', ctrlKey: true, shiftKey: true },
 			(_evt) => {
-				const checked = document.querySelector('.l-unit .ch-toggle:eq(0)').checked;
+				const checked = document.querySelector('.js-unit-checkbox:eq(0)').checked;
 				document
 					.querySelectorAll('.l-unit')
 					.forEach((el) => el.classList.toggle('selected'), !checked);
-				document.querySelectorAll('.l-unit .ch-toggle').forEach((el) => (el.checked = !checked));
+				document.querySelectorAll('.js-unit-checkbox').forEach((el) => (el.checked = !checked));
 			},
 			{ disabledInInput: true }
 		)

web/templates/pages/list_access_keys.php

@@ -43,11 +43,11 @@
 
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+					<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-6"><b><?= _("Access Key") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>
@@ -69,14 +69,14 @@
 				$key_date = !empty($value['DATE']) ? $value['DATE'] : '-';
 				$key_time = !empty($value['TIME']) ? $value['TIME'] : '-';
 		?>
-		<div class="l-unit animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit animate__animated animate__fadeIn js-unit"
 			data-sort-key="<?=strtolower($key)?>"
 			data-sort-comment="<?=strtolower($key_comment)?>"
 			data-sort-date="<?=strtotime($data[$key]['DATE'] .' '. $data[$key]['TIME'] )?>">
 
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="key[]" value="<?= $key ?>">
+					<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="key[]" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-6">
 					<b><a href="/list/access-key/?key=<?= htmlentities($key) ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Access Key") ?>: <?= $key ?>"><?= $key ?></a></b>

web/templates/pages/list_backup.php

@@ -35,11 +35,11 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+					<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-4"><b><?= _("File Name") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left compact-4 u-text-right"><b>&nbsp;</b></div>
@@ -73,7 +73,7 @@
 			<div class="l-unit__col l-unit__col--right">
 				<div>
 					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="backup[]" value="<?= $key ?>" <?= $display_mode ?>>
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="backup[]" value="<?= $key ?>" <?= $display_mode ?>>
 					</div>
 					<div class="clearfix l-unit__stat-col--left wide-4 truncate">
 						<b>

web/templates/pages/list_backup_detail.php

@@ -32,11 +32,11 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+					<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left compact-4"><b><?= _("Type") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left wide-7"><b><?= _("Details") ?></b></div>
@@ -56,7 +56,7 @@
 		<div class="l-unit animate__animated animate__fadeIn">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" name="web[]" value="<?= $key ?>">
+					<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="web[]" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left compact-4">
 					<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("Web Domain") ?></div>
@@ -88,7 +88,7 @@
 		<div class="l-unit">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check2<?= $i ?>" class="ch-toggle" type="checkbox" name="mail[]" value="<?= $key ?>">
+					<input id="check2<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="mail[]" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left compact-4">
 					<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("Mail Domain") ?></div>
@@ -120,7 +120,7 @@
 		<div class="l-unit">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check3<?= $i ?>" class="ch-toggle" type="checkbox" name="dns[]" value="<?= $key ?>">
+					<input id="check3<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="dns[]" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left compact-4">
 					<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("DNS Zone") ?></div>
@@ -152,7 +152,7 @@
 		<div class="l-unit">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check4<?= $i ?>" class="ch-toggle" type="checkbox" name="db[]" value="<?= $key ?>">
+					<input id="check4<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="db[]" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left compact-4">
 					<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("Database") ?></div>
@@ -181,7 +181,7 @@
 		<div class="l-unit">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check5<?= $i ?>" class="ch-toggle" type="checkbox" name="check" value="<?= $key ?>">
+					<input id="check5<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="check" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left compact-4">
 					<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("Cron Jobs") ?></div>
@@ -213,7 +213,7 @@
 		<div class="l-unit">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check6<?= $i ?>" class="ch-toggle" type="checkbox" name="udir[]" value="<?= $key ?>">
+					<input id="check6<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="udir[]" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left compact-4">
 					<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("User Directory") ?></div>

web/templates/pages/list_backup_exclusions.php

@@ -25,7 +25,7 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">&nbsp;</div>
 			<div class="clearfix l-unit__stat-col--left wide-1"><b><?= _("Type") ?></b></div>

web/templates/pages/list_cron.php

@@ -66,10 +66,10 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-5"><b><?= _("Command") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-2 u-text-right"><b>&nbsp;</b></div>
@@ -99,12 +99,12 @@
 				$spnd_confirmation = _('Are you sure you want to suspend the cron job?') ;
 			}
 		?>
-		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
 			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 			data-sort-name="<?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="job[]" value="<?= $key ?>" <?= $display_mode ?>>
+					<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="job[]" value="<?= $key ?>" <?= $display_mode ?>>
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-5 truncate">
 					<?php if ($read_only === "true" || $data[$key]["SUSPENDED"] == "yes") { ?>

web/templates/pages/list_db.php

@@ -98,10 +98,10 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left u-text-right compact-3"><b>&nbsp;</b></div>
@@ -139,7 +139,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 			if ($data[$key]['TYPE'] == 'pgsql') $db_admin_link = "https://".$http_host."/phppgadmin/";
 			if (($data[$key]['TYPE'] == 'pgsql') && (!empty($_SESSION['DB_PGA_ALIAS']))) $db_admin_link = $_SESSION['DB_PGA_ALIAS'];
 		?>
-		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
 			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 			data-sort-name="<?=$key?>"
 			data-sort-disk="<?=$data[$key]['U_DISK']?>"
@@ -149,7 +149,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 			<div class="l-unit__col l-unit__col--right">
 				<div>
 					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="database[]" value="<?= $key ?>" <?= $display_mode ?>>
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="database[]" value="<?= $key ?>" <?= $display_mode ?>>
 					</div>
 					<div class="clearfix l-unit__stat-col--left wide-3 truncate">
 						<?php if ($read_only === "true" || $data[$key]["SUSPENDED"] == "yes") { ?>

web/templates/pages/list_dns.php

@@ -67,10 +67,10 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode; ?>>
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode; ?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left u-text-right"><b>&nbsp;</b></div>
@@ -106,7 +106,7 @@
 				}
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
 			data-sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
 			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 			data-sort-name="<?=htmlentities($key);?>"
@@ -114,7 +114,7 @@
 			data-sort-records="<?=(int)$data[$key]['RECORDS']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?= $key ?>" <?= $display_mode ?>>
+					<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?= $key ?>" <?= $display_mode ?>>
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3 truncate">
 					<b><a href="/list/dns/?domain=<?= htmlentities($key) ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("DNS Records") ?>: <?= htmlentities($key) ?>"><?= htmlentities($key) ?></a></b>

web/templates/pages/list_dns_public.php

@@ -68,31 +68,31 @@
 
 <div class="container units">
 
-	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+	<div class="l-unit animate__animated animate__fadeIn js-unit">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("DNSKEY Record") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["RECORD"]; ?>"></b></div>
 		</div>
 	</div>
-	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+	<div class="l-unit animate__animated animate__fadeIn js-unit">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("DS Record") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["DS"]; ?>"></b></div>
 		</div>
 	</div>
-	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+	<div class="l-unit animate__animated animate__fadeIn js-unit">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Public Key") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["KEY"]; ?>"></b></div>
 		</div>
 	</div>
-	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+	<div class="l-unit animate__animated animate__fadeIn js-unit">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Key Tag / Flag") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $flag; ?>"></b></div>
 		</div>
 	</div>
-	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+	<div class="l-unit animate__animated animate__fadeIn js-unit">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Algorithm") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $algorithm; ?>"></b></div>

web/templates/pages/list_dns_rec.php

@@ -71,10 +71,10 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left"><b><?= _("Record") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left super-compact u-text-right"><b>&nbsp;</b></div>
@@ -97,7 +97,7 @@
 
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn js-unit"
 			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 			data-sort-record="<?=$data[$key]['RECORD']?>"
 			data-sort-type="<?=$data[$key]['TYPE']?>"
@@ -105,7 +105,7 @@
 			data-sort-value="<?=$data[$key]['VALUE']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?= $data[$key]["ID"] ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="record[]" value="<?= $data[$key]["ID"] ?>" <?= $display_mode ?>>
+					<input id="check<?= $data[$key]["ID"] ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="record[]" value="<?= $data[$key]["ID"] ?>" <?= $display_mode ?>>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-truncate">
 					<b>

web/templates/pages/list_firewall.php

@@ -56,10 +56,10 @@
 <!-- End toolbar -->
 
 <div class="container units compact">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-1"><b><?= _("Action") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-2 u-text-right"><b>&nbsp;</b></div>
@@ -88,7 +88,7 @@
 				$spnd_confirmation = _('Are you sure you want to suspend rule #%s?') ;
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
 			data-sort-action="<?=$data[$key]['ACTION']?>"
 			data-sort-protocol="<?=$data[$key]['PROTOCOL']?>"
 			data-sort-port="<?=$data[$key]['PORT']?>"
@@ -97,7 +97,7 @@
 			<div class="l-unit__col l-unit__col--right">
 				<div>
 					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="rule[]" value="<?= $key ?>">
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="rule[]" value="<?= $key ?>">
 					</div>
 					<div class="clearfix l-unit__stat-col--left wide-1">
 						<b>

web/templates/pages/list_firewall_banlist.php

@@ -26,10 +26,10 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("IP Address") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-4"><b>&nbsp;</b></div>
@@ -48,7 +48,7 @@
 		<div class="l-unit animate__animated animate__fadeIn">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="ipchain[]" value="<?= $ip . ":" . $value["CHAIN"] ?>">
+					<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="ipchain[]" value="<?= $ip . ":" . $value["CHAIN"] ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= $ip ?></b></div>
 				<!-- START QUICK ACTION TOOLBAR AREA -->

web/templates/pages/list_firewall_ipset.php

@@ -26,10 +26,10 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("IP List Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-4"><b>&nbsp;</b></div>
@@ -46,7 +46,7 @@
 		<div class="l-unit animate__animated animate__fadeIn">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="setname[]" value="<?= $listname ?>">
+					<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="setname[]" value="<?= $listname ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= $listname ?></b></div>
 				<!-- START QUICK ACTION TOOLBAR AREA -->

web/templates/pages/list_ip.php

@@ -52,11 +52,11 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+					<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("IP Address") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>
@@ -74,7 +74,7 @@
 		foreach ($data as $key => $value) {
 			++$i;
 		?>
-		<div class="l-unit animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit animate__animated animate__fadeIn js-unit"
 			data-sort-ip="<?=str_replace('.', '', $key)?>"
 			data-sort-date="<?=strtotime($data[$key]['DATE'] .' '. $data[$key]['TIME'] )?>"
 			data-sort-netmask="<?=str_replace('.', '', $data[$key]['NETMASK'])?>"
@@ -84,7 +84,7 @@
 
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="ip[]" value="<?= $key ?>">
+					<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="ip[]" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3"><b><a href="/edit/ip/?ip=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit IP Address") ?>"><?=$key?> <?php if (!empty($data[$key]['NAT'])) echo ' → ' . $data[$key]['NAT'] . ''; ?></a></b>
 				</div>

web/templates/pages/list_key.php

@@ -20,7 +20,7 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("SSH ID") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-2">

web/templates/pages/list_log.php

@@ -71,7 +71,7 @@
 
 <div class="container units">
 
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact u-text-center">&nbsp;</div>
 			<div class="clearfix l-unit__stat-col--left"><b><?= _("Date") ?></b></div>

web/templates/pages/list_log_auth.php

@@ -40,7 +40,7 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left u-text-center">
 				<b><?= _("Status") ?></b>

web/templates/pages/list_mail.php

@@ -64,10 +64,10 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left u-text-right compact-5"><b>&nbsp;</b></div>
@@ -144,7 +144,7 @@
 				$data[$key]['CATCHALL'] = '/dev/null';
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
 			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 			data-sort-name="<?=$key?>"
 			data-sort-disk="<?=$data[$key]['U_DISK']?>"
@@ -152,7 +152,7 @@
 			<div class="l-unit__col l-unit__col--right">
 				<div>
 					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input id="check<?=$i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?=$key?>" <?=$display_mode;?>>
+						<input id="check<?=$i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?=$key?>" <?=$display_mode;?>>
 					</div>
 					<div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Mail Accounts") ?>: <?=$key?>"><?=$key?></a></b></div>
 					<!-- START QUICK ACTION TOOLBAR AREA -->

web/templates/pages/list_mail_acc.php

@@ -74,11 +74,11 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+					<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left u-text-right compact-4"><b>&nbsp;</b></div>
@@ -139,14 +139,14 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 				}
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
 			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 			data-sort-name="<?=$key?>"
 			data-sort-disk="<?=$data[$key]['U_DISK']?>"
 			data-sort-quota="<?=$data[$key]['QUOTA']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?=$i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="account[]" value="<?=$key?>" <?=$display_mode;?>>
+					<input id="check<?=$i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="account[]" value="<?=$key?>" <?=$display_mode;?>>
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3 truncate">
 					<?php if (($read_only === 'true') || ($data[$key]['SUSPENDED'] == 'yes')) { ?>

web/templates/pages/list_mail_dns.php

@@ -16,7 +16,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 </div>
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Record") ?></b></div>

web/templates/pages/list_packages.php

@@ -43,10 +43,10 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="table-header">
+	<div class="units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide"><b><?= _("Package") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-3 u-text-right"><b>&nbsp;</b></div>
@@ -70,14 +70,14 @@
 		foreach ($data as $key => $value) {
 			++$i;
 		?>
-		<div class="l-unit animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit animate__animated animate__fadeIn js-unit"
 			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 			data-sort-name="<?=$key?>"
 			data-sort-bandwidth="<?=$data[$key]['BANDWIDTH']?>"
 			data-sort-disk="<?=$data[$key]['DISK_QUOTA']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?=$i?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="package[]" value="<?=$key?>">
+					<input id="check<?=$i?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="package[]" value="<?=$key?>">
 				</div>
 				<?php if ($key == 'system'){ ?>
 					<div class="clearfix l-unit__stat-col--left wide truncate"><b><?=$key?></b></div>

web/templates/pages/list_search.php

@@ -38,7 +38,7 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
 				&nbsp;
@@ -77,7 +77,7 @@
 			}
 			$uniq_id .= sha1($value['RESULT']);
 		?>
-		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
 			data-uniq-id="<?=$uniq_id?>"
 			data-sort-date="<?=strtotime($value['DATE'].' '.$value['TIME'])?>"
 			data-sort-name="<?=$value['RESULT']?>"

web/templates/pages/list_server_preview.php

@@ -12,7 +12,7 @@
 
 <div class="container units">
 
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact u-text-center">&nbsp;</div>
 			<div class="clearfix l-unit__stat-col--left"><b><?= _("Category") ?></b></div>

web/templates/pages/list_services.php

@@ -93,10 +93,10 @@
 
 	<div class="units">
 
-		<div class="table-header">
+		<div class="units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+					<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 				</div>
 
 				<div class="clearfix l-unit__stat-col--left wide-2"><b><?= _("Service") ?></b></div>
@@ -140,7 +140,7 @@
 				data-sort-uptime="<?=$data[$key]['RTIME']?>">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="service[]" value="<?= $key ?>">
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="service[]" value="<?= $key ?>">
 					</div>
 					<div class="clearfix l-unit__stat-col--left wide-2">
 						<i class="fas <?= $state_icon ?> u-mr5"></i>

web/templates/pages/list_updates.php

@@ -25,11 +25,11 @@
 <!-- End toolbar -->
 
 <div class="container units">
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact center">
-					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+					<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 				</div>
 				<!-- Not a typo, to differentiate from User "Package Name" -->
 				<div class="clearfix l-unit__stat-col--left wide"><b><?= _("Package Names") ?></b></div>
@@ -62,7 +62,7 @@
 			<div class="l-unit__col l-unit__col--right">
 				<div>
 					<div class="clearfix l-unit__stat-col--left super-compact center">
-						<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="pkg[]" value="<?= $key ?>">
+						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="pkg[]" value="<?= $key ?>">
 					</div>
 					<div class="clearfix l-unit__stat-col--left wide"><b><?=$key?></b></div>
 					<div class="clearfix l-unit__stat-col--left wide-5"><?=_($data[$key]['DESCR'])?></div>

web/templates/pages/list_user.php

@@ -70,10 +70,10 @@
 <div class="container units">
 
 	<!-- Table header -->
-	<div class="table-header">
+	<div class="units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-3"><b>&nbsp;</b></div>
@@ -107,14 +107,14 @@
 				$spnd_confirmation = _('Are you sure you want to suspend user %s?');
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
 			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 			data-sort-name="<?=strtolower($key)?>"
 			data-sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>"
 			data-sort-disk="<?=$data[$key]['U_DISK']?>">
 			<div class="l-unit__col l-unit__col--right" style="<?php if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($_SESSION['user'] !== 'admin') && ($key === 'admin')) { echo 'display: none';} ?>">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="user[]" value="<?= $key ?>">
+					<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="user[]" value="<?= $key ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3 userlist-username">
 					<?php if ($key == $user_plain) { ?>

web/templates/pages/list_web.php

@@ -69,10 +69,10 @@
 <div class="container units">
 
 	<!-- Table header -->
-	<div class="header table-header">
+	<div class="header units-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-4"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-4 u-text-right"><b>&nbsp;</b></div>
@@ -174,7 +174,7 @@
 					}
 				}
 			?>
-			<div class="l-unit <?php if ($data[$key]['SUSPENDED'] == 'yes') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+			<div class="l-unit <?php if ($data[$key]['SUSPENDED'] == 'yes') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
 				data-sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
 				data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
 				data-sort-name="<?=$key?>"
@@ -182,7 +182,7 @@
 				data-sort-disk="<?=$data[$key]['U_DISK']?>">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input id="check<?=$i?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?=$key?>" <?=$display_mode;?>>
+						<input id="check<?=$i?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?=$key?>" <?=$display_mode;?>>
 					</div>
 					<div class="clearfix l-unit__stat-col--left wide-4 truncate">
 						<b>