From b2cd65212b7388ad89b0ef45f149e49eb3a88c42 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Mon, 19 Dec 2022 18:46:28 -0800 Subject: [PATCH] use grid layout for forms --- config.html | 8 ++------ css/form.css | 7 ++----- login.html | 12 ++++-------- scripts/config.js | 12 ++++-------- 4 files changed, 12 insertions(+), 27 deletions(-) diff --git a/config.html b/config.html index 38f1363..a285bd5 100644 --- a/config.html +++ b/config.html @@ -11,13 +11,9 @@
-
+
Change Configuration -
-
-
-
-
+
diff --git a/css/form.css b/css/form.css index cb4374c..072136f 100644 --- a/css/form.css +++ b/css/form.css @@ -25,10 +25,7 @@ button { } .labels-inputs { - display: flex; + display: grid; + grid-template-columns: auto auto; column-gap: 10px; -} - -.labels-inputs > div { - width: max-content; } \ No newline at end of file diff --git a/login.html b/login.html index a167ca1..abddeb1 100644 --- a/login.html +++ b/login.html @@ -14,14 +14,10 @@
Proxmox VE Login
-
-
-
-
-
-
-
-
+ + + +
diff --git a/scripts/config.js b/scripts/config.js index 1e643a5..5c89fe9 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -19,22 +19,18 @@ async function populateForm (node, type, vmid) { } function addFormLine (id, labelName, inputAttr) { - let labelWrapperDiv = document.createElement("div"); + let form = document.querySelector("#user-configurable"); + let label = document.createElement("label"); label.for = id; label.innerHTML = labelName; - labelWrapperDiv.append(label); - let labelContainer = document.querySelector("#labels"); - labelContainer.append(labelWrapperDiv); + form.append(label); - let inputWrapperDiv = document.createElement("div"); let input = document.createElement("input"); input.id = id; input.name = id; for (let k in inputAttr) { input.setAttribute(k, inputAttr[k]) } - inputWrapperDiv.append(input); - let inputContainer = document.querySelector("#inputs"); - inputContainer.append(inputWrapperDiv); + form.append(input); } \ No newline at end of file