tronnet/ProxmoxAAS-API
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 a2c027eec0
commit c742ed7085
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 { img {
border: solid var(--content-txt-color) 1px; height: 1em;
border-radius: 5px;
padding: 0px 1em 0px 1em;
margin: 20px 0px 20px 0px;
} }
article > div { div {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
justify-content: center;
flex-wrap: wrap;
column-gap: 10px; column-gap: 10px;
} margin-right: 4ch;
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;
} }
.btn-group { .btn-group {
margin: 14px 0px 14px 0px; margin-left: 0px;
} justify-content: flex-end;
.btn-group img {
height: 16px;
} }

16
index.html
View File

@ -9,6 +9,20 @@
<link rel="stylesheet" href="css/buttons.css" type="text/css"> <link rel="stylesheet" href="css/buttons.css" type="text/css">
<script src="scripts/index.js" type="module"></script> <script src="scripts/index.js" type="module"></script>
<script src="scripts/instance.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> </head>
<body> <body>
<header> <header>
@ -19,7 +33,7 @@
</nav> </nav>
</header> </header>
<main> <main>
<div id="instance-container" class="center-div"> <div id="instance-container">
</div> </div>
<div class="center-div" style="text-align: center;"> <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"> <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 = ""; instanceContainer.innerText = "";
for(let i = 0; i < instances.length; i++) { for(let i = 0; i < instances.length; i++) {
let newInstance = document.createElement("instance-article"); let newInstance = document.createElement("instance-obj");
newInstance.data = instances[i]; newInstance.data = instances[i];
instanceContainer.append(newInstance); instanceContainer.append(newInstance);
} }

39
scripts/instance.js
View File

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