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

arrange instance elements inline

Browse Source
This commit is contained in:
Arthur Lu 2022-12-14 15:38:13 -08:00
parent 02ed33c674
commit 3e87f5ba29
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/instance.css
View File

@ -4,6 +4,12 @@ article {
margin: 0px; margin: 0px;
} }
.instance-top-div { .instance-div {
display: flex; display: flex;
column-gap: 10px;
align-items: center;
}
.instance-div img {
height: 16px;
} }

21
scripts/elements.js
View File

@ -24,30 +24,35 @@ class Instance extends HTMLElement {
set data (data) { set data (data) {
let instanceArticle = this.shadowElement.querySelector("article"); let instanceArticle = this.shadowElement.querySelector("article");
let topDiv = document.createElement("div"); let detailDiv = document.createElement("div");
topDiv.classList.add("instance-top-div"); detailDiv.classList.add("instance-div");
let typeImg = document.createElement("img"); let typeImg = document.createElement("img");
typeImg.src = `images/instances/${data.type}/${data.status}.svg`; typeImg.src = `images/instances/${data.type}/${data.status}.svg`;
topDiv.append(typeImg); detailDiv.append(typeImg);
let vmidParagraph = document.createElement("p"); let vmidParagraph = document.createElement("p");
vmidParagraph.innerText = data.vmid; vmidParagraph.innerText = data.vmid;
topDiv.append(vmidParagraph); detailDiv.append(vmidParagraph);
let nameParagraph = document.createElement("p"); let nameParagraph = document.createElement("p");
nameParagraph.innerText = data.name; nameParagraph.innerText = data.name;
topDiv.append(nameParagraph); detailDiv.append(nameParagraph);
instanceArticle.append(topDiv); instanceArticle.append(detailDiv);
let nodeDiv = document.createElement("div");
nodeDiv.classList.add("instance-div");
let nodeImg = document.createElement("img"); let nodeImg = document.createElement("img");
nodeImg.src = `images/nodes/${data.node.status}.svg`; nodeImg.src = `images/nodes/${data.node.status}.svg`;
instanceArticle.append(nodeImg); nodeDiv.append(nodeImg);
let nodeParagraph = document.createElement("p"); let nodeParagraph = document.createElement("p");
nodeParagraph.innerText = data.node.name; nodeParagraph.innerText = data.node.name;
instanceArticle.append(nodeParagraph); nodeDiv.append(nodeParagraph);
instanceArticle.append(nodeDiv);
} }
} }