Migrate List Users to .units-table (#3629)

* Tidy shortcuts modal styles

* Formatting

* Migrate List Users to .units-table

* Refactor .toolbar-sorting-toggle HTML

web/css/src/themes/dark.css

@@ -217,10 +217,10 @@ strong {
 
 .toolbar-sorting-toggle {
 	&:hover {
-		color: #bcbcbc;
+		color: #aaa;
 
-		& b {
-			color: #bcbcbc;
+		& span {
+			color: #aaa;
 		}
 	}
 }
@@ -883,13 +883,13 @@ strong {
 	border-top: 1px solid #404040;
 }
 
-/* Shortcuts panel
+/* Shortcuts modal
    ========================================================================== */
 
 .shortcuts {
-	background: rgb(30 30 30 / 95%);
-	border: 1px solid rgb(255 255 255 / 25%);
-	box-shadow: 0 0 20px rgb(0 0 0 / 50%);
+	background-color: #2c2c2c;
+	border-color: #404040;
+	box-shadow: 0 8px 25px rgb(0 0 0 / 90%);
 }
 
 .shortcuts-header {

web/css/src/themes/default.css

@@ -627,7 +627,7 @@
 	&:hover {
 		color: #4b4b4b;
 
-		& b {
+		& span {
 			color: #4b4b4b;
 		}
 	}
@@ -635,12 +635,12 @@
 	&:active {
 		color: #3b9de8;
 
-		& b {
+		& span {
 			color: #3b9de8;
 		}
 	}
 
-	& b {
+	& span {
 		padding-left: 3px;
 	}
 
@@ -868,11 +868,10 @@
 		& .units-table-cell {
 			font-weight: bold;
 			padding: 14px 15px;
+		}
 
-			/* Checkbox cell */
-			&:nth-child(1) {
-				line-height: 1.1;
-			}
+		& .fas {
+			font-size: 1rem;
 		}
 	}
 }
@@ -973,11 +972,12 @@
 
 	@media (--viewport-large) {
 		display: table-cell;
+		vertical-align: middle;
 		padding: 10px 15px;
 
 		/* Checkbox cell */
 		&:nth-child(1) {
-			vertical-align: bottom;
+			line-height: 0.6;
 		}
 
 		/* Row heading cell */
@@ -1965,10 +1965,10 @@
    ========================================================================== */
 
 .modal {
-	border-radius: var(--border-radius-base);
-	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
 	background-color: #f0efef;
 	border: 1px solid rgb(255 255 255 / 98%);
+	border-radius: var(--border-radius-base);
+	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
 
 	@media (--viewport-small) {
 		min-width: 360px;
@@ -2000,11 +2000,11 @@
    ========================================================================== */
 
 .shortcuts {
-	background: rgb(50 50 50 / 93%);
+	background-color: rgb(50 50 50 / 93%);
 	color: #eee;
 	border: 1px solid rgb(255 255 255 / 70%);
 	border-radius: 6px;
-	box-shadow: 0 4px 30px rgb(0 0 0 / 50%);
+	box-shadow: 0 8px 40px 0 rgb(0 0 0 / 35%);
 
 	& li {
 		padding: 5px 20px;
@@ -2499,10 +2499,10 @@
 	font-size: 0.75rem;
 	box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
 	color: #6c6c6c;
+	text-align: center;
 	text-shadow: 0 1px #fafafa;
 	border: 1px solid #b8b8b8;
 	background-color: #eaeaea;
-	margin-top: -2px;
 }
 
 .l-unit--suspended .badge {

web/css/src/utilities.css

@@ -19,6 +19,16 @@
 	display: none !important;
 }
 
+.u-hidden-visually {
+	border: 0 !important;
+	clip: rect(1px, 1px, 1px, 1px) !important;
+	height: 1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+}
+
 .u-noselect {
 	user-select: none !important;
 }

web/templates/pages/list_access_keys.php

@@ -12,7 +12,10 @@
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
-					<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
+					<?= _("Sort by") ?>:
+					<span class="u-text-bold">
+						<?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">

web/templates/pages/list_cron.php

@@ -21,10 +21,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Command'); } else { $label = _('Date'); } ?>
 						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-name">

web/templates/pages/list_db.php

@@ -40,10 +40,10 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-charset">
@@ -185,7 +185,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 										<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
 											<a
 												class="data-controls js-confirm-action"
-												href="/<?=$spnd_action?>/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>"
+												href="/<?= $spnd_action ?>/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>"
 												data-confirm-title="<?= $spnd_action_title ?>"
 												data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
 											>

web/templates/pages/list_dns.php

@@ -12,10 +12,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
@@ -179,7 +179,7 @@
 							<li class="units-table-row-action shortcut-s" data-key-action="js">
 								<a
 									class="units-table-row-action-link data-controls js-confirm-action"
-									href="/<?=$spnd_action?>/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>"
+									href="/<?= $spnd_action ?>/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>"
 									title="<?= $spnd_action_title ?>"
 									data-confirm-title="<?= $spnd_action_title ?>"
 									data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"

web/templates/pages/list_dns_public.php

@@ -12,10 +12,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">

web/templates/pages/list_dns_rec.php

@@ -18,10 +18,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Record'); } else { $label = _('Date'); } ?>
 						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">

web/templates/pages/list_firewall.php

@@ -20,7 +20,10 @@
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
-					<?= _("Sort by") ?>: <b><?= _("Action") ?> <i class="fas fa-arrow-up-a-z"></i></b>
+					<?= _("Sort by") ?>:
+					<span class="u-text-bold">
+						<?= _("Action") ?> <i class="fas fa-arrow-up-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-action">
@@ -121,7 +124,7 @@
 									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
 										<a
 											class="data-controls js-confirm-action"
-											href="/<?=$spnd_action?>/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>"
+											href="/<?= $spnd_action ?>/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>"
 											data-confirm-title="<?= $spnd_action_title ?>"
 											data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
 										>

web/templates/pages/list_ip.php

@@ -12,7 +12,10 @@
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
-					<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
+					<?= _("Sort by") ?>:
+					<span class="u-text-bold">
+						<?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">

web/templates/pages/list_mail.php

@@ -12,10 +12,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-accounts" data-sort-as-int="1">
@@ -266,7 +266,7 @@
 							<li class="units-table-row-action shortcut-s" data-key-action="js">
 								<a
 									class="units-table-row-action-link data-controls js-confirm-action"
-									href="/<?=$spnd_action?>/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
+									href="/<?= $spnd_action ?>/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
 									title="<?= $spnd_action_title ?>"
 									data-confirm-title="<?= $spnd_action_title ?>"
 									data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"

web/templates/pages/list_mail_acc.php

@@ -24,10 +24,10 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
@@ -180,7 +180,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
 										<a
 											class="data-controls js-confirm-action"
-											href="/<?=$spnd_action?>/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>"
+											href="/<?= $spnd_action ?>/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>"
 											data-confirm-title="<?= $spnd_action_title ?>"
 											data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
 										>

web/templates/pages/list_packages.php

@@ -13,10 +13,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">

web/templates/pages/list_search.php

@@ -12,7 +12,10 @@
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
-					<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
+					<?= _("Sort by") ?>:
+					<span class="u-text-bold">
+						<?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">

web/templates/pages/list_user.php

@@ -13,10 +13,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?= $label ?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-bandwidth" data-sort-as-int="1">
@@ -69,24 +69,42 @@
 
 <div class="container">
 
-	<div class="units js-units-container">
-		<!-- 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-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>
-				<div class="clearfix l-unit__stat-col--left u-text-center width"><b><?= _("Package") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><?= _("IPs") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-6"><b><i class="fas fa-hard-drive" title="<?= _("Disk") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-6"><b><i class="fas fa-right-left" title="<?= _("Bandwidth") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-earth-americas" title="<?= _("Web Domains") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-book-atlas" title="<?= _("DNS Zones") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-envelopes-bulk" title="<?= _("Mail Domains") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-database" title="<?= _("Databases") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><b><i class="fas fa-file-zipper" title="<?= _("Backups") ?>"></i></b></div>
+	<div class="units-table js-units-container">
+		<div class="units-table-header">
+			<div class="units-table-cell">
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
+			</div>
+			<div class="units-table-cell"><?= _("Name") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell"><?= _("Package") ?></div>
+			<div class="units-table-cell"><?= _("IPs") ?></div>
+			<div class="units-table-cell">
+				<i class="fas fa-hard-drive" title="<?= _("Disk") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Disk") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-right-left" title="<?= _("Bandwidth") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Bandwidth") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-earth-americas" title="<?= _("Web Domains") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Web Domains") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-book-atlas" title="<?= _("DNS Zones") ?>"></i>
+				<span class="u-hidden-visually"><?= _("DNS Zones") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-envelopes-bulk" title="<?= _("Mail Domains") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Mail Domains") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-database" title="<?= _("Databases") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Databases") ?></span>
+			</div>
+			<div class="units-table-cell">
+				<i class="fas fa-file-zipper" title="<?= _("Backups") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Backups") ?></span>
 			</div>
 		</div>
 
@@ -99,97 +117,182 @@
 					$spnd_action = 'unsuspend';
 					$spnd_action_title = _('Unsuspend');
 					$spnd_icon = 'fa-play';
+					$spnd_icon_class = 'icon-green';
 					$spnd_confirmation = _('Are you sure you want to unsuspend user %s?');
 				} else {
 					$status = 'active';
 					$spnd_action = 'suspend';
 					$spnd_action_title = _('Suspend');
 					$spnd_icon = 'fa-pause';
+					$spnd_icon_class = 'icon-highlight';
 					$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-unit"
+			<div class="units-table-row <?php if ($status == 'suspended') echo 'disabled'; ?> animate__animated animate__fadeIn js-unit <?php if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($_SESSION['user'] !== 'admin') && ($key === 'admin')) { echo 'u-hidden'; } ?>"
 				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">
+				<div class="units-table-cell">
+					<div>
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="user[]" value="<?= $key ?>">
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left wide-3 userlist-username">
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
+					<?php if ($key == $user_plain) { ?>
+						<a href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit User") ?>">
+							<span class="u-text-bold">
+								<?=$key?>
+							</span>
+							(<?=$data[$key]['NAME'];?>)
+						</a>
+					<?php } else { ?>
+						<a href="/login/?loginas=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Log in as") ?> <?=$key?>">
+							<span class="u-text-bold">
+								<?=$key?>
+							</span>
+							(<?=$data[$key]['NAME'];?>)
+						</a>
+					<?php } ?>
+					<p>
+						<span class="u-text-bold"><?= _("Email") ?>:</span>
+						<?= $data[$key]["CONTACT"] ?>
+					</p>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
 						<?php if ($key == $user_plain) { ?>
-							<b><a href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit User") ?>"><?=$key?> <span style="font-weight: normal !important;">(<?=$data[$key]['NAME'];?>)</span></a></b>
+							<li class="units-table-row-action">
+								<i class="fas fa-user-check icon-dim" title="<?= $key ?> (<?= $data[$key]["NAME"] ?>)"></i>
+								<span class="u-hide-desktop"><?= $key ?> (<?= $data[$key]["NAME"] ?>)</span>
+							</li>
 						<?php } else { ?>
-							<b><a href="/login/?loginas=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Log in as") ?> <?=$key?>"><?=$key?> <span style="font-weight: normal !important;">(<?=$data[$key]['NAME'];?>)</span></a></b>
+							<li class="units-table-row-action">
+								<a
+									class="units-table-row-action-link"
+									href="/login/?loginas=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= _("Log in as") ?> <?= $key ?>"
+								>
+									<i class="fas fa-right-to-bracket icon-green"></i>
+									<span class="u-hide-desktop"><?= _("Log in as") ?> <?= $key ?></span>
+								</a>
+							</li>
 						<?php } ?>
-						<br>
-						<div class="userlist-email"><b><?= _("Email") ?>:</b> <?= $data[$key]["CONTACT"] ?></div>
-					</div>
-					<!-- START QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left u-text-right compact-3">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<?php if ($key == $user_plain) { ?>
-									<i class="fas fa-user-check icon-dim" title="<?= $key ?> (<?= $data[$key]["NAME"] ?>)"></i>
-								<?php } else { ?>
-									<a href="/login/?loginas=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Log in as") ?> <?= $key ?>"><i class="fas fa-right-to-bracket icon-green icon-dim"></i></a>
-								<?php } ?>
-								<?php if ($_SESSION["userContext"] === "admin" && $key == "admin" && $_SESSION["user"] != "admin") { ?>
-									<!-- Hide edit button from admin user when logged in with another admin user -->
-									&nbsp;
-								<?php } else { ?>
-									<div class="actions-panel__col actions-panel__edit shortcut-enter" data-key-action="href"><a href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit User") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
-								<?php } ?>
-								<?php if ($key == "admin") { ?>
-									<!-- Hide suspend and delete buttons in the user list for primary 'admin' account -->
-								<?php } else { ?>
-									<?php if ($key == $user_plain) { ?>
-										<!-- Hide suspend and delete buttons in the user list for current user -->
-									<?php } else { ?>
-									<div class="actions-panel__col actions-panel__suspend shortcut-s" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/<?= $spnd_action ?>/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
-											data-confirm-title="<?= $spnd_action_title ?>"
-											data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
-										>
-											<i class="fas <?= $spnd_icon ?> icon-highlight icon-dim"></i>
-										</a>
-									</div>
-									<div class="actions-panel__col actions-panel__delete shortcut-delete" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/delete/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
-											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_('Are you sure you want to delete user %s?'), $key) ?>"
-										>
-											<i class="fas fa-trash icon-red icon-dim"></i>
-										</a>
-									</div>
-									<?php } ?>
-								<?php } ?>
-							</div>
-						</div>
-					</div>
-					<!-- END QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left u-text-center width">
-						<b>
-							<?php if ($data[$key]["PACKAGE"] === "system") { ?>
-								<?= $data[$key]["PACKAGE"] ?>
-							<?php } else { ?>
-								<a href="/edit/package/?package=<?= $data[$key]["PACKAGE"] ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Package") ?>"><?= $data[$key]["PACKAGE"] ?></a>
-							<?php } ?>
-						</b>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact"><?= $data[$key]["IP_OWNED"] ?></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-6"><b><?= humanize_usage_size($data[$key]["U_DISK"],1) ?></b><span class="u-text-small"><?= humanize_usage_measure($data[$key]["U_DISK"]) ?></span> / <b><?= humanize_usage_size($data[$key]["DISK_QUOTA"],1) ?></b><span class="u-text-small"><?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-6"><b><?= humanize_usage_size($data[$key]["U_BANDWIDTH"],1) ?></b><span class="u-text-small"><?= humanize_usage_measure($data[$key]["U_BANDWIDTH"]) ?></span> / <b><?= humanize_usage_size($data[$key]["BANDWIDTH"],1) ?></b><span class="u-text-small"><?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_WEB_DOMAINS"] ?> <?= _("Web Domains") ?>"><span class="badge"><b><?= $data[$key]["U_WEB_DOMAINS"] ?></b></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_DNS_DOMAINS"] ?> <?= _("DNS Zones") ?>"><span class="badge"><b><?= $data[$key]["U_DNS_DOMAINS"] ?></b></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_MAIL_DOMAINS"] ?> <?= _("Mail Domains") ?>"><span class="badge"><b><?= $data[$key]["U_MAIL_DOMAINS"] ?></b></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_DATABASES"] ?> <?= _("Databases") ?>"><span class="badge"><b><?= $data[$key]["U_DATABASES"] ?></b></span></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_BACKUPS"] ?> <?= _("Backups") ?>"><span class="badge"><b><?= $data[$key]["U_BACKUPS"] ?></b></span></div>
+						<?php if (!($_SESSION["userContext"] === "admin" && $key == "admin" && $_SESSION["user"] != "admin")) { ?>
+							<li class="units-table-row-action shortcut-enter" data-key-action="href">
+								<a
+									class="units-table-row-action-link"
+									href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>"
+									title="<?= _("Edit User") ?>"
+								>
+									<i class="fas fa-pencil icon-orange"></i>
+									<span class="u-hide-desktop"><?= _("Edit User") ?></span>
+								</a>
+							</li>
+						<?php } ?>
+						<?php if (!($key == "admin" || $key == $user_plain)) { ?>
+							<li class="units-table-row-action shortcut-s" data-key-action="js">
+								<a
+									class="units-table-row-action-link data-controls js-confirm-action"
+									href="/<?= $spnd_action ?>/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= $spnd_action_title ?>"
+									data-confirm-title="<?= $spnd_action_title ?>"
+									data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"
+								>
+									<i class="fas <?= $spnd_icon ?> <?= $spnd_icon_class ?>"></i>
+									<span class="u-hide-desktop"><?= $spnd_action_title ?></span>
+								</a>
+							</li>
+							<li class="units-table-row-action shortcut-delete" data-key-action="js">
+								<a
+									class="units-table-row-action-link data-controls js-confirm-action"
+									href="/delete/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= _("Delete") ?>"
+									data-confirm-title="<?= _("Delete") ?>"
+									data-confirm-message="<?= sprintf(_('Are you sure you want to delete user %s?'), $key) ?>"
+								>
+									<i class="fas fa-trash icon-red"></i>
+									<span class="u-hide-desktop"><?= _("Delete") ?></span>
+								</a>
+							</li>
+						<?php } ?>
+					</ul>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Package") ?>:</span>
+					<?php if ($data[$key]["PACKAGE"] === "system") { ?>
+						<?= $data[$key]["PACKAGE"] ?>
+					<?php } else { ?>
+						<a href="/edit/package/?package=<?= $data[$key]["PACKAGE"] ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Package") ?>">
+							<?= $data[$key]["PACKAGE"] ?>
+						</a>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("IPs") ?>:</span>
+					<?= $data[$key]["IP_OWNED"] ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Disk") ?>:</span>
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]["U_DISK"], 1) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["U_DISK"]) ?>
+					</span> /
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]["DISK_QUOTA"], 1) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Bandwidth") ?>:</span>
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]["U_BANDWIDTH"], 1) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["U_BANDWIDTH"]) ?>
+					</span> /
+					<span class="u-text-bold">
+						<?= humanize_usage_size($data[$key]["BANDWIDTH"], 1) ?>
+					</span>
+					<span class="u-text-small">
+						<?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Web Domains") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_WEB_DOMAINS"] ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("DNS Zones") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_DNS_DOMAINS"] ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Mail Domains") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_MAIL_DOMAINS"] ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Databases") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_DATABASES"] ?>
+					</span>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Backups") ?>:</span>
+					<span class="badge">
+						<?= $data[$key]["U_BACKUPS"] ?>
+					</span>
 				</div>
 			</div>
 		<?php } ?>

web/templates/pages/list_web.php

@@ -12,10 +12,10 @@
 			<div class="toolbar-sorting">
 				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
-					<b>
+					<span class="u-text-bold">
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = ('Name'); } else { $label = _('Date'); } ?>
 						<?=$label?> <i class="fas fa-arrow-down-a-z"></i>
-					</b>
+					</span>
 				</button>
 				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-bandwidth" data-sort-as-int="1">
@@ -268,7 +268,7 @@
 							<li class="units-table-row-action shortcut-s" data-key-action="js">
 								<a
 									class="units-table-row-action-link data-controls js-confirm-action"
-									href="/<?=$spnd_action?>/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
+									href="/<?= $spnd_action ?>/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>"
 									title="<?= $spnd_action_title ?>"
 									data-confirm-title="<?= $spnd_action_title ?>"
 									data-confirm-message="<?= sprintf($spnd_confirmation, $key) ?>"