From 36b86e4edba60c1aa70a046e8c9636033865489f Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Wed, 14 Dec 2022 15:47:29 -0800
Subject: [PATCH] improve instance article layout

---
 css/instance.css    | 11 +++++++++--
 scripts/elements.js | 27 ++++++++++++++++-----------
 2 files changed, 25 insertions(+), 13 deletions(-)

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