diff --git a/css/instance.css b/css/instance.css index 3f3893b..983a560 100644 --- a/css/instance.css +++ b/css/instance.css @@ -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; } \ No newline at end of file diff --git a/scripts/elements.js b/scripts/elements.js index 3142f85..4ee9200 100644 --- a/scripts/elements.js +++ b/scripts/elements.js @@ -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); } }