From cb2cc973878734546e29df7b954f256c413fd773 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Tue, 13 Dec 2022 23:26:43 -0800 Subject: [PATCH] fix instance type setting, add min-content to center-div --- css/style.css | 1 + scripts/elements.js | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 31494d4..65590d4 100644 --- a/css/style.css +++ b/css/style.css @@ -32,6 +32,7 @@ p { .center-div { min-width: 480px; max-width: 50%; + width: min-content; margin-left: auto; margin-right: auto; } diff --git a/scripts/elements.js b/scripts/elements.js index 947e2ea..e376936 100644 --- a/scripts/elements.js +++ b/scripts/elements.js @@ -58,8 +58,8 @@ class Instance extends HTMLElement { super(); let shadowRoot = this.attachShadow({mode: "open"}); - let instanceDiv = document.createElement("div"); - shadowRoot.append(instanceDiv); + let instanceArticle = document.createElement("article"); + shadowRoot.append(instanceArticle); let styleLink = document.createElement("link"); styleLink.rel = "stylesheet"; @@ -71,10 +71,10 @@ class Instance extends HTMLElement { } set data (data) { - let instanceDiv = this.shadowElement.querySelector("div"); + let instanceArticle = this.shadowElement.querySelector("article"); let instanceParagraph = document.createElement("p"); - instanceParagraph.innerText = `CT | ${data.vmid} | ${data.name} | ${data.status}`; + instanceParagraph.innerText = `${data.type} | ${data.vmid} | ${data.name} | ${data.status}`; instanceParagraph.style.color = data.status === "running" ? "#00ff00" : "#ff0000"; instanceDiv.append(instanceParagraph); }