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

use float left on legend and input-grid to remove legend span nesting,

Browse Source 
improve linting tool
This commit is contained in:
Arthur Lu 2023-07-06 04:53:47 +00:00
parent 488de43d2f
commit 285d2ea57e
5 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
config.html
View File

@ -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">

5
css/form.css
View File

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

2
package.json
View File

@ -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",

6
scripts/config.js
View File

@ -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");

7
scripts/dialog.js
View File

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