Minor UI updates (hestiacp#3485)

* Refactor to fix duplicate IDs in page HTML

* Add "click outside to close" behaviour to sorting dropdown

Author: AlecRust

web/css/src/themes/vestia.css

@@ -181,7 +181,7 @@ strong {
 		text-shadow: none;
 	}
 
-	& #btn-back {
+	& .button-back {
 		color: #326b9b;
 		background: none;
 		text-shadow: none;

web/css/themes/vestia.min.css

@@ -1,12 +1,26 @@
 // List view sorting dropdown
 export default function initSorting() {
+	// Toggle dropdown button
 	document.querySelectorAll('.toolbar-sorting-toggle').forEach((toggle) => {
 		toggle.addEventListener('click', (evt) => {
 			evt.preventDefault();
 			document.querySelector('.toolbar-sorting-menu').classList.toggle('u-hidden');
 		});
 	});
 
+	// "Click outside" to close dropdown
+	document.addEventListener('click', (event) => {
+		const toggleButton = document.querySelector('.toolbar-sorting-toggle');
+		const dropdown = document.querySelector('.toolbar-sorting-menu');
+
+		if (!dropdown || !toggleButton) return;
+
+		if (!dropdown.contains(event.target) && !toggleButton.contains(event.target)) {
+			dropdown.classList.add('u-hidden');
+		}
+	});
+
+	// Inner dropdown sorting behavior
 	document.querySelectorAll('.toolbar-sorting-menu span').forEach((span) => {
 		span.addEventListener('click', function () {
 			const menu = document.querySelector('.toolbar-sorting-menu');

web/js/dist/main.min.js

@@ -106,7 +106,7 @@ export default function initShortcuts() {
 		.register(
 			{ key: 'A' },
 			(_evt) => {
-				const createButton = document.querySelector('.button#btn-create');
+				const createButton = document.querySelector('a.js-button-create');
 				if (!createButton) {
 					return;
 				}
@@ -129,7 +129,7 @@ export default function initShortcuts() {
 			document.querySelector('form#vstobjects').submit();
 		})
 		.register({ code: 'Backspace', ctrlKey: true }, (_evt) => {
-			const redirect = document.querySelector('a.button#btn-back').href;
+			const redirect = document.querySelector('a.js-button-back').href;
 			if (!redirect) {
 				return;
 			}

web/js/dist/main.min.js.map

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/access-key/">
+			<a class="button button-secondary button-back js-button-back" href="/list/access-key/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/js/src/listSorting.js

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/cron/">
+			<a class="button button-secondary button-back js-button-back" href="/list/cron/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/js/src/shortcuts.js

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/db/">
+			<a class="button button-secondary button-back js-button-back" href="/list/db/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>

web/templates/pages/add_access_key.php

@@ -2,7 +2,7 @@
 <div class="toolbar">
 	<div class="toolbar-inner">
 		<div class="toolbar-buttons">
-			<a class="button button-secondary" id="btn-back" href="/list/dns/">
+			<a class="button button-secondary button-back js-button-back" href="/list/dns/">
 				<i class="fas fa-arrow-left icon-blue"></i><?= _("Back") ?>
 			</a>
 		</div>