Tidy some classes (#3722)

* Tidy classes

* Replace .u-max-width250 with .u-max-width200

* Add .compact variant of table cells

* Fix "Purge Nginx Cache" button not matching "caching-"

closes #3723

web/css/src/themes/default.css

@@ -984,6 +984,11 @@
 		&:nth-child(1) {
 			line-height: 0.6;
 		}
+
+		&.compact {
+			padding-left: 10px;
+			padding-right: 10px;
+		}
 	}
 }
 

web/css/src/utilities.css

@@ -139,8 +139,8 @@
 	min-height: 600px !important;
 }
 
-.u-max-width250 {
-	max-width: 250px !important;
+.u-max-width200 {
+	max-width: 200px !important;
 }
 
 .u-max-width300 {

web/js/src/editWebListeners.js

@@ -55,7 +55,8 @@ export default function handleEditWebListeners() {
 	const clearCacheButton = document.querySelector('.js-clear-cache-button');
 	if (proxyTemplateSelect && clearCacheButton) {
 		proxyTemplateSelect.addEventListener('change', () => {
-			if (proxyTemplateSelect.value === 'caching') {
+			// NOTE: Match "caching" and "caching-*" values
+			if (proxyTemplateSelect.value === 'caching' || proxyTemplateSelect.value.match(/^caching-/)) {
 				clearCacheButton.classList.remove('u-hidden');
 			} else {
 				clearCacheButton.classList.add('u-hidden');

web/templates/pages/list_packages.php

@@ -65,39 +65,39 @@
 				<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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact u-text-center">
 				<i class="fas fa-file-zipper" title="<?= _("Backups") ?>"></i>
 				<span class="u-hidden-visually"><?= _("Backups") ?></span>
 			</div>
@@ -170,7 +170,7 @@
 					</ul>
 				</div>
 				<div class="units-table-cell u-text-center-desktop">
-					<span class="u-hide-desktop"><?= _("Shell") ?>:</span>
+					<span class="u-hide-desktop u-text-bold"><?= _("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 { ?>
@@ -211,7 +211,7 @@
 						<?php } ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<div class="units-table-cell compact 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") { ?>
@@ -221,7 +221,7 @@
 						<?php } ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<div class="units-table-cell compact 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") { ?>
@@ -231,7 +231,7 @@
 						<?php } ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<div class="units-table-cell compact 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") { ?>
@@ -241,7 +241,7 @@
 						<?php } ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<div class="units-table-cell compact 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") { ?>
@@ -251,7 +251,7 @@
 						<?php } ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<div class="units-table-cell compact 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") { ?>
@@ -261,7 +261,7 @@
 						<?php } ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<div class="units-table-cell compact 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") { ?>
@@ -271,7 +271,7 @@
 						<?php } ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<div class="units-table-cell compact 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") { ?>
@@ -281,7 +281,7 @@
 						<?php } ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<div class="units-table-cell compact 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") { ?>
@@ -291,7 +291,7 @@
 						<?php } ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<div class="units-table-cell compact 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") { ?>

web/templates/pages/list_user.php

@@ -88,23 +88,23 @@
 				<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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact 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">
+			<div class="units-table-cell compact u-text-center">
 				<i class="fas fa-file-zipper" title="<?= _("Backups") ?>"></i>
 				<span class="u-hidden-visually"><?= _("Backups") ?></span>
 			</div>
@@ -142,7 +142,7 @@
 					</div>
 				</div>
 				<div class="units-table-cell units-table-heading-cell">
-					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
+					<span class="u-hide-desktop u-text-bold"><?= _("Name") ?>:</span>
 					<?php if ($key == $user_plain) { ?>
 						<a href="/edit/user/?user=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit User") ?>">
 							<span class="u-text-bold">
@@ -158,8 +158,8 @@
 							(<?= $data[$key]["NAME"] ?>)
 						</a>
 					<?php } ?>
-					<p class="u-max-width250 u-text-truncate">
-						<span class="u-hide-desktop"><?= _("Email") ?>:</span>
+					<p class="u-max-width200 u-text-truncate">
+						<span class="u-hide-desktop u-text-bold"><?= _("Email") ?>:</span>
 						<span title="<?= $data[$key]["CONTACT"] ?>"><?= $data[$key]["CONTACT"] ?></span>
 					</p>
 				</div>
@@ -266,31 +266,31 @@
 						<?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-center-desktop">
+				<div class="units-table-cell compact u-text-center-desktop">
 					<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 u-text-center-desktop">
+				<div class="units-table-cell compact u-text-center-desktop">
 					<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 u-text-center-desktop">
+				<div class="units-table-cell compact u-text-center-desktop">
 					<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 u-text-center-desktop">
+				<div class="units-table-cell compact u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Databases") ?>:</span>
 					<span class="badge">
 						<?= $data[$key]["U_DATABASES"] ?>
 					</span>
 				</div>
-				<div class="units-table-cell u-text-center-desktop">
+				<div class="units-table-cell compact u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Backups") ?>:</span>
 					<span class="badge">
 						<?= $data[$key]["U_BACKUPS"] ?>