Migrate List Packages to .units-table (#3685)

web/templates/pages/list_packages.php

@@ -44,26 +44,60 @@
 
 <div class="container">
 
-	<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">
-					<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>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact"><b><i class="fas fa-terminal" title="<?= _("Shell") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-2"><b><i class="fas fa-hard-drive" title="<?= _("Quota") ?>"></i></b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center compact-2"><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-link" title="<?= _("Web Aliases") ?>"></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-globe" title="<?= _("DNS Records") ?>"></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-inbox" title="<?= _("Mail Accounts") ?>"></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-clock" title="<?= _("Cron Jobs") ?>"></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"><?= _("Package") ?></div>
+			<div class="units-table-cell"></div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-terminal" title="<?= _("Shell") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Shell") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-hard-drive" title="<?= _("Quota") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Quota") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-right-left" title="<?= _("Bandwidth") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Bandwidth") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-earth-americas" title="<?= _("Web Domains") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Web Domains") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-link" title="<?= _("Web Aliases") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Web Aliases") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-book-atlas" title="<?= _("DNS Zones") ?>"></i>
+				<span class="u-hidden-visually"><?= _("DNS Zones") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-globe" title="<?= _("DNS Records") ?>"></i>
+				<span class="u-hidden-visually"><?= _("DNS Records") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-envelopes-bulk" title="<?= _("Mail Domains") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Mail Domains") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-inbox" title="<?= _("Mail Accounts") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Mail Accounts") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-database" title="<?= _("Databases") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Databases") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-clock" title="<?= _("Cron Jobs") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Cron Jobs") ?></span>
+			</div>
+			<div class="units-table-cell u-text-center">
+				<i class="fas fa-file-zipper" title="<?= _("Backups") ?>"></i>
+				<span class="u-hidden-visually"><?= _("Backups") ?></span>
 			</div>
 		</div>
 
@@ -72,156 +106,198 @@
 			foreach ($data as $key => $value) {
 				++$i;
 			?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit"
+			<div class="units-table-row 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">
+				<div class="units-table-cell">
+					<div>
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" title="<?= _("Select") ?>" name="package[]" value="<?= $key ?>">
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
+				</div>
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Package") ?>:</span>
 					<?php if ($key == "system") { ?>
-						<div class="clearfix l-unit__stat-col--left wide"><b><?= $key ?></b></div>
+						<?= $key ?>
 					<?php } else { ?>
-						<div class="clearfix l-unit__stat-col--left wide">
-							<b><a href="/edit/package/?package=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Package") ?>: <?= $key ?>"><?= $key ?></a></b>
-						</div>
+						<a href="/edit/package/?package=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Package") ?>: <?= $key ?>">
+							<?= $key ?>
+						</a>
 					<?php } ?>
