From 893f4aad5402561c867a177a478a0d38d89b846f Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Thu, 6 Jul 2023 04:53:47 +0000
Subject: [PATCH] use float left on legend and input-grid to remove legend span
 nesting, improve linting tool

---
 config.html       | 8 ++++----
 css/form.css      | 5 +++++
 package.json      | 2 +-
 scripts/config.js | 6 +++---
 scripts/dialog.js | 7 ++-----
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/config.html b/config.html
index 8b0e21e..00479a2 100644
--- a/config.html
+++ b/config.html
@@ -27,11 +27,11 @@
 				<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2>
 				<form>
 					<fieldset class="w3-card w3-padding">
-						<span><legend>Resources</legend></span>
+						<legend>Resources</legend>
 						<div class="input-grid" id="resources" style="grid-template-columns: auto auto auto 1fr;"></div>
 					</fieldset>
 					<fieldset class="w3-card w3-padding">
-						<span><legend>Disks</legend></span>
+						<legend>Disks</legend>
 						<div class="input-grid" id="disks" style="grid-template-columns: auto auto 1fr auto;"></div>
 						<div class="w3-container w3-center">
 							<img id="disk-add" src="images/actions/disk/add-disk.svg" class="clickable" alt="Add New Disk" title="Add New Disk">
@@ -39,14 +39,14 @@
 						</div>
 					</fieldset>
 					<fieldset class="w3-card w3-padding">
-						<span><legend>Network Interfaces</legend></span>
+						<legend>Network Interfaces</legend>
 						<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div>
 						<div class="w3-container w3-center">
 							<img id="network-add" src="images/actions/network/add.svg" class="clickable" alt="Add New Network Interface" title="Add New Network Interface">
 						</div>
 					</fieldset>
 					<fieldset class="w3-card w3-padding none" id="devices-card">
-						<span><legend>PCIe Devices</legend></span>
+						<legend>PCIe Devices</legend>
 						<div class="input-grid" id="devices" style="grid-template-columns: auto 1fr auto;"></div>
 						<div class="w3-container w3-center">
 							<img id="device-add" src="images/actions/device/add.svg" class="clickable" alt="Add New PCIe Device" title="Add New PCIe Device">
diff --git a/css/form.css b/css/form.css
index a0de5e0..64df664 100644
--- a/css/form.css
+++ b/css/form.css
@@ -1,4 +1,5 @@
 .input-grid {
+	float: left;
 	display: grid;
 	column-gap: 10px;
 	row-gap: 5px;
@@ -15,6 +16,10 @@
 }
 
 legend {
+	float: left;
+	width: 100%;
+	margin: 0;
+	padding: 0;
 	line-height: 1.5em;
 	margin-top: 0.25lh;
 	margin-bottom: 0.25lh;
diff --git a/package.json b/package.json
index fd207a4..1f2d4a7 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
 	"description": "Front-end for ProxmoxAAS",
 	"type": "module",
 	"scripts": {
-		"lint": "html-validator --continue; stylelint --fix **/*.css; eslint --fix .;"
+		"lint": "html-validator --continue; stylelint --formatter verbose --fix **/*.css; DEBUG=eslint:cli-engine eslint --fix ."
 	},
 	"devDependencies": {
 		"eslint": "^8.43.0",
diff --git a/scripts/config.js b/scripts/config.js
index b3ede09..281598f 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -548,7 +548,7 @@ async function handleNetworkDelete () {
 	const header = `Delete net${netID}`;
 	const body = "";
 
-	const d = dialog(header, body, async (result, form) => {
+	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
 			document.querySelector(`img[data-network="${netID}"]`).src = "images/status/loading.svg";
 			const result = await requestAPI(`/${node}/${type}/${vmid}/net/net${netID}/delete`, "DELETE");
@@ -572,7 +572,7 @@ async function handleNetworkAdd () {
 		body += "<label for=\"name\">Interface Name</label><input type=\"text\" id=\"name\" name=\"name\" class=\"w3-input w3-border\"></input>";
 	}
 
-	const d = dialog(header, body, async (result, form) => {
+	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
 			const body = {
 				rate: form.get("rate")
@@ -702,7 +702,7 @@ async function handleDeviceDelete () {
 	const header = `Remove Expansion Card ${deviceID}`;
 	const body = "";
 
-	const d = dialog(header, body, async (result, form) => {
+	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
 			document.querySelector(`img[data-device="${deviceID}"]`).src = "images/status/loading.svg";
 			const result = await requestAPI(`/${node}/${type}/${vmid}/pci/hostpci${deviceID}/delete`, "DELETE");
diff --git a/scripts/dialog.js b/scripts/dialog.js
index 9abb2c3..fa9e28f 100644
--- a/scripts/dialog.js
+++ b/scripts/dialog.js
@@ -11,15 +11,12 @@ export function dialog (header, body, callback = async (result, form) => { }) {
 	dialog.className = "w3-container w3-card w3-border-0";
 	dialog.querySelector("#prompt").innerText = header;
 	dialog.querySelector("form").innerHTML = body;
-
-	document.body.append(dialog);
-	dialog.showModal();
-
 	dialog.addEventListener("close", async () => {
 		await callback(dialog.returnValue, new FormData(dialog.querySelector("form")));
 		dialog.parentElement.removeChild(dialog);
 	});
-
+	document.body.append(dialog);
+	dialog.showModal();
 	return dialog;
 }