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

30
web/css/style.css
View File

@@ -100,7 +100,7 @@ img, svg {
color: var(--main-text-color) color: var(--main-text-color)
} }
hr, * { hr {
border-color: var(--main-text-color); border-color: var(--main-text-color);
} }
@@ -156,18 +156,26 @@ hr, * {
} }
/* add hide large class similar to w3-hide-medium and w3-hide-small */ /* add hide large class similar to w3-hide-medium and w3-hide-small */
@media (width >=993px) { @media screen and (width >=993px) {
.w3-hide-large { .hide-large {display: none !important;}
display: none !important;
}
} }
/* fix edge case in w3-hide-medium where width between 992 and 993 */ /* fixes edge case in w3-hide-medium where width between 992 and 993 */
@media (width <=993px) and (width >=601px){ @media screen and (width <=993px) and (width >=601px){
.w3-hide-medium{display:none!important} .hide-large {display: none !important;}
.hide-medium {display:none !important}
} }
/* fix edge case in w3-hide-small when width between 600 and 601 */ /* fixes edge case in w3-hide-small when width between 600 and 601 */
@media (width <=601px) { @media screen and (width <=601px) {
.w3-hide-small{display:none!important} .hide-large {display: none !important;}
.hide-medium {display:none !important}
.hide-small {display:none !important}
}
@media screen and (width <= 440px) {
.hide-large {display: none !important;}
.hide-medium {display:none !important}
.hide-small {display:none !important}
.hide-tiny { display: none !important;}
} }

4
web/html/backups.html
View File

