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

reimplement instance card using display;contents to have better alignment and fitting to grid for instance card container,

Browse Source 
migrate away from using w3-hide to custom hide for breakpoint fixes
This commit is contained in:
Arthur Lu
2025-10-10 06:35:28 +00:00
parent 2f21b23535
commit 06afdcec37
5 changed files with 140 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/html/backups.html
View File

@@ -17,8 +17,8 @@
<section class="w3-card w3-padding">
<div class="w3-row" style="border-bottom: 1px solid;">
<p class="w3-col l2 m4 s8">Time</p>
<p class="w3-col l6 m6 w3-hide-small">Notes</p>
<p class="w3-col l2 w3-hide-medium w3-hide-small">Size</p>
<p class="w3-col l6 m6 hide-small">Notes</p>
<p class="w3-col l2 hide-medium">Size</p>
<p class="w3-col l2 m2 s4">Actions</p>
</div>
<div id="backups-container">

69
web/html/index.html
View File

@@ -8,12 +8,6 @@
<link rel="modulepreload" href="scripts/dialog.js">
<link rel="modulepreload" href="scripts/clientsync.js">
<style>
#instance-container > div {
border-bottom: 1px solid white;
}
#instance-container > div:last-child {
border-bottom: none;
}
@media screen and (width >= 440px) {
#vm-search {
max-width: calc(100% - 10px - 152px);
@@ -24,6 +18,50 @@
max-width: calc(100% - 10px - 47px);
}
}
@media screen and (width >= 993px) {
#instance-table {
display: grid;
grid-template-columns: repeat(7, auto);
grid-column-gap: 1em;
grid-row-gap: 0.25em;
}
#instance-table-header, #instance-container, #instance-table instance-card {
display: contents;
}
}
@media screen and (width <= 993px) and (width >= 601px){
#instance-table {
display: grid;
grid-template-columns: repeat(5, auto);
grid-column-gap: 1em;
grid-row-gap: 0.25em;
}
#instance-table-header, #instance-container, #instance-table instance-card {
display: contents;
}
}
@media screen and (width <= 601px) and (width >= 440px){
#instance-table {
display: grid;
grid-template-columns: repeat(4, auto);
grid-column-gap: 1em;
grid-row-gap: 0.25em;
}
#instance-table-header, #instance-container, #instance-table instance-card {
display: contents;
}
}
@media screen and (width <= 440px) {
#instance-table {
display: grid;
grid-template-columns: repeat(3, auto);
grid-column-gap: 1em;
grid-row-gap: 0.25em;
}
#instance-table-header, #instance-container, #instance-table instance-card {
display: contents;
}
}
</style>
</head>
<body>
@@ -90,16 +128,17 @@
</dialog>
</template>
</div>
<div>
<div class="w3-row w3-hide-small" style="border-bottom: 1px solid;">
<p class="w3-col l1 m1 w3-hide-small">ID</p>
<p class="w3-col l2 m3 w3-hide-small">Name</p>
<p class="w3-col l1 m2 w3-hide-small">Type</p>
<p class="w3-col l2 m3 w3-hide-small">Status</p>
<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Name</p>
<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Status</p>
<p class="w3-col l2 m3 w3-hide-small">Actions</p>
<div id="instance-table">
<div id="instance-table-header">
<p>ID</p>
<p>Name</p>
<p class="hide-tiny">Type</p>
<p class="hide-small">Status</p>
<p class="hide-medium">Host Name</p>
<p class="hide-medium">Host Status</p>
<p>Actions</p>
</div>
<hr style="grid-column: 1 / -1; padding: 0; margin: 0;">
<div id="instance-container">
{{range .instances}}
{{template "instance-card" .}}