tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make instance article span entire width

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-03 22:49:24 +00:00
parent 21cae2738c
commit 3c2fa28f0a
4 changed files with 40 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/instance.css
View File

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

16
index.html
View File

@ -9,6 +9,20 @@
<link rel="stylesheet" href="css/buttons.css" type="text/css">
<script src="scripts/index.js" type="module"></script>
<script src="scripts/instance.js" type="module"></script>
<style>
#instance-container {
display: grid;
grid-template-columns: auto auto 1fr;
}
instance-obj {
display: contents;
}
instance-obj:after, instance-obj:first-child:before {
content: " ";
border-bottom: 1px solid black;
grid-column: 1 / span 3;
}
</style>
</head>
<body>
<header>
@ -19,7 +33,7 @@
</nav>
</header>
<main>
<div id="instance-container" class="center-div">
<div id="instance-container">
</div>
<div class="center-div" style="text-align: center;">
<img id="instance-add" src="images/actions/instance/add-instance.svg" class="clickable" alt="Create New Instance" title="Create New Instance">

2
scripts/index.js
View File

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

39
scripts/instance.js
View File

@ -8,28 +8,23 @@ export class Instance extends HTMLElement {
shadowRoot.innerHTML = `
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/instance.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css">
<article>
<div>
<div>
<img id="instance-type">
<p id="instance-id"></p>
<p id="instance-name"></p>
</div>
<div>
<img id="node-status" alt="instance node">
<p id="node-name"></p>
</div>
</div>
<hr>
<div class="btn-group">
<img id="power-btn" class="clickable">
<img id="console-btn" class="clickable">
<img id="configure-btn" class="clickable">
<img id="delete-btn" class="clickable">
</div>
</article>
<link rel="stylesheet" href="css/instance.css" type="text/css">
<div>
<img id="node-status" alt="instance node">
<p id="node-name"></p>
</div>
<div>
<img id="instance-type">
<p id="instance-id"></p>
<p id="instance-name"></p>
</div>
<div class="btn-group">
<img id="power-btn" class="clickable">
<img id="console-btn" class="clickable">
<img id="configure-btn" class="clickable">
<img id="delete-btn" class="clickable">
</div>
`;
this.shadowElement = shadowRoot;
@ -205,4 +200,4 @@ export class Instance extends HTMLElement {
}
}
customElements.define("instance-article", Instance);
customElements.define("instance-obj", Instance);