UI fixes (#3700)

* Improve robustness of list view actions on desktop

* Prevent DNS record values breaking table layout

* Tidy some view code

* Tidy some view code

web/add/access-key/index.php

@@ -79,8 +79,8 @@ if (!empty($_POST["ok"])) {
 				_("Access key {%s} has been created successfully."),
 				htmlentities($key_data["ACCESS_KEY_ID"]),
 			),
-			"</b>",
-			"<b>",
+			"</code>",
+			"<code>",
 		);
 		unset($apis_selected);
 		unset($check_invalid_apis);

web/css/src/themes/default.css

@@ -994,6 +994,7 @@
 
 	@media (--viewport-large) {
 		visibility: hidden;
+		flex-wrap: nowrap;
 		padding-top: 0;
 	}
 }
@@ -2387,7 +2388,7 @@
 }
 
 .inline-alert-warning {
-	color: #ffd500;
+	color: #ecc500;
 }
 
 .inline-alert-success {
@@ -2463,7 +2464,7 @@
 	background-color: #ff0;
 
 	&:hover {
-		background-color: #ee0;
+		background-color: #f1f100;
 	}
 }
 

web/templates/includes/panel.php

@@ -260,10 +260,10 @@
 							<p class="main-menu-item-label"><?= _("USER") ?><i class="fas fa-users"></i></p>
 							<ul class="main-menu-stats">
 								<li>
-									<?= _("Users") ?>: <span><?= htmlspecialchars($user_count) ?></span>
+									<?= _("Users") ?>: <?= htmlspecialchars($user_count) ?>
 								</li>
 								<li>
-									<?= _("Suspended") ?>: <span><?= $panel[$user]["SUSPENDED_USERS"] ?></span>
+									<?= _("Suspended") ?>: <?= $panel[$user]["SUSPENDED_USERS"] ?>
 								</li>
 							</ul>
 						</a>
@@ -278,10 +278,10 @@
 								<p class="main-menu-item-label"><?= _("WEB") ?><i class="fas fa-earth-americas"></i></p>
 								<ul class="main-menu-stats">
 									<li>
-										<?= _("Domains") ?>: <span><?= $panel[$user]["U_WEB_DOMAINS"] ?> / <?= $panel[$user]["WEB_DOMAINS"] == "unlimited" ? "<b>∞</b>" : $panel[$user]["WEB_DOMAINS"] ?> (<?= $panel[$user]["SUSPENDED_WEB"] ?>)</span>
+										<?= _("Domains") ?>: <?= $panel[$user]["U_WEB_DOMAINS"] ?> / <?= $panel[$user]["WEB_DOMAINS"] == "unlimited" ? "<span class=\"u-text-bold\">∞</span>" : $panel[$user]["WEB_DOMAINS"] ?> (<?= $panel[$user]["SUSPENDED_WEB"] ?>)
 									</li>
 									<li>
-										<?= _("Aliases") ?>: <span><?= $panel[$user]["U_WEB_ALIASES"] ?> / <?= $panel[$user]["WEB_ALIASES"] == "unlimited" || $panel[$user]["WEB_DOMAINS"] == "unlimited" ? "<b>∞</b>" : $panel[$user]["WEB_ALIASES"] * $panel[$user]["WEB_DOMAINS"] ?></span>
+										<?= _("Aliases") ?>: <?= $panel[$user]["U_WEB_ALIASES"] ?> / <?= $panel[$user]["WEB_ALIASES"] == "unlimited" || $panel[$user]["WEB_DOMAINS"] == "unlimited" ? "<span class=\"u-text-bold\">∞</span>" : $panel[$user]["WEB_ALIASES"] * $panel[$user]["WEB_DOMAINS"] ?>
 									</li>
 								</ul>
 							</a>
@@ -297,10 +297,10 @@
 								<p class="main-menu-item-label"><?= _("DNS") ?><i class="fas fa-book-atlas"></i></p>
 								<ul class="main-menu-stats">
 									<li>
-										<?= _("Zones") ?>: <span><?= $panel[$user]["U_DNS_DOMAINS"] ?> / <?= $panel[$user]["DNS_DOMAINS"] == "unlimited" ? "<b>∞</b>" : $panel[$user]["DNS_DOMAINS"] ?> (<?= $panel[$user]["SUSPENDED_DNS"] ?>)</span>
+										<?= _("Zones") ?>: <?= $panel[$user]["U_DNS_DOMAINS"] ?> / <?= $panel[$user]["DNS_DOMAINS"] == "unlimited" ? "<span class=\"u-text-bold\">∞</span>" : $panel[$user]["DNS_DOMAINS"] ?> (<?= $panel[$user]["SUSPENDED_DNS"] ?>)
 									</li>
 									<li>
