Some UI tidying (#3145)

* Refactor nested if statement

* Fix typo

* Tidy

* Tidy up "badge" CSS

* Tidy some cron page stuff

README.md

@@ -2,7 +2,7 @@
 
 ![Hestia screenshot](https://hestiacp.com/img/screen_HestiaServer-dark.png)
 
-<h2 align="center">Lightweight and powerful control panel for the modern web.</h2>
+<h2 align="center">Lightweight and powerful control panel for the modern web</h2>
 
 <p align="center"><strong>Latest stable release:</strong> Version 1.6.14 | <a href="https://github.com/hestiacp/hestiacp/blob/release/CHANGELOG.md">View Changelog</a></p>
 

docs/docs/server-administration/backup-restore.md

@@ -90,13 +90,13 @@ If using public and private keys (recommended):
 v-add-backup-host 'sftp' 'remote.ftp-host.ltd' 'backup-user' '/root/id_rsa' '/path-backups/' 'port'
 ```
 
-## How to setup rclone
+## How to setup Rclone
 
 ::: tip
 Initial configuration can only be done via CLI. After that, you can update the settings via the web panel.
 :::
 
-First, download [rclone](https://rclone.org/downloads/). The easiest method is to run this command:
+First, [download Rclone](https://rclone.org/downloads/). The easiest method is to run this command:
 
 ```bash
 sudo -v

web/css/src/themes/dark.css

@@ -739,56 +739,22 @@ form#vstobjects.suspended {
 	background-color: #282828;
 }
 
+/* Badge component
+   ========================================================================== */
+
 .badge {
+	color: #dadada;
+	border-color: #212121;
 	box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px rgb(0 0 0 / 65%);
-	text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-	border: 1px solid #212121 !important;
-}
-
-.badge.large {
-}
-
-.badge.raised {
-	background: radial-gradient(ellipse at center, rgb(40 40 40 / 20%) 0%, rgb(80 80 80 / 5%) 100%);
-}
-
-.l-unit--suspended .badge {
-	background: #303030 !important;
-	color: #808080 !important;
-	text-shadow: 0 -1px rgb(0 0 0 / 40%) !important;
-	box-shadow: 0 1px 2px rgb(25 25 25 / 30%) !important;
-}
-
-.badge.gray {
-	border: 1px solid #181818;
+	text-shadow: 0 1px rgb(0 0 0 / 70%);
 	background-color: #252525;
-	color: #dadada;
-	text-shadow: 0 1px rgb(0 0 0 / 70%) !important;
-}
-
-.badge.blue {
 }
 
-.badge.purple {
-}
-
-.badge.teal {
-}
-
-.badge.maroon {
-	background-color: #ff3478;
-}
-
-.badge.red {
-}
-
-.badge.orange {
-}
-
-.badge.green {
-}
-
-.badge.lightblue {
+.l-unit--suspended .badge {
+	background-color: #303030;
+	color: #808080;
+	text-shadow: 0 -1px rgb(0 0 0 / 40%);
+	box-shadow: 0 1px 2px rgb(25 25 25 / 30%);
 }
 
 .status-icon.large {
@@ -894,16 +860,12 @@ form#vstobjects.suspended {
 	border-bottom: 1px solid #353535;
 }
 
-.helper-container {
+.cron-helper-container {
 	box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
 	border: 1px solid #606060;
 	background-color: #454545;
 }
 
-.context-helper:active {
-	color: #ff3478;
-}
-
 .cron-helper-tabs a {
 	color: #cacaca;
 }
@@ -917,7 +879,7 @@ form#vstobjects.suspended {
 }
 
 .cron-helper-tabs .ui-tabs-selected a,
-li[aria-expanded="true"] a {
+.ui-tabs-tab[aria-expanded="true"] a {
 	color: #ff3478 !important;
 }
 

web/css/src/themes/default.css

@@ -2420,31 +2420,23 @@ form#vstobjects.suspended {
 	z-index: -1;
 }
 
+/* Badge component
+   ========================================================================== */
+
 .badge {
 	display: inline-block;
-	min-width: 24px;
+	min-width: 26px;
 	min-height: 24px;
 	line-height: 24px;
 	border-radius: 50%;
 	font-weight: 700;
 	font-size: 0.75rem;
 	box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
-	text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-	border: 1px solid #b8b8b8 !important;
-}
-
-.badge.large {
-	min-width: 48px;
-	min-height: 48px;
-	line-height: 48px;
-}
-
-.badge.raised {
-	background: radial-gradient(
-		ellipse at center,
-		rgb(255 255 255 / 20%) 0%,
-		rgb(255 255 255 / 5%) 100%
-	);
+	color: #6c6c6c;
+	text-shadow: 0 1px #fafafa;
+	border: 1px solid #b8b8b8;
+	background-color: #eaeaea;
+	margin-top: -2px;
 }
 
 .l-unit--suspended .badge {
@@ -2454,61 +2446,6 @@ form#vstobjects.suspended {
 	box-shadow: 0 1px 2px rgb(120 120 120 / 30%) !important;
 }
 
-.badge.gray {
-	border: 1px solid #fff;
-	background-color: #eaeaea;
-	color: #6c6c6c;
-	text-shadow: 0 1px #fafafa !important;
-}
-
-.badge.blue {
-	border: 1px solid #fff;
-	background-color: #316198;
-	color: #fff;
-}
-
-.badge.purple {
-	border: 1px solid #fff;
-	background-color: #8e2fca;
-	color: #fff;
-}
-
-.badge.teal {
-	border: 1px solid #fff;
-	background-color: #3cc;
-	color: #fff;
-}
-
-.badge.maroon {
-	border: 1px solid #fff;
-	background-color: #c36;
-	color: #fff;
-}
-
-.badge.red {
-	border: 1px solid #fff;
-	background-color: #f33;
-	color: #fff;
-}
-
-.badge.orange {
-	border: 1px solid #fff;
-	background-color: #f6a800;
-	color: #fff;
-}
-
-.badge.green {
-	border: 1px solid #fff;
-	background-color: #53ba55;
-	color: #fff;
-}
-
-.badge.lightblue {
-	border: 1px solid #fff;
-	background-color: #6eb6f0;
-	color: #fff;
-}
-
 .status-icon.large {
 	font-size: 1rem;
 }
@@ -2573,7 +2510,7 @@ form#vstobjects.suspended {
 	text-shadow: 0 !important;
 }
 
-.helper-container {
+.cron-helper-container {
 	float: right;
 	margin-bottom: -450px;
 	margin-top: 202px;
@@ -2589,83 +2526,48 @@ form#vstobjects.suspended {
 	}
 }
 
-.context-helper {
-	text-transform: uppercase;
-	color: #777;
-	font-size: 0.8rem;
-	cursor: pointer;
-	font-weight: 600;
-	float: right;
-
-	&:hover {
-		color: #3b9de8;
-	}
-
-	&:active {
-		color: #c36;
-	}
-}
-
 .cron-helper-tabs {
 	border: none !important;
 	font-family: Exo, system-ui !important;
-}
 
-.cron-helper-tabs a {
-	color: #777;
-	font-weight: 600;
-	line-height: 30px;
-	padding: 0 12px;
-	text-transform: uppercase;
-}
-
-.cron-helper-tabs a:hover {
-	color: #c36;
-}
-
-.cron-helper-tabs a:active {
-	color: #3b9de8;
-}
-
-.cron-helper-tabs .ui-tabs-selected a,
-li[aria-expanded="true"] a {
-	color: #c36;
-}
-
-.cron-helper-tabs .form-label {
-	padding-right: 15px;
-	padding-left: 25px;
-}
+	& a {
+		color: #777;
+		font-weight: 600;
+		line-height: 30px;
+		padding: 0 12px;
+		text-transform: uppercase;
 
-.cron-helper-tabs .form-label.first {
-	display: inline-block;
-	width: 120px;
-	padding-left: 0;
-}
+		&:hover {
+			color: #c36;
+		}
 
-.cron-helper-tabs .form-select {
-	display: inline-block;
-	width: 384px;
-}
+		&:active {
+			color: #3b9de8;
+		}
+	}
 
-.context-helper-close {
-	cursor: pointer;
-	float: right;
-	size: 46px 32px;
-	padding-top: 11px;
-	filter: contrast(50%);
+	& .form-label {
+		padding-right: 15px;
+		padding-left: 25px;
 
-	&:hover {
-		background-color: #aaa;
-		filter: none;
+		&.first {
+			display: inline-block;
+			width: 120px;
+			padding-left: 0;
+		}
 	}
 
-	&:active {
-		background-color: #999;
-		filter: none;
+	& .form-select {
+		display: inline-block;
+		width: 384px;
 	}
 }
 
+.cron-helper-tabs .ui-tabs-selected a,
+.ui-tabs-tab[aria-expanded="true"] a {
+	color: #c36;
+}
+
 .server-console-output {
 	color: #c36;
 	padding: 10px 0 20px 20px;

web/css/src/themes/flat.css

@@ -71,6 +71,9 @@ strong {
 	box-shadow: none;
 }
 
+/* Badge component
+   ========================================================================== */
+
 .badge {
 	box-shadow: none;
 }

web/css/src/themes/vestia.css

@@ -373,11 +373,13 @@ strong {
 	letter-spacing: 0 !important;
 }
 
+/* Badge component
+   ========================================================================== */
+
 .badge {
-	border: none !important;
-	background-color: none !important;
-	box-shadow: none !important;
-	border-radius: 4px !important;
+	border: none;
+	box-shadow: none;
+	border-radius: 4px;
 }
 
 /* Shortcuts panel
@@ -406,14 +408,14 @@ strong {
 	border-radius: 0;
 }
 
-.helper-container {
-	margin-top: 197px;
+.cron-helper-container {
+	margin-top: 201px;
 	border-radius: 0;
 	box-shadow: none;
 }
 
 .cron-helper-tabs .ui-tabs-selected a,
-li[aria-expanded="true"] a {
+.ui-tabs-tab[aria-expanded="true"] a {
 	color: #ff6701;
 }
 

web/css/src/utilities.css

@@ -11,10 +11,6 @@
 	clear: both;
 }
 
-.jump-top {
-	margin-top: -60px !important;
-}
-
 .u-block {
 	display: block !important;
 }

web/js/pages/add_cron.js

@@ -1,15 +1,7 @@
 $(document).ready(function () {
 	$('#tabs').tabs();
-	$('.context-helper').click(function () {
-		$('#tabs').toggle();
-		$('.context-helper').toggle();
-	});
-	$('.context-helper-close').click(function () {
-		$('#tabs').toggle();
-		$('.context-helper').toggle();
-	});
 
-	$('.helper-container form').submit(function () {
+	$('.cron-helper-container form').submit(function () {
 		$('#vstobjects input[name=v_min]')
 			.val($(this).find(':input[name=h_min]').val())
 			.effect('highlight');

web/js/pages/edit_cron.js

@@ -1,15 +1,7 @@
 $(document).ready(function () {
 	$('#tabs').tabs();
-	$('.context-helper').click(function () {
-		$('#tabs').toggle();
-		$('.context-helper').toggle();
-	});
-	$('.context-helper-close').click(function () {
-		$('#tabs').toggle();
-		$('.context-helper').toggle();
-	});
 
-	$('.helper-container form').submit(function () {
+	$('.cron-helper-container form').submit(function () {
 		$('#vstobjects input[name=v_min]')
 			.val($(this).find(':input[name=h_min]').val())
 			.effect('highlight');

web/js/pages/list_rrd.js

@@ -2,7 +2,7 @@
 colors = ['rgba(255,52,120,0.5)', 'rgba(255,52,0,0.5)', 'rgba(255,255,120,0.5)'];
 // Other markups are working see https://www.chartjs.org/docs/latest/
 
-// todo make charts reponsive
+// todo make charts responsive
 (function () {
 	document.querySelectorAll('canvas').forEach(async (el) => {
 		const response = await fetch('/list/rrd/ajax.php', {

web/templates/footer.php

@@ -1,15 +1,15 @@
 	</main>
 <?php if (
 	$_SESSION["userContext"] === "admin" &&
-	$_SESSION["POLICY_SYSTEM_HIDE_SERVICES"] !== "yes"
-) { ?>
-	<?php if ($_SESSION["UPDATE_AVAILABLE"] === "yes") { ?>
-		<p x-data="{ open: true }" x-cloak x-show="open" class="updates-banner">
-			<strong>New updates are available!</strong> To upgrade your server now, run
-			<code>apt update && apt upgrade</code> from a shell session.
-			(<a href="#" x-on:click="open = false"><strong>hide</strong></a>)
-		</p>
-	<?php } ?>
+	$_SESSION["POLICY_SYSTEM_HIDE_SERVICES"] !== "yes" &&
+	$_SESSION["UPDATE_AVAILABLE"] === "yes"
+) {
+?>
+	<p x-data="{ open: true }" x-cloak x-show="open" class="updates-banner">
+		<strong>New updates are available!</strong> To upgrade your server now, run
+		<code>apt update && apt upgrade</code> from a shell session.
+		(<a href="#" x-on:click="open = false"><strong>hide</strong></a>)
+	</p>
 <?php } ?>
 	<div title="<?= _("Confirmation") ?>" class="dialog js-confirm-dialog-redirect">
 		<p><?= _("LEAVE_PAGE_CONFIRMATION") ?></p>

web/templates/pages/add_cron.php

@@ -17,7 +17,7 @@
 
 <div class="container animate__animated animate__fadeIn">
 
-	<div class="helper-container">
+	<div class="cron-helper-container">
 		<div id="tabs" class="cron-helper-tabs">
 			<ul>
 				<li><a href="#tabs-1"><?= _("Minutes") ?></a></li>

web/templates/pages/edit_cron.php

@@ -17,7 +17,7 @@
 
 <div class="container animate__animated animate__fadeIn">
 
-	<div class="helper-container">
+	<div class="cron-helper-container">
 		<div id="tabs" class="cron-helper-tabs">
 			<ul>
 				<li><a href="#tabs-1"><?= _("Minutes") ?></a></li>

web/templates/pages/list_packages.php

@@ -127,7 +127,7 @@
 					</span>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-					<span class="jump-top badge gray raised" title="<?= _("Web Domains") ?>: <?= $data[$key]["WEB_DOMAINS"] ?>">
+					<span class="badge" title="<?= _("Web Domains") ?>: <?= $data[$key]["WEB_DOMAINS"] ?>">
 						<?php if ($data[$key]["WEB_DOMAINS"] == "unlimited") { ?>
 							<b>&infin;</b>
 						<?php } else { ?>
@@ -136,7 +136,7 @@
 					</span>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-					<span class="jump-top badge gray raised" title="<?= _("Web Aliases") ?>: <?= $data[$key]["WEB_ALIASES"] ?>">
+					<span class="badge" title="<?= _("Web Aliases") ?>: <?= $data[$key]["WEB_ALIASES"] ?>">
 						<?php if ($data[$key]["WEB_ALIASES"] == "unlimited") { ?>
 							<b>&infin;</b>
 						<?php } else { ?>
@@ -145,7 +145,7 @@
 					</span>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-					<span class="jump-top badge gray raised" title="<?= _("DNS Domains") ?>: <?= $data[$key]["DNS_DOMAINS"] ?>">
+					<span class="badge" title="<?= _("DNS Domains") ?>: <?= $data[$key]["DNS_DOMAINS"] ?>">
 						<?php if ($data[$key]["DNS_DOMAINS"] == "unlimited") { ?>
 							<b>&infin;</b>
 						<?php } else { ?>
@@ -154,7 +154,7 @@
 					</span>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-					<span class="jump-top badge gray raised" title="<?= _("DNS Records") ?>: <?= $data[$key]["DNS_RECORDS"] ?>">
+					<span class="badge" title="<?= _("DNS Records") ?>: <?= $data[$key]["DNS_RECORDS"] ?>">
 						<?php if ($data[$key]["DNS_RECORDS"] == "unlimited") { ?>
 							<b>&infin;</b>
 						<?php } else { ?>
@@ -163,7 +163,7 @@
 					</span>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-					<span class="jump-top badge gray raised" title="<?= _("Mail Domains") ?>: <?= $data[$key]["MAIL_DOMAINS"] ?>">
+					<span class="badge" title="<?= _("Mail Domains") ?>: <?= $data[$key]["MAIL_DOMAINS"] ?>">
 						<?php if ($data[$key]["MAIL_DOMAINS"] == "unlimited") { ?>
 							<b>&infin;</b>
 						<?php } else { ?>
@@ -172,7 +172,7 @@
 					</span>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-					<span class="jump-top badge gray raised" title="<?= _("Mail Accounts") ?>: <?= $data[$key]["MAIL_ACCOUNTS"] ?>">
+					<span class="badge" title="<?= _("Mail Accounts") ?>: <?= $data[$key]["MAIL_ACCOUNTS"] ?>">
 						<?php if ($data[$key]["MAIL_ACCOUNTS"] == "unlimited") { ?>
 							<b>&infin;</b>
 						<?php } else { ?>
@@ -181,7 +181,7 @@
 					</span>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-					<span class="jump-top badge gray raised" title="<?= _("Databases") ?>: <?= $data[$key]["DATABASES"] ?>">
+					<span class="badge" title="<?= _("Databases") ?>: <?= $data[$key]["DATABASES"] ?>">
 						<?php if ($data[$key]["DATABASES"] == "unlimited") { ?>
 							<b>&infin;</b>
 						<?php } else { ?>
@@ -190,7 +190,7 @@
 					</span>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-					<span class="jump-top badge gray raised" title="<?= _("Cron Jobs") ?>: <?= $data[$key]["CRON_JOBS"] ?>">
+					<span class="badge" title="<?= _("Cron Jobs") ?>: <?= $data[$key]["CRON_JOBS"] ?>">
 						<?php if ($data[$key]["CRON_JOBS"] == "unlimited") { ?>
 							<b>&infin;</b>
 						<?php } else { ?>
@@ -199,7 +199,7 @@
 					</span>
 				</div>
 				<div class="clearfix l-unit__stat-col--left u-text-center super-compact">
-					<span class="jump-top badge gray raised" title="<?= _("Backups") ?>: <?= $data[$key]["BACKUPS"] ?>">
+					<span class="badge" title="<?= _("Backups") ?>: <?= $data[$key]["BACKUPS"] ?>">
 						<?php if ($data[$key]["BACKUPS"] == "unlimited") { ?>
 							<b>&infin;</b>
 						<?php } else { ?>

web/templates/pages/list_user.php

@@ -167,12 +167,12 @@
 				<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 super-compact"><b><?= humanize_usage_size($data[$key]["U_DISK"]) ?></b> <span class="u-text-small"><?= humanize_usage_measure($data[$key]["U_DISK"]) ?></span></div>
 				<div class="clearfix l-unit__stat-col--left u-text-center compact"><b><?= humanize_usage_size($data[$key]["U_BANDWIDTH"]) ?></b> <span class="u-text-small"><?= humanize_usage_measure($data[$key]["U_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="jump-top badge gray raised"><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 Domains") ?>"><span class="jump-top badge gray raised"><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="jump-top badge gray raised"><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="jump-top badge gray raised"><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_CRON_JOBS"] ?> <?= _("Cron Jobs") ?>"><span class="jump-top badge gray raised"><b><?= $data[$key]["U_CRON_JOBS"] ?></b></span></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center super-compact" title="<?= $data[$key]["U_BACKUPS"] ?> <?= _("Backups") ?>"><span class="jump-top badge gray raised"><b><?= $data[$key]["U_BACKUPS"] ?></b></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 Domains") ?>"><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_CRON_JOBS"] ?> <?= _("Cron Jobs") ?>"><span class="badge"><b><?= $data[$key]["U_CRON_JOBS"] ?></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>
 			</div>
 		</div>
 	<?php } ?>