From 90eba4904c94435a12cc79154bc7d5cabd148787 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Wed, 14 Dec 2022 15:38:13 -0800
Subject: [PATCH] arrange instance elements inline

---
 css/instance.css    |  8 +++++++-
 scripts/elements.js | 21 +++++++++++++--------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/css/instance.css b/css/instance.css
index 4b634f2..3f3893b 100644
--- a/css/instance.css
+++ b/css/instance.css
@@ -4,6 +4,12 @@ article {
 	margin: 0px;
 }
 
-.instance-top-div {
+.instance-div {
 	display: flex;
+	column-gap: 10px;
+	align-items: center;
+}
+
+.instance-div img {
+	height: 16px;
 }
\ No newline at end of file
diff --git a/scripts/elements.js b/scripts/elements.js
index 1650afd..3142f85 100644
--- a/scripts/elements.js
+++ b/scripts/elements.js
@@ -24,30 +24,35 @@ class Instance extends HTMLElement {
 	set data (data) {
 		let instanceArticle = this.shadowElement.querySelector("article");
 
-		let topDiv = document.createElement("div");
-		topDiv.classList.add("instance-top-div");
+		let detailDiv = document.createElement("div");
+		detailDiv.classList.add("instance-div");
 
 		let typeImg = document.createElement("img");
 		typeImg.src = `images/instances/${data.type}/${data.status}.svg`;
-		topDiv.append(typeImg);
+		detailDiv.append(typeImg);
 
 		let vmidParagraph = document.createElement("p");
 		vmidParagraph.innerText = data.vmid;
-		topDiv.append(vmidParagraph);
+		detailDiv.append(vmidParagraph);
 
 		let nameParagraph = document.createElement("p");
 		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");
 		nodeImg.src = `images/nodes/${data.node.status}.svg`;
-		instanceArticle.append(nodeImg);
+		nodeDiv.append(nodeImg);
 
 		let nodeParagraph = document.createElement("p");
 		nodeParagraph.innerText = data.node.name;
-		instanceArticle.append(nodeParagraph);
+		nodeDiv.append(nodeParagraph);
+
+		instanceArticle.append(nodeDiv);
 	}
 }