-										<?= _("Records") ?>: <span><?= $panel[$user]["U_DNS_RECORDS"] ?> / <?= $panel[$user]["DNS_RECORDS"] == "unlimited" || $panel[$user]["DNS_DOMAINS"] == "unlimited" ? "<b>∞</b>" : $panel[$user]["DNS_RECORDS"] * $panel[$user]["DNS_DOMAINS"] ?></span>
+										<?= _("Records") ?>: <?= $panel[$user]["U_DNS_RECORDS"] ?> / <?= $panel[$user]["DNS_RECORDS"] == "unlimited" || $panel[$user]["DNS_DOMAINS"] == "unlimited" ? "<span class=\"u-text-bold\">∞</span>" : $panel[$user]["DNS_RECORDS"] * $panel[$user]["DNS_DOMAINS"] ?>
 									</li>
 								</ul>
 							</a>
@@ -316,10 +316,10 @@
 								<p class="main-menu-item-label"><?= _("MAIL") ?><i class="fas fa-envelopes-bulk"></i></p>
 								<ul class="main-menu-stats">
 									<li>
-										<?= _("Domains") ?>: <span><?= $panel[$user]["U_MAIL_DOMAINS"] ?> / <?= $panel[$user]["MAIL_DOMAINS"] == "unlimited" ? "<b>∞</b>" : $panel[$user]["MAIL_DOMAINS"] ?> (<?= $panel[$user]["SUSPENDED_MAIL"] ?>)</span>
+										<?= _("Domains") ?>: <?= $panel[$user]["U_MAIL_DOMAINS"] ?> / <?= $panel[$user]["MAIL_DOMAINS"] == "unlimited" ? "<span class=\"u-text-bold\">∞</span>" : $panel[$user]["MAIL_DOMAINS"] ?> (<?= $panel[$user]["SUSPENDED_MAIL"] ?>)
 									</li>
 									<li>
