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

improve instance article layout

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

11
css/instance.css
View File

@ -6,10 +6,17 @@ article {
.instance-div {
display: flex;
column-gap: 10px;
align-items: center;
justify-content: space-between;
}
.instance-div img {
.summary-sub-div {
display: flex;
column-gap: 10px;
align-items: center;
width: fit-content;
}
.summary-sub-div img {
height: 16px;
}

27
scripts/elements.js
View File

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