Fixes and updates (hestiacp#3152)

Author: AlecRust

docs/docs/introduction/best-practices.md

@@ -1,6 +1,6 @@
 # Best Practices
 
-Managing a server is not easy. Here are a couple of best practices you should try to adhere to while managing your Hestia server.
+Managing a server is not easy. Here are some best practices you should try to adhere to while managing your Hestia server.
 
 ## Use a regular user
 

docs/index.md

@@ -25,7 +25,7 @@ hero:
 features:
   - icon: 🚀
     title: Fast & easy to learn
-    details: Hestia is made with ease of use in mind. Creating a user or a website is as easy as clicking a button and filling up a couple of fields, while advanced features are easily accessible.
+    details: Hestia is made with ease of use in mind. Creating a user or a website is as easy as clicking a button and filling out a couple of fields, while advanced features are easily accessible.
     link: /docs/introduction/getting-started
     linkText: Documentation
   - icon: ❤️
@@ -40,7 +40,7 @@ features:
     linkText: Help develop Hestia
   - icon: 🤝
     title: Supported by the community
-    details: Hestia has a great support community, join the forum or the Discord server! To keep the project running, we rely on donations, which can be done via PayPal or cryptocurrency.
+    details: Hestia has a great support community - join the forum or the Discord server! To keep the project running, we rely on donations, which can be made via PayPal or cryptocurrency.
     link: /donate
     linkText: Donate
 ---

web/css/src/themes/dark.css

@@ -375,10 +375,6 @@ strong {
 .units > div:last-child {
 }
 
-.l-unit-ft {
-	color: #cdcdcd;
-}
-
 .l-unit:hover .l-unit-toolbar__col--right {
 }
 
@@ -909,6 +905,7 @@ form#vstobjects.suspended {
 }
 
 .app-footer {
+	color: #cdcdcd;
 	border-color: #454545;
 }
 

web/css/src/themes/default.css

@@ -250,6 +250,8 @@
 
 .top-bar-notification-delete {
 	display: none;
+	background-color: transparent;
+	border: 0;
 	padding-left: 5px;
 	padding-right: 5px;
 
@@ -263,8 +265,12 @@
 	}
 }
 
-.top-bar-notification-mark-all {
+.top-bar-notification-delete-all {
 	display: block;
+	background-color: transparent;
+	border: 0;
+	color: inherit;
+	width: 100%;
 	text-align: center;
 	padding: 10px 15px;
 
@@ -1011,11 +1017,6 @@
 	border-bottom: none;
 }
 
-.l-unit-ft {
-	color: #7c7c7c;
-	padding: 0 0 0 15px;
-}
-
 .l-unit:hover .l-unit-toolbar__col--right {
 	display: block;
 }
@@ -1132,10 +1133,6 @@
 	padding-left: 16px;
 }
 
-.l-unit__col--right.back {
-	padding-left: 78px;
-}
-
 .l-unit__suspended {
 	display: none;
 	font-size: 0.8rem;
@@ -2475,10 +2472,21 @@ form#vstobjects.suspended {
 }
 
 .app-footer {
+	color: #7c7c7c;
 	border-top: 1px solid #ddd;
 	font-size: 0.8rem;
-	padding-top: 30px;
-	padding-bottom: 30px;
+	padding-top: 20px;
+	padding-bottom: 20px;
+
+	@media (--viewport-medium) {
+		padding-top: 40px;
+		padding-bottom: 40px;
+	}
+}
+
+.app-footer-inner {
+	padding-left: 15px;
+	padding-right: 15px;
 }
 
 /* Collapse component

web/css/themes/dark.min.css

@@ -114,8 +114,6 @@ function randomString(length = 16) {
 }
 
 document.addEventListener('alpine:init', () => {
-	const token = document.querySelector('#token').getAttribute('token');
-
 	// Sticky class helper
 	window.addEventListener('scroll', () => {
 		const toolbar = document.querySelector('.toolbar');
@@ -188,6 +186,7 @@ document.addEventListener('alpine:init', () => {
 			}
 		},
 		async list() {
+			const token = document.querySelector('#token').getAttribute('token');
 			const res = await fetch(`/list/notifications/?ajax=1&token=${token}`);
 			this.initialized = true;
 			if (!res.ok) {
@@ -200,6 +199,7 @@ document.addEventListener('alpine:init', () => {
 			);
 		},
 		async remove(id) {
+			const token = document.querySelector('#token').getAttribute('token');
 			await fetch(`/delete/notification/?delete=1&notification_id=${id}&token=${token}`);
 
 			this.notifications = this.notifications.filter((notification) => notification.ID != id);
@@ -208,6 +208,7 @@ document.addEventListener('alpine:init', () => {
 			}
 		},
 		async removeAll() {
+			const token = document.querySelector('#token').getAttribute('token');
 			await fetch(`/delete/notification/?delete=1&token=${token}`);
 
 			this.notifications = [];

web/css/themes/default.min.css

@@ -85,13 +85,13 @@ class="top-bar-notification-item"
 								>
 									<div class="top-bar-notification-header">
 										<p x-text="notification.TOPIC" class="top-bar-notification-title"></p>
-										<a
+										<button
 											x-on:click="remove(notification.ID)"
-											href="#"
+											type="button"
 											class="top-bar-notification-delete"
 										>
 											<i class="fas fa-xmark"></i>
-										</a>
+										</button>
 									</div>
 									<div x-html="notification.NOTICE"></div>
 									<p
@@ -102,14 +102,14 @@ class="top-bar-notification-timestamp"
 							</template>
 							<template x-if="initialized && notifications.length > 2">
 								<li>
-									<a
+									<button
 										x-on:click="removeAll()"
-										href="#"
-										class="top-bar-notification-mark-all"
+										type="button"
+										class="top-bar-notification-delete-all"
 									>
 										<i class="fas fa-check"></i>
 										<?= _("Delete all notifications") ?>
-									</a>
+									</button>
 								</li>
 							</template>
 						</ul>

web/js/main.js

@@ -98,11 +98,9 @@
 </div>
 
 <footer class="app-footer">
-	<div class="container">
-		<div class="l-unit-ft">
-			<div class="l-unit__col l-unit__col--right">
-				<?php printf(ngettext("%d Access Key", "%d Access Keys", $i), $i); ?>
-			</div>
-		</div>
+	<div class="container app-footer-inner">
+		<p>
+			<?php printf(ngettext("%d Access Key", "%d Access Keys", $i), $i); ?>
+		</p>
 	</div>
 </footer>

web/templates/includes/panel.php

@@ -121,11 +121,9 @@
 </div>
 
 <footer class="app-footer">
-	<div class="container">
-		<div class="l-unit-ft">
-			<div class="l-unit__col l-unit__col--right">
-				<?php printf(ngettext("%d backup", "%d backups", $i), $i); ?>
-			</div>
-		</div>
+	<div class="container app-footer-inner">
+		<p>
+			<?php printf(ngettext("%d backup", "%d backups", $i), $i); ?>
+		</p>
 	</div>
 </footer>