@@ -17,8 +17,8 @@
<section class="w3-card w3-padding"> <section class="w3-card w3-padding">
<div class="w3-row" style="border-bottom: 1px solid;"> <div class="w3-row" style="border-bottom: 1px solid;">
<p class="w3-col l2 m4 s8">Time</p> <p class="w3-col l2 m4 s8">Time</p>
<p class="w3-col l6 m6 w3-hide-small">Notes</p> <p class="w3-col l6 m6 hide-small">Notes</p>
<p class="w3-col l2 w3-hide-medium w3-hide-small">Size</p> <p class="w3-col l2 hide-medium">Size</p>
<p class="w3-col l2 m2 s4">Actions</p> <p class="w3-col l2 m2 s4">Actions</p>
</div> </div>
<div id="backups-container"> <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/dialog.js">
<link rel="modulepreload" href="scripts/clientsync.js"> <link rel="modulepreload" href="scripts/clientsync.js">
<style> <style>
#instance-container > div {
border-bottom: 1px solid white;
}
#instance-container > div:last-child {
border-bottom: none;
}
@media screen and (width >= 440px) { @media screen and (width >= 440px) {
#vm-search { #vm-search {
max-width: calc(100% - 10px - 152px); max-width: calc(100% - 10px - 152px);
@@ -24,6 +18,50 @@
max-width: calc(100% - 10px - 47px); 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> </style>
</head> </head>
<body> <body>
@@ -90,16 +128,17 @@
</dialog> </dialog>
</template> </template>
</div> </div>
<div> <div id="instance-table">
<div class="w3-row w3-hide-small" style="border-bottom: 1px solid;"> <div id="instance-table-header">
<p class="w3-col l1 m1 w3-hide-small">ID</p> <p>ID</p>
<p class="w3-col l2 m3 w3-hide-small">Name</p> <p>Name</p>
<p class="w3-col l1 m2 w3-hide-small">Type</p> <p class="hide-tiny">Type</p>
<p class="w3-col l2 m3 w3-hide-small">Status</p> <p class="hide-small">Status</p>
<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Name</p> <p class="hide-medium">Host Name</p>
<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Status</p> <p class="hide-medium">Host Status</p>
<p class="w3-col l2 m3 w3-hide-small">Actions</p> <p>Actions</p>
</div> </div>
<hr style="grid-column: 1 / -1; padding: 0; margin: 0;">
<div id="instance-container"> <div id="instance-container">
{{range .instances}} {{range .instances}}
{{template "instance-card" .}} {{template "instance-card" .}}

4
web/templates/backups.go.tmpl
View File

@@ -20,8 +20,8 @@
</style> </style>
<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;"> <div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;">
<p class="w3-col l2 m4 s8">{{.TimeFormatted}}</p> <p class="w3-col l2 m4 s8">{{.TimeFormatted}}</p>
<p class="w3-col l6 m6 w3-hide-small">{{.Notes}}</p> <p class="w3-col l6 m6 hide-small">{{.Notes}}</p>
<p class="w3-col l2 w3-hide-medium w3-hide-small">{{.SizeFormatted}}</p> <p class="w3-col l2 hide-medium">{{.SizeFormatted}}</p>
<div class="w3-col l2 m2 s4 flex row nowrap" style="height: 1lh;"> <div class="w3-col l2 m2 s4 flex row nowrap" style="height: 1lh;">
<svg id="edit-btn" class="clickable" aria-label="change notes"><use href="images/actions/backups/config.svg#symb"></svg> <svg id="edit-btn" class="clickable" aria-label="change notes"><use href="images/actions/backups/config.svg#symb"></svg>
<svg id="delete-btn" class="clickable" aria-label="delete backup" role="button" tabindex=0><use href="images/actions/backups/delete-active.svg#symb"></svg> <svg id="delete-btn" class="clickable" aria-label="delete backup" role="button" tabindex=0><use href="images/actions/backups/delete-active.svg#symb"></svg>

30
web/templates/instance-card.go.tmpl
View File

@@ -6,24 +6,27 @@
<style> <style>
* { * {
margin: 0; margin: 0;
padding: 0;
width: fit-content;
} }
a { a, svg {
line-height: 1em;
height: 1em; height: 1em;
width: 1em; width: 1em;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
svg { #instance-name {
height: 1em; overflow-x: hidden;
width: 1em; min-width: 0;
width: auto;
white-space: nowrap;
} }
</style> </style>
<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;"> <p>{{.VMID}}</p>
<hr class="w3-show-small w3-hide-medium w3-hide-large" style="margin: 0; margin-bottom: 1em;"> <p id="instance-name">{{.Name}}</p>
<p class="w3-col l1 m1 s6">{{.VMID}}</p> <p class="hide-small">{{.Type}}</p>
<p class="w3-col l2 m3 s6" id="instance-name">{{.Name}}</p> <div class="flex row nowrap hide-tiny">
<p class="w3-col l1 m2 w3-hide-small">{{.Type}}</p>
<div class="w3-col l2 m3 s6 flex row nowrap">
{{if eq .Status "running"}} {{if eq .Status "running"}}
<svg id="status" aria-label="instance is running"><use href="images/status/active.svg#symb"></svg> <svg id="status" aria-label="instance is running"><use href="images/status/active.svg#symb"></svg>
{{else if eq .Status "stopped"}} {{else if eq .Status "stopped"}}
@@ -35,8 +38,8 @@
{{end}} {{end}}
<p>{{.Status}}</p> <p>{{.Status}}</p>
</div> </div>
<p class="w3-col l2 w3-hide-medium w3-hide-small">{{.Node}}</p> <p class="hide-medium">{{.Node}}</p>
<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap"> <div class="flex row nowrap hide-medium">
{{if eq .NodeStatus "online"}} {{if eq .NodeStatus "online"}}
<svg aria-label="node is online"><use href="images/status/active.svg#symb"></svg> <svg aria-label="node is online"><use href="images/status/active.svg#symb"></svg>
{{else if eq .NodeStatus "offline"}} {{else if eq .NodeStatus "offline"}}
@@ -47,7 +50,7 @@
{{end}} {{end}}
<p>{{.NodeStatus}}</p> <p>{{.NodeStatus}}</p>
</div> </div>
<div class="w3-col l2 m3 s6 flex row nowrap" style="height: 1lh;"> <div class="flex row nowrap" style="height: 1lh;">
{{if and (eq .NodeStatus "online") (eq .Status "running")}} {{if and (eq .NodeStatus "online") (eq .Status "running")}}
<svg id="power-btn" class="clickable" aria-label="shutdown instance" role="button" tabindex=0><use href="images/actions/instance/stop.svg#symb"></svg> <svg id="power-btn" class="clickable" aria-label="shutdown instance" role="button" tabindex=0><use href="images/actions/instance/stop.svg#symb"></svg>
<svg id="configure-btn" aria-disabled="true" role="none"><use href="images/actions/instance/config-inactive.svg#symb"></svg> <svg id="configure-btn" aria-disabled="true" role="none"><use href="images/actions/instance/config-inactive.svg#symb"></svg>
@@ -75,7 +78,6 @@
{{else}} {{else}}
{{end}} {{end}}
</div> </div>
</div>
<template id="power-dialog"> <template id="power-dialog">
<link rel="stylesheet" href="modules/w3.css"> <link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">