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 08c6126f81
commit b2cd65212b
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>
<div class="center-div">
<form>
<fieldset id="user-configurable">
<fieldset>
<legend>Change Configuration</legend>
<div class="labels-inputs">
<div id="labels">
</div>
<div id="inputs">
</div>
<div class="labels-inputs" id="user-configurable">
</div>
<div class="btn-group" id="form-actions">
<button id="cancel">CANCEL</button>

7
css/form.css
View File

@ -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;
}

12
login.html
View File

@ -14,14 +14,10 @@
<fieldset>
<legend>Proxmox VE Login</legend>
<div class="labels-inputs">
<div>
<div><label for="username">Username:</label></div>
<div><label for="username">Password:</label></div>
</div>
<div>
<div><input type="text" id="username" name="username"></div>
<div><input type="password" id="password" name="password"></div>
</div>
<label for="username">Username:</label>
<input type="number" min="1" max="10" id="username" name="username">
<label for="username">Password:</label>
<input type="password" id="password" name="password">
</div>
<div class="btn-group">
<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) {
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);
}