-										<?= _("Accounts") ?>: <span><?= $panel[$user]['U_MAIL_ACCOUNTS'] ?> / <?= $panel[$user]['MAIL_ACCOUNTS']=='unlimited' || $panel[$user]['MAIL_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['MAIL_ACCOUNTS'] * $panel[$user]['MAIL_DOMAINS'] ?></span>
+										<?= _("Accounts") ?>: <?= $panel[$user]['U_MAIL_ACCOUNTS'] ?> / <?= $panel[$user]['MAIL_ACCOUNTS']=='unlimited' || $panel[$user]['MAIL_DOMAINS']=='unlimited' ? "<span class=\"u-text-bold\">∞</span>" : $panel[$user]['MAIL_ACCOUNTS'] * $panel[$user]['MAIL_DOMAINS'] ?>
 									</li>
 								</ul>
 							</a>
@@ -335,7 +335,7 @@
 								<p class="main-menu-item-label"><?= _("DB") ?><i class="fas fa-database"></i></p>
 								<ul class="main-menu-stats">
 									<li>
-										<?= _("Databases") ?>: <span><?= $panel[$user]["U_DATABASES"] ?> / <?= $panel[$user]["DATABASES"] == "unlimited" ? "<b>∞</b>" : $panel[$user]["DATABASES"] ?> (<?= $panel[$user]["SUSPENDED_DB"] ?>)</span>
+										<?= _("Databases") ?>: <?= $panel[$user]["U_DATABASES"] ?> / <?= $panel[$user]["DATABASES"] == "unlimited" ? "<span class=\"u-text-bold\">∞</span>" : $panel[$user]["DATABASES"] ?> (<?= $panel[$user]["SUSPENDED_DB"] ?>)
 									</li>
 								</ul>
 							</a>
@@ -351,7 +351,7 @@
 								<p class="main-menu-item-label"><?= _("CRON") ?><i class="fas fa-clock"></i></p>
 								<ul class="main-menu-stats">
 									<li>
-										<?= _("Jobs") ?>: <span><?= $panel[$user]["U_CRON_JOBS"] ?> / <?= $panel[$user]["CRON_JOBS"] == "unlimited" ? "<b>∞</b>" : $panel[$user]["CRON_JOBS"] ?> (<?= $panel[$user]["SUSPENDED_CRON"] ?>)</span>
+										<?= _("Jobs") ?>: <?= $panel[$user]["U_CRON_JOBS"] ?> / <?= $panel[$user]["CRON_JOBS"] == "unlimited" ? "<span class=\"u-text-bold\">∞</span>" : $panel[$user]["CRON_JOBS"] ?> (<?= $panel[$user]["SUSPENDED_CRON"] ?>)
 									</li>
 								</ul>
 							</a>
@@ -367,7 +367,7 @@
 								<p class="main-menu-item-label"><?= _("BACKUP") ?><i class="fas fa-file-zipper"></i></p>
 								<ul class="main-menu-stats">
 									<li>
-										<?= _("Backups") ?>: <span><?= $panel[$user]["U_BACKUPS"] ?> / <?= $panel[$user]["BACKUPS"] == "unlimited" ? "<b>∞</b>" : $panel[$user]["BACKUPS"] ?></span>
+										<?= _("Backups") ?>: <?= $panel[$user]["U_BACKUPS"] ?> / <?= $panel[$user]["BACKUPS"] == "unlimited" ? "<span class=\"u-text-bold\">∞</span>" : $panel[$user]["BACKUPS"] ?>
 									</li>
 								</ul>
 							</a>

web/templates/pages/add_db.php

@@ -45,7 +45,7 @@
 			<?php } ?>
 			<?php if (($user_plain == "admin" && $accept === "true") || $user_plain !== "admin") { ?>
 				<p class="hint u-mb20">
-					<?= sprintf(_("Prefix %s will be automatically added to database name and database user"), "<b>" . $user_plain . "_</b>") ?>
+					<?= sprintf(_("Prefix %s will be automatically added to database name and database user"), "<span class=\"u-text-bold\">" . $user_plain . "_</span>") ?>
 				</p>
 				<div class="u-mb10">
 					<label for="v_database" class="form-label"><?= _("Database") ?></label>

web/templates/pages/debug_panel.php

@@ -10,25 +10,25 @@
 		<?php
 			echo "<h3 class=\"u-mb10\">Server Variables</h3>";
 			foreach ($_SERVER as $key => $val) {
-				echo "<b>" . $key . "= </b> " . $val . " ";
+				echo "<span class=\"u-text-bold\">" . $key . "= </span> " . $val . " ";
 			}
   	?>
 		<?php
 			echo "<h3 class=\"u-mb10 u-mt10\">Session Variables</h3>";
 			foreach ($_SESSION as $key => $val) {
-				echo "<b>" . $key . "= </b> " . $val . " ";
+				echo "<span class=\"u-text-bold\">" . $key . "= </span> " . $val . " ";
 			}
   	?>
 		<?php
 			echo "<h3 class=\"u-mb10 u-mt10\">POST Variables</h3>";
 			foreach ($_POST as $key => $val) {
-				echo "<b>" . $key . "= </b> " . $val . " ";
+				echo "<span class=\"u-text-bold\">" . $key . "= </span> " . $val . " ";
 			}
   	?>
 		<?php
 			echo "<h3 class=\"u-mb10 u-mt10\">GET Variables</h3>";
 			foreach ($_GET as $key => $val) {
-				echo "<b>" . $key . "= </b> " . $val . " ";
+				echo "<span class=\"u-text-bold\">" . $key . "= </span> " . $val . " ";
 			}
   	?>
 	</div>

web/templates/pages/list_dns_rec.php

@@ -163,7 +163,9 @@
 				</div>
 				<div class="units-table-cell">
 					<span class="u-hide-desktop u-text-bold"><?= _("IP or Value") ?>:</span>
-					<?= htmlspecialchars($data[$key]["VALUE"], ENT_QUOTES, "UTF-8") ?>
+					<span class="u-text-break">
+						<?= htmlspecialchars($data[$key]["VALUE"], ENT_QUOTES, "UTF-8") ?>
+					</span>
 				</div>
 			</div>
 		<?php } ?>

web/templates/pages/list_firewall.php

@@ -105,7 +105,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell u-text-bold units-table-heading-cell">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Action") ?>:</span>
 					<a href="/edit/firewall/?rule=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Edit Firewall Rule") ?>">
 						<?php