From c742ed7085cf54f34b9da9e688fdb1bc343a6a6f Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Mon, 3 Apr 2023 22:49:24 +0000 Subject: [PATCH] make instance article span entire width Signed-off-by: Arthur Lu --- css/instance.css | 38 +++++++------------------------------- index.html | 16 +++++++++++++++- scripts/index.js | 2 +- scripts/instance.js | 39 +++++++++++++++++---------------------- 4 files changed, 40 insertions(+), 55 deletions(-) diff --git a/css/instance.css b/css/instance.css index cf5ebe0..2de01c1 100644 --- a/css/instance.css +++ b/css/instance.css @@ -1,40 +1,16 @@ -article { - border: solid var(--content-txt-color) 1px; - border-radius: 5px; - padding: 0px 1em 0px 1em; - margin: 20px 0px 20px 0px; +img { + height: 1em; } -article > div { +div { display: flex; + flex-direction: row; align-items: center; - justify-content: center; - flex-wrap: wrap; column-gap: 10px; -} - -article > div > div { - display: flex; - column-gap: 10px; - align-items: center; - flex-grow: 1; - flex-basis: 0; -} - -article > div > div > img { - height: 16px; -} - -hr { - border: none; - border-top: solid var(--content-txt-color) 1px; - margin: 0px; + margin-right: 4ch; } .btn-group { - margin: 14px 0px 14px 0px; -} - -.btn-group img { - height: 16px; + margin-left: 0px; + justify-content: flex-end; } \ No newline at end of file diff --git a/index.html b/index.html index 89fb038..5818543 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,20 @@ +
@@ -19,7 +33,7 @@
-
+
Create New Instance diff --git a/scripts/index.js b/scripts/index.js index 8c7cf74..883cb0c 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -35,7 +35,7 @@ async function populateInstances () { instanceContainer.innerText = ""; for(let i = 0; i < instances.length; i++) { - let newInstance = document.createElement("instance-article"); + let newInstance = document.createElement("instance-obj"); newInstance.data = instances[i]; instanceContainer.append(newInstance); } diff --git a/scripts/instance.js b/scripts/instance.js index 890f408..5d773d0 100644 --- a/scripts/instance.js +++ b/scripts/instance.js @@ -8,28 +8,23 @@ export class Instance extends HTMLElement { shadowRoot.innerHTML = ` - -
-
-
- -

-

-
-
- instance node -

-
-
-
-
- - - - -
-
+ +
+ instance node +

+
+
+ +

+

+
+
+ + + + +
`; this.shadowElement = shadowRoot; @@ -205,4 +200,4 @@ export class Instance extends HTMLElement { } } -customElements.define("instance-article", Instance); \ No newline at end of file +customElements.define("instance-obj", Instance); \ No newline at end of file