-					<!-- 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 == "system") { ?>
-									<!-- Restrict editing system package -->
-								<?php } else { ?>
-									<div class="actions-panel__col actions-panel__edit shortcut-enter" data-key-action="href"><a href="/edit/package/?package=<?= $key ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Edit Package") ?>"><i class="fas fa-pencil icon-orange icon-dim"></i></a></div>
-								<?php } ?>
-								<div class="actions-panel__col actions-panel__edit" data-key-action="href"><a href="/copy/package/?package=<?= $key ?>&token=<?= $_SESSION['token'] ?>" title="<?= _("Duplicate") ?>"><i class="fas fa-clone icon-teal icon-dim"></i></a></div>
-								<?php if ($key == 'system') { ?>
-									<!-- Restrict deleting system package -->
-								<?php } else { ?>
-									<div class="actions-panel__col actions-panel__delete shortcut-delete" data-key-action="js">
-										<a
-											class="data-controls js-confirm-action"
-											href="/delete/package/?package=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
-											data-confirm-title="<?= _("Delete") ?>"
-											data-confirm-message="<?= sprintf(_("Are you sure you want to delete package %s?"), $key) ?>"
-										>
-											<i class="fas fa-trash icon-red icon-dim"></i>
-										</a>
-									</div>
-								<?php } ?>
-							</div>
-						</div>
-					</div>
-					<!-- END QUICK ACTION TOOLBAR AREA -->
-					<div class="clearfix l-unit__stat-col--left u-text-center compact">
-						<?php if ($data[$key]["SHELL"] == "nologin") { ?>
-							<i class="fas fa-circle-minus icon-large" title="<?= _("SSH Access") ?>: <?= $data[$key]["SHELL"] ?>"> </i>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<?php if ($key != "system") { ?>
+							<li class="units-table-row-action shortcut-enter" data-key-action="href">
+								<a
+									class="units-table-row-action-link"
+									href="/edit/package/?package=<?= $key ?>&token=<?= $_SESSION['token'] ?>"
+									title="<?= _("Edit Package") ?>"
+								>
+									<i class="fas fa-pencil icon-orange"></i>
+									<span class="u-hide-desktop"><?= _("Edit Package") ?></span>
+								</a>
+							</li>
+						<?php } ?>
+						<li class="units-table-row-action" data-key-action="href">
+							<a
+								class="units-table-row-action-link"
+								href="/copy/package/?package=<?= $key ?>&token=<?= $_SESSION['token'] ?>"
+								title="<?= _("Duplicate") ?>"
+							>
+								<i class="fas fa-clone icon-teal"></i>
+								<span class="u-hide-desktop"><?= _("Duplicate") ?></span>
+							</a>
+						</li>
+						<?php if ($key != "system") { ?>
+							<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/package/?package=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+									title="<?= _("Delete") ?>"
+									data-confirm-title="<?= _("Delete") ?>"
+									data-confirm-message="<?= sprintf(_("Are you sure you want to delete package %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-center-desktop">
+					<span class="u-hide-desktop"><?= _("Shell") ?>:</span>
+					<?php if ($data[$key]["SHELL"] == "nologin") { ?>
+						<i class="fas fa-circle-minus icon-large" title="<?= _("SSH Access") ?>: <?= $data[$key]["SHELL"] ?>"> </i>
+					<?php } else { ?>
+						<i class="fas fa-circle-check icon-green icon-large"></i>
+					<?php } ?>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Quota") ?>:</span>
+					<span title="<?= _("Quota") ?>: <?= humanize_usage_size($data[$key]["DISK_QUOTA"]) ?> <?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?>">
+						<?php if (preg_match("/[a-z]/i", $data[$key]["DISK_QUOTA"])): ?>
+							<span class="u-text-bold">
+								&infin;
+							</span>
+						<?php else: ?>
+							<span class="u-text-bold">
+								<?= humanize_usage_size($data[$key]["DISK_QUOTA"]) ?>
+							</span>
+							<span class="u-text-small">
+								<?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?>
+							</span>
+						<?php endif; ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<span class="u-hide-desktop u-text-bold"><?= _("Bandwidth") ?>:</span>
+					<span title="<?= _("Bandwidth") ?>: <?= humanize_usage_size($data[$key]["BANDWIDTH"]) ?> <?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?>">
+						<?php if ($data[$key]["BANDWIDTH"] == "unlimited") { ?>
+							<span class="u-text-bold">
+								&infin;
+							</span>
 						<?php } else { ?>
-							<i class="fas fa-circle-check icon-green icon-large"></i>
+							<span class="u-text-bold">
+								<?= humanize_usage_size($data[$key]["BANDWIDTH"]) ?>
+							</span>
+							<span class="u-text-small">
+								<?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?>
+							</span>
 						<?php } ?>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-2">
-						<span title="<?= _("Quota") ?>: <?= humanize_usage_size($data[$key]["DISK_QUOTA"]) ?> <?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?>">
-							<?php if (preg_match("/[a-z]/i", $data[$key]["DISK_QUOTA"])): ?>
-								<b>&infin;</b>
-							<?php else: ?>
-								<b><?= humanize_usage_size($data[$key]["DISK_QUOTA"]) ?></b> <span class="u-text-small"><?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?></span>
-							<?php endif; ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center compact-2">
-						<span title="<?= _("Bandwidth") ?>: <?= humanize_usage_size($data[$key]["BANDWIDTH"]) ?> <?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?>">
-							<?php if ($data[$key]["BANDWIDTH"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= humanize_usage_size($data[$key]["BANDWIDTH"]) ?></b> <span class="u-text-small"><?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?></span>
-							<?php } ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-						<span class="badge" title="<?= _("Web Domains") ?>: <?= $data[$key]["WEB_DOMAINS"] ?>">
-							<?php if ($data[$key]["WEB_DOMAINS"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= $data[$key]["WEB_DOMAINS"] ?></b>
-							<?php } ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-						<span class="badge" title="<?= _("Web Aliases") ?>: <?= $data[$key]["WEB_ALIASES"] ?>">
-							<?php if ($data[$key]["WEB_ALIASES"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= $data[$key]["WEB_ALIASES"] ?></b>
-							<?php } ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-						<span class="badge" title="<?= _("DNS Zones") ?>: <?= $data[$key]["DNS_DOMAINS"] ?>">
-							<?php if ($data[$key]["DNS_DOMAINS"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= $data[$key]["DNS_DOMAINS"] ?></b>
-							<?php } ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-						<span class="badge" title="<?= _("DNS Records") ?>: <?= $data[$key]["DNS_RECORDS"] ?>">
-							<?php if ($data[$key]["DNS_RECORDS"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= $data[$key]["DNS_RECORDS"] ?></b>
-							<?php } ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-						<span class="badge" title="<?= _("Mail Domains") ?>: <?= $data[$key]["MAIL_DOMAINS"] ?>">
-							<?php if ($data[$key]["MAIL_DOMAINS"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= $data[$key]["MAIL_DOMAINS"] ?></b>
-							<?php } ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-						<span class="badge" title="<?= _("Mail Accounts") ?>: <?= $data[$key]["MAIL_ACCOUNTS"] ?>">
-							<?php if ($data[$key]["MAIL_ACCOUNTS"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= $data[$key]["MAIL_ACCOUNTS"] ?></b>
-							<?php } ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-						<span class="badge" title="<?= _("Databases") ?>: <?= $data[$key]["DATABASES"] ?>">
-							<?php if ($data[$key]["DATABASES"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= $data[$key]["DATABASES"] ?></b>
-							<?php } ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-						<span class="badge" title="<?= _("Cron Jobs") ?>: <?= $data[$key]["CRON_JOBS"] ?>">
-							<?php if ($data[$key]["CRON_JOBS"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= $data[$key]["CRON_JOBS"] ?></b>
-							<?php } ?>
-						</span>
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-						<span class="badge" title="<?= _("Backups") ?>: <?= $data[$key]["BACKUPS"] ?>">
-							<?php if ($data[$key]["BACKUPS"] == "unlimited") { ?>
-								<b>&infin;</b>
-							<?php } else { ?>
-								<b><?= $data[$key]["BACKUPS"] ?></b>
-							<?php } ?>
-						</span>
-					</div>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Web Domains") ?>:</span>
+					<span class="badge" title="<?= _("Web Domains") ?>: <?= $data[$key]["WEB_DOMAINS"] ?>">
+						<?php if ($data[$key]["WEB_DOMAINS"] == "unlimited") { ?>
+							&infin;
+						<?php } else { ?>
+							<?= $data[$key]["WEB_DOMAINS"] ?>
+						<?php } ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Web Aliases") ?>:</span>
+					<span class="badge" title="<?= _("Web Aliases") ?>: <?= $data[$key]["WEB_ALIASES"] ?>">
+						<?php if ($data[$key]["WEB_ALIASES"] == "unlimited") { ?>
+							&infin;
+						<?php } else { ?>
+							<?= $data[$key]["WEB_ALIASES"] ?>
+						<?php } ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("DNS Zones") ?>:</span>
+					<span class="badge" title="<?= _("DNS Zones") ?>: <?= $data[$key]["DNS_DOMAINS"] ?>">
+						<?php if ($data[$key]["DNS_DOMAINS"] == "unlimited") { ?>
+							&infin;
+						<?php } else { ?>
+							<?= $data[$key]["DNS_DOMAINS"] ?>
+						<?php } ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("DNS Records") ?>:</span>
+					<span class="badge" title="<?= _("DNS Records") ?>: <?= $data[$key]["DNS_RECORDS"] ?>">
+						<?php if ($data[$key]["DNS_RECORDS"] == "unlimited") { ?>
+							&infin;
+						<?php } else { ?>
+							<?= $data[$key]["DNS_RECORDS"] ?>
+						<?php } ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Mail Domains") ?>:</span>
+					<span class="badge" title="<?= _("Mail Domains") ?>: <?= $data[$key]["MAIL_DOMAINS"] ?>">
+						<?php if ($data[$key]["MAIL_DOMAINS"] == "unlimited") { ?>
+							&infin;
+						<?php } else { ?>
+							<?= $data[$key]["MAIL_DOMAINS"] ?>
+						<?php } ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Mail Accounts") ?>:</span>
+					<span class="badge" title="<?= _("Mail Accounts") ?>: <?= $data[$key]["MAIL_ACCOUNTS"] ?>">
+						<?php if ($data[$key]["MAIL_ACCOUNTS"] == "unlimited") { ?>
+							&infin;
+						<?php } else { ?>
+							<?= $data[$key]["MAIL_ACCOUNTS"] ?>
+						<?php } ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Databases") ?>:</span>
+					<span class="badge" title="<?= _("Databases") ?>: <?= $data[$key]["DATABASES"] ?>">
+						<?php if ($data[$key]["DATABASES"] == "unlimited") { ?>
+							&infin;
+						<?php } else { ?>
+							<?= $data[$key]["DATABASES"] ?>
+						<?php } ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Cron Jobs") ?>:</span>
+					<span class="badge" title="<?= _("Cron Jobs") ?>: <?= $data[$key]["CRON_JOBS"] ?>">
+						<?php if ($data[$key]["CRON_JOBS"] == "unlimited") { ?>
+							&infin;
+						<?php } else { ?>
+							<?= $data[$key]["CRON_JOBS"] ?>
+						<?php } ?>
+					</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Backups") ?>:</span>
+					<span class="badge" title="<?= _("Backups") ?>: <?= $data[$key]["BACKUPS"] ?>">
+						<?php if ($data[$key]["BACKUPS"] == "unlimited") { ?>
+							&infin;
+						<?php } else { ?>
+							<?= $data[$key]["BACKUPS"] ?>
+						<?php } ?>
+					</span>
 				</div>
 			</div>
 		<?php } ?>