tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use grid layout for forms

Browse Source
This commit is contained in:
Arthur Lu 2022-12-19 18:46:28 -08:00
parent 9825b6b951
commit 6ac057bdbf
4 changed files with 12 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
config.html
View File

@ -11,13 +11,9 @@
<body> <body>
<div class="center-div"> <div class="center-div">
<form> <form>
<fieldset id="user-configurable"> <fieldset>
<legend>Change Configuration</legend> <legend>Change Configuration</legend>
<div class="labels-inputs"> <div class="labels-inputs" id="user-configurable">
<div id="labels">
</div>
<div id="inputs">
</div>
</div> </div>
<div class="btn-group" id="form-actions"> <div class="btn-group" id="form-actions">
<button id="cancel">CANCEL</button> <button id="cancel">CANCEL</button>

7
css/form.css
View File

@ -25,10 +25,7 @@ button {
} }
.labels-inputs { .labels-inputs {
display: flex; display: grid;
grid-template-columns: auto auto;
column-gap: 10px; column-gap: 10px;
} }
.labels-inputs > div {
width: max-content;
}

12
login.html
View File

@ -14,14 +14,10 @@
<fieldset> <fieldset>
<legend>Proxmox VE Login</legend> <legend>Proxmox VE Login</legend>
<div class="labels-inputs"> <div class="labels-inputs">
<div> <label for="username">Username:</label>
<div><label for="username">Username:</label></div> <input type="number" min="1" max="10" id="username" name="username">
<div><label for="username">Password:</label></div> <label for="username">Password:</label>
</div> <input type="password" id="password" name="password">
<div>
<div><input type="text" id="username" name="username"></div>
<div><input type="password" id="password" name="password"></div>
</div>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button id="submit">LOGIN</button> <button id="submit">LOGIN</button>

12
scripts/config.js
View File

@ -19,22 +19,18 @@ async function populateForm (node, type, vmid) {
} }
function addFormLine (id, labelName, inputAttr) { function addFormLine (id, labelName, inputAttr) {
let labelWrapperDiv = document.createElement("div"); let form = document.querySelector("#user-configurable");
let label = document.createElement("label"); let label = document.createElement("label");
label.for = id; label.for = id;
label.innerHTML = labelName; label.innerHTML = labelName;
labelWrapperDiv.append(label); form.append(label);
let labelContainer = document.querySelector("#labels");
labelContainer.append(labelWrapperDiv);
let inputWrapperDiv = document.createElement("div");
let input = document.createElement("input"); let input = document.createElement("input");
input.id = id; input.id = id;
input.name = id; input.name = id;
for (let k in inputAttr) { for (let k in inputAttr) {
input.setAttribute(k, inputAttr[k]) input.setAttribute(k, inputAttr[k])
} }
inputWrapperDiv.append(input); form.append(input);
let inputContainer = document.querySelector("#inputs");
inputContainer.append(inputWrapperDiv);
} }