Improve table row selection JS (#3608)

* Add .js-units-container class

* Improve alert copy

* Formatting

* Improve unit selection JS

* Fixup List Backup Exclusions table HTML

* Refactor

* Add missing classes

web/js/src/index.js

@@ -14,8 +14,8 @@ import handleFormSubmit from './formSubmit';
 import handleFtpAccountHints from './ftpAccountHints';
 import handleFtpAccounts from './ftpAccounts';
 import handleIpListDataSource from './ipListDataSource';
-import handleListSelectAll from './listSelectAll';
 import handleListSorting from './listSorting';
+import handleListUnitSelect from './listUnitSelect';
 import handleNameServerInput from './nameServerInput';
 import handlePasswordInput from './passwordInput';
 import handleShortcuts from './shortcuts';
@@ -40,8 +40,8 @@ function initListeners() {
 	handleEditWebListeners();
 	handleFormSubmit();
 	handleFtpAccounts();
-	handleListSelectAll();
 	handleListSorting();
+	handleListUnitSelect();
 	handleNameServerInput();
 	handlePasswordInput();
 	handleStickyToolbar();

web/js/src/listSelectAll.js

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

web/js/src/listSorting.js

@@ -8,7 +8,7 @@ export default function handleListSorting() {
 
 	const toggleButton = document.querySelector('.js-toggle-sorting-menu');
 	const sortingMenu = document.querySelector('.js-sorting-menu');
-	const unitsContainer = document.querySelector('.units');
+	const unitsContainer = document.querySelector('.js-units-container');
 
 	if (!toggleButton || !sortingMenu || !unitsContainer) {
 		return;

web/js/src/listUnitSelect.js

@@ -0,0 +1,45 @@
+// Select unit behavior
+export default function handleListUnitSelect() {
+	const checkboxes = Array.from(document.querySelectorAll('.js-unit-checkbox'));
+	const units = checkboxes.map((checkbox) => checkbox.closest('.js-unit'));
+	const selectAllCheckbox = document.querySelector('.js-toggle-all-checkbox');
+
+	if (checkboxes.length === 0 || !selectAllCheckbox) {
+		return;
+	}
+
+	let lastCheckedIndex = null;
+
+	checkboxes.forEach((checkbox, index) => {
+		checkbox.addEventListener('click', (event) => {
+			const isChecked = checkbox.checked;
+			updateUnitSelection(units[index], isChecked);
+
+			if (event.shiftKey && lastCheckedIndex !== null) {
+				handleMultiSelect(checkboxes, units, index, lastCheckedIndex, isChecked);
+			}
+
+			lastCheckedIndex = index;
+		});
+	});
+
+	selectAllCheckbox.addEventListener('change', () => {
+		const isChecked = selectAllCheckbox.checked;
+		checkboxes.forEach((checkbox) => (checkbox.checked = isChecked));
+		units.forEach((unit) => updateUnitSelection(unit, isChecked));
+	});
+}
+
+function updateUnitSelection(unit, isChecked) {
+	unit.classList.toggle('selected', isChecked);
+}
+
+function handleMultiSelect(checkboxes, units, index, lastCheckedIndex, isChecked) {
+	const rangeStart = Math.min(index, lastCheckedIndex);
+	const rangeEnd = Math.max(index, lastCheckedIndex);
+
+	for (let i = rangeStart; i <= rangeEnd; i++) {
+		checkboxes[i].checked = isChecked;
+		updateUnitSelection(units[i], isChecked);
+	}
+}

web/js/src/navigation.js

@@ -29,7 +29,7 @@ export function enterFocused() {
 	}
 
 	const activeUnit = document.querySelector(
-		'.units .l-unit.focus .actions-panel__col.actions-panel__edit a'
+		'.js-units-container .l-unit.focus .actions-panel__col.actions-panel__edit a'
 	);
 	if (activeUnit) {
 		location.href = activeUnit.getAttribute('href');
@@ -78,9 +78,9 @@ function moveFocusLeftRight(direction) {
 }
 
 function moveFocusUpDown(direction) {
-	const unitSelector = '.units .l-unit:not(.header)';
+	const unitSelector = '.js-units-container .l-unit:not(.header)';
 	const units = Array.from(document.querySelectorAll(unitSelector));
-	const currentFocused = document.querySelector('.units .l-unit.focus');
+	const currentFocused = document.querySelector('.js-units-container .l-unit.focus');
 	let index = units.indexOf(currentFocused);
 
 	if (index === -1) {

web/js/src/shortcuts.js

@@ -347,7 +347,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'L' },
 			(_evt) => {
-				const element = document.querySelector('.units .l-unit.focus .shortcut-l');
+				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-l');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -357,7 +357,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'S' },
 			(_evt) => {
-				const element = document.querySelector('.units .l-unit.focus .shortcut-s');
+				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-s');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -367,7 +367,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'W' },
 			(_evt) => {
-				const element = document.querySelector('.units .l-unit.focus .shortcut-w');
+				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-w');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -377,7 +377,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'D' },
 			(_evt) => {
-				const element = document.querySelector('.units .l-unit.focus .shortcut-d');
+				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-d');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -387,7 +387,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'R' },
 			(_evt) => {
-				const element = document.querySelector('.units .l-unit.focus .shortcut-r');
+				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-r');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -397,7 +397,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'N' },
 			(_evt) => {
-				const element = document.querySelector('.units .l-unit.focus .shortcut-n');
+				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-n');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -407,7 +407,7 @@ export default function handleShortcuts() {
 		.register(
 			{ key: 'U' },
 			(_evt) => {
-				const element = document.querySelector('.units .l-unit.focus .shortcut-u');
+				const element = document.querySelector('.js-units-container .l-unit.focus .shortcut-u');
 				if (element) {
 					executeShortcut(element);
 				}
@@ -417,7 +417,9 @@ export default function handleShortcuts() {
 		.register(
 			{ code: 'Delete' },
 			(_evt) => {
-				const element = document.querySelector('.units .l-unit.focus .shortcut-delete');
+				const element = document.querySelector(
+					'.js-units-container .l-unit.focus .shortcut-delete'
+				);
 				if (element) {
 					executeShortcut(element);
 				}
@@ -445,7 +447,9 @@ export default function handleShortcuts() {
 					const dialog = document.querySelector('dialog[open]');
 					dialog.querySelector('button[type="submit"]').click();
 				} else {
-					const element = document.querySelector('.units .l-unit.focus .shortcut-enter');
+					const element = document.querySelector(
+						'.js-units-container .l-unit.focus .shortcut-enter'
+					);
 					if (element) {
 						executeShortcut(element);
 					} else {

web/templates/pages/list_access_keys.php

@@ -42,7 +42,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div>

web/templates/pages/list_backup.php

@@ -35,7 +35,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div>
@@ -70,7 +70,7 @@
 				if (!empty($data[$key]['CRON'])) $cron = _('Yes');
 				if (!empty($data[$key]['UDIR'])) $udir = _('Yes');
 			?>
-			<div class="l-unit animate__animated animate__fadeIn">
+			<div class="l-unit animate__animated animate__fadeIn js-unit">
 				<div class="l-unit__col l-unit__col--right">
 					<div>
 						<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_backup_detail.php

@@ -32,7 +32,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div>
@@ -54,7 +54,7 @@
 				if (!empty($key)) {
 					++$i;
 			?>
-			<div class="l-unit animate__animated animate__fadeIn">
+			<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 super-compact">
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="web[]" value="<?= $key ?>">

web/templates/pages/list_backup_exclusions.php

@@ -24,20 +24,20 @@
 </div>
 <!-- End toolbar -->
 
-<div class="container units">
-	<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>
-			<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Value") ?></b></div>
+<div class="container">
+	<div class="units js-units-container">
+		<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>
+				<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>
+				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Value") ?></b></div>
+			</div>
 		</div>
-	</div>
 
-	<div class="container units animate__animated animate__fadeIn">
 		<!-- Begin list of backup exclusions by type -->
 		<?php foreach ($data as $key => $value) { ?>
-			<div class="l-unit header">
+			<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 super-compact">&nbsp;</div>
 					<div class="clearfix l-unit__stat-col--left wide-1"><b><?= $key ?></b></div>

web/templates/pages/list_cron.php

@@ -66,7 +66,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
@@ -91,13 +91,13 @@
 					$spnd_action = 'unsuspend';
 					$spnd_action_title = _('Unsuspend');
 					$spnd_icon = 'fa-play';
-					$spnd_confirmation = _('Are you sure you want to unsuspend the cron job?') ;
+					$spnd_confirmation = _('Are you sure you want to unsuspend this cron job?') ;
 				} else {
 					$status = 'active';
 					$spnd_action = 'suspend';
 					$spnd_action_title = _('Suspend');
 					$spnd_icon = 'fa-pause';
-					$spnd_confirmation = _('Are you sure you want to suspend the cron job?') ;
+					$spnd_confirmation = _('Are you sure you want to suspend this cron job?') ;
 				}
 			?>
 			<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-unit"
@@ -123,7 +123,11 @@
 									&nbsp;
 								<?php } else { ?>
 									<?php if ($data[$key]['SUSPENDED'] == 'no') {?>
-										<div class="actions-panel__col actions-panel__download shortcut-enter" data-key-action="href"><a href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Cron Job") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
+										<div class="actions-panel__col actions-panel__download shortcut-enter" data-key-action="href">
+											<a href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit Cron Job") ?>">
+												<i class="fas fa-pencil icon-orange icon-dim"></i>
+											</a>
+										</div>
 									<?php } ?>
 									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
 										<a
@@ -140,7 +144,7 @@
 											class="data-controls js-confirm-action"
 											href="/delete/cron/?job=<?= $data[$key]["JOB"] ?>&token=<?= $_SESSION["token"] ?>"
 											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_("Are you sure you want to delete the cron job?"), $key) ?>"
+											data-confirm-message="<?= sprintf(_("Are you sure you want to delete this cron job?"), $key) ?>"
 										>
 											<i class="fas fa-trash icon-red icon-dim"></i>
 										</a>

web/templates/pages/list_db.php

@@ -98,7 +98,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_dns.php

@@ -67,7 +67,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_dns_public.php

@@ -67,7 +67,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<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>

web/templates/pages/list_dns_rec.php

@@ -71,7 +71,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_firewall.php

@@ -56,7 +56,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units compact">
+	<div class="units compact js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_firewall_banlist.php

@@ -26,7 +26,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
@@ -46,7 +46,7 @@
 				++$i;
 				$ip = $key;
 			?>
-			<div class="l-unit animate__animated animate__fadeIn">
+			<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 super-compact">
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="ipchain[]" value="<?= $ip . ":" . $value["CHAIN"] ?>">

web/templates/pages/list_firewall_ipset.php

@@ -26,7 +26,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
@@ -44,7 +44,7 @@
 		<!-- Begin firewall IP address list item loop -->
 		<?php foreach ($data as $key => $value) {
 		$listname = $key; ?>
-			<div class="l-unit animate__animated animate__fadeIn">
+			<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 super-compact">
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="setname[]" value="<?= $listname ?>">

web/templates/pages/list_ip.php

@@ -52,7 +52,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div>

web/templates/pages/list_key.php

@@ -20,7 +20,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<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>
@@ -37,7 +37,7 @@
 				foreach ($data as $key => $value) {
 				++$i;
 			?>
-			<div class="l-unit header animate__animated animate__fadeIn" style="<?php if ($data[$key]['ID'] === 'filemanager.ssh.key') { echo 'display: none;'; } ?>">
+			<div class="l-unit header animate__animated animate__fadeIn js-unit" style="<?php if ($data[$key]['ID'] === 'filemanager.ssh.key') { echo 'display: none;'; } ?>">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left wide-3"><b><?= htmlspecialchars($data[$key]["ID"]) ?></b></div>
 					<div class="clearfix l-unit__stat-col--left text-left compact-2">

web/templates/pages/list_log.php

@@ -70,7 +70,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<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>
@@ -96,7 +96,7 @@
 					$level_icon = 'fa-circle-xmark icon-red';
 				}
 			?>
-			<div class="l-unit header animate__animated animate__fadeIn">
+			<div class="l-unit header animate__animated animate__fadeIn js-unit">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact u-text-center">
 						<i class="fas <?= $level_icon ?>"></i>

web/templates/pages/list_log_auth.php

@@ -40,7 +40,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<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">
@@ -66,14 +66,14 @@
 					}
 				}
 				if ($data[$key]['STATUS'] == 'success')	{
-						$status_icon = 'fa-circle-check icon-green';
-						$status_title = _('Success');
+					$status_icon = 'fa-circle-check icon-green';
+					$status_title = _('Success');
 				} else {
-						$status_icon = 'fa-circle-minus icon-red';
-						$status_title = _('Failed');
+					$status_icon = 'fa-circle-minus icon-red';
+					$status_title = _('Failed');
 				}
 			?>
-			<div class="l-unit header animate__animated animate__fadeIn">
+			<div class="l-unit header 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">
 						<i class="fas <?= $status_icon ?> u-mr5" title="<?= $status_title ?>"></i>

web/templates/pages/list_mail.php

@@ -64,7 +64,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_mail_acc.php

@@ -74,7 +74,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div>

web/templates/pages/list_mail_dns.php

@@ -16,7 +16,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 </div>
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div>
@@ -29,7 +29,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 			</div>
 		</div>
 
-		<div class="l-unit animate__animated animate__fadeIn">
+		<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 wide-3">
 					<input type="text" class="form-control" style="width:260px;" value="mail.<?= htmlspecialchars($_GET["domain"]) ?>">
@@ -43,7 +43,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 			</div>
 		</div>
 		<?php if ($_SESSION["WEBMAIL_SYSTEM"]) { ?>
-			<div class="l-unit animate__animated animate__fadeIn">
+			<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 wide-3">
 						<input type="text" class="form-control" style="width:260px;" value="<?= $v_webmail_alias ?>.<?= htmlspecialchars($_GET["domain"]) ?>">
@@ -57,7 +57,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 				</div>
 			</div>
 		<?php } ?>
-		<div class="l-unit animate__animated animate__fadeIn">
+		<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 wide-3">
 					<input type="text" class="form-control" style="width:260px;" value="<?= htmlspecialchars($_GET["domain"]) ?>">
@@ -70,7 +70,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 				</div>
 			</div>
 		</div>
-		<div class="l-unit animate__animated animate__fadeIn">
+		<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 wide-3">
 					<input type="text" class="form-control" style="width:260px;" value="<?= htmlspecialchars($_GET["domain"]) ?>">
@@ -84,7 +84,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 				</div>
 			</div>
 		</div>
-		<div class="l-unit animate__animated animate__fadeIn">
+		<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 wide-3">
 					<input type="text" class="form-control" style="width:260px;" value="_dmarc">
@@ -98,7 +98,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 			</div>
 		</div>
 		<?php foreach ($dkim as $key => $value) { ?>
-			<div class="l-unit animate__animated animate__fadeIn">
+			<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 wide-3">
 						<input type="text" class="form-control" style="width:260px;" value="<?= htmlspecialchars($key) ?>">

web/templates/pages/list_packages.php

@@ -43,7 +43,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_search.php

@@ -38,7 +38,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_server_preview.php

@@ -11,18 +11,17 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<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>
 				<div class="clearfix l-unit__stat-col--left wide-6"><b><?= _("Name") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left wide-2"><b><?= _("Status") ?></b></div>
-
 			</div>
 		</div>
 		<!-- Start of item element-->
-		<div class="l-unit header animate__animated animate__fadeIn">
+		<div class="l-unit header animate__animated animate__fadeIn js-unit">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact u-text-center">
 					<i class="fas fa-gear icon-blue"></i>

web/templates/pages/list_services.php

@@ -91,7 +91,7 @@
 		</div>
 	</div>
 
-	<div class="units">
+	<div class="units js-units-container">
 
 		<div class="units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -133,7 +133,7 @@
 				$cpu = number_format($cpu, 1);
 				if ($cpu == '0.0')	$cpu = 0;
 			?>
-			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn"
+			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn js-unit"
 				data-sort-name="<?=strtolower($key)?>"
 				data-sort-memory="<?=$data[$key]['MEM']?>"
 				data-sort-cpu="<?=$cpu;?>"

web/templates/pages/list_updates.php

@@ -25,7 +25,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div>
@@ -54,7 +54,7 @@
 					$upd_status = 'outdated';
 				}
 			?>
-			<div class="l-unit<?php if ($status == 'suspended') echo ' l-unit--outdated';?> animate__animated animate__fadeIn">
+			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--outdated'; ?> animate__animated animate__fadeIn js-unit">
 				<div class="l-unit-toolbar clearfix">
 					<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
 					</div>

web/templates/pages/list_user.php

@@ -68,7 +68,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<!-- Table header -->
 		<div class="units-header">
 			<div class="l-unit__col l-unit__col--right">

web/templates/pages/list_web.php

@@ -67,7 +67,7 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units">
+	<div class="units js-units-container">
 		<!-- Table header -->
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">