simplify instance styling

This commit is contained in:
Arthur Lu 2022-12-15 17:45:40 -08:00
parent eb46ac7a5b
commit 9f4642ec81
2 changed files with 11 additions and 22 deletions

View File

@ -5,35 +5,20 @@ article {
margin: 20px 0px 20px 0px; margin: 20px 0px 20px 0px;
} }
.summary-div { article > div {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.summary-div div { article > div > div {
display: flex; display: flex;
column-gap: 10px; column-gap: 10px;
align-items: center; align-items: center;
width: 50%; flex-grow: 1;
flex-basis: 0;
} }
.summary-div div img { article > div > div > img {
height: 16px;
}
.resource-div {
display: flex;
align-items: center;
justify-content: flex-start;
}
.resource-div div {
display: flex;
column-gap: 10px;
align-items: center;
width: 25%;
}
.resource-div div img {
height: 16px; height: 16px;
} }

View File

@ -14,7 +14,7 @@
<template id="instance-template"> <template id="instance-template">
<article> <article>
<div class="summary-div"> <div>
<div> <div>
<img id="instance-type"> <img id="instance-type">
<p id="instance-id"></p> <p id="instance-id"></p>
@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<hr> <hr>
<div class="resource-div"> <div>
<div> <div>
<img src="images/resources/cpu.svg"> <img src="images/resources/cpu.svg">
<p id="resource-cpu"></p> <p id="resource-cpu"></p>
@ -44,6 +44,10 @@
<p id="resource-disk"></p> <p id="resource-disk"></p>
</div> </div>
</div> </div>
<hr>
<div>
</div>
</article> </article>
</template> </template>
</html> </html>