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 { .instance-div {
display: flex; display: flex;
column-gap: 10px;
align-items: center; 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; height: 16px;
} }

27
scripts/elements.js
View File

@ -24,35 +24,40 @@ class Instance extends HTMLElement {
set data (data) { set data (data) {
let instanceArticle = this.shadowElement.querySelector("article"); let instanceArticle = this.shadowElement.querySelector("article");
let detailDiv = document.createElement("div"); let summaryDiv = document.createElement("div");
detailDiv.classList.add("instance-div"); summaryDiv.classList.add("instance-div");
let instanceSubDiv = document.createElement("div");
instanceSubDiv.classList.add("summary-sub-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`;
detailDiv.append(typeImg); instanceSubDiv.append(typeImg);
let vmidParagraph = document.createElement("p"); let vmidParagraph = document.createElement("p");
vmidParagraph.innerText = data.vmid; vmidParagraph.innerText = data.vmid;
detailDiv.append(vmidParagraph); instanceSubDiv.append(vmidParagraph);
let nameParagraph = document.createElement("p"); let nameParagraph = document.createElement("p");
nameParagraph.innerText = data.name; nameParagraph.innerText = data.name;
detailDiv.append(nameParagraph); instanceSubDiv.append(nameParagraph);
instanceArticle.append(detailDiv); summaryDiv.append(instanceSubDiv);
let nodeDiv = document.createElement("div"); let nodeSubDiv = document.createElement("div");
nodeDiv.classList.add("instance-div"); nodeSubDiv.classList.add("summary-sub-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`;
nodeDiv.append(nodeImg); nodeSubDiv.append(nodeImg);
let nodeParagraph = document.createElement("p"); let nodeParagraph = document.createElement("p");
nodeParagraph.innerText = data.node.name; nodeParagraph.innerText = data.node.name;
nodeDiv.append(nodeParagraph); nodeSubDiv.append(nodeParagraph);
instanceArticle.append(nodeDiv); summaryDiv.append(nodeSubDiv);
instanceArticle.append(summaryDiv);
} }
} }