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

reduce inline css usage,

Browse Source 
fix additional font inconsistencies,
fix px unit used with 0 values
This commit is contained in:
Arthur Lu
2026-06-09 23:33:27 +00:00
parent 10ef24e76b
commit 8f72aaf255
12 changed files with 144 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/form.css
+24 -10
View File
@@ -5,7 +5,7 @@ input, select, textarea {
.input-grid { .input-grid {
display: grid; display: grid;
gap: 5px 10px; gap: 0.5em 1em;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
@@ -13,12 +13,12 @@ input, select, textarea {
.input-grid * { .input-grid * {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-top: 8px; padding-top: 0.5em;
padding-bottom: 8px; padding-bottom: 0.5em;
} }
.input-grid input { .input-grid input {
padding: 8px; padding: 0.5em;
} }
.input-grid img { .input-grid img {
@@ -34,9 +34,8 @@ legend {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 1.5em; margin-top: 0.25em;
margin-top: 0.25lh; margin-bottom: 0.25em;
margin-bottom: 0.25lh;
} }
fieldset { fieldset {
@@ -45,7 +44,7 @@ fieldset {
} }
fieldset > *:last-child { fieldset > *:last-child {
margin-bottom: 8px; margin-bottom: 0.5em;
} }
fieldset > .input-grid { fieldset > .input-grid {
@@ -67,7 +66,7 @@ input[type="radio"] {
} }
.w3-select, select { .w3-select, select {
padding: 8px; padding: 0.5em;
} }
.w3-check { .w3-check {
@@ -78,10 +77,25 @@ input[type="radio"] {
:not(.input-grid) .input-grid + * { :not(.input-grid) .input-grid + * {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
margin-top: 5px; margin-top: 0.5em;
} }
dialog { dialog {
margin: auto;
max-width: calc(min(100% - 16px, 80ch)); max-width: calc(min(100% - 16px, 80ch));
color: var(--main-text-color); color: var(--main-text-color);
} }
dialog #prompt {
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
}
dialog button[value="confirm"] {
background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);
}
dialog button[value="cancel"] {
background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);
}
web/css/nav.css
+3 -2
View File
@@ -53,6 +53,7 @@ header {
} }
header h1 { header h1 {
font-size: var(--small-font-size);
margin: 0; margin: 0;
background-color: var(--nav-header-bg-color); background-color: var(--nav-header-bg-color);
color: var(--nav-header-text-color); color: var(--nav-header-text-color);
@@ -67,8 +68,8 @@ nav {
nav a, header h1, label[for="navtoggle"] { nav a, header h1, label[for="navtoggle"] {
text-align: left; text-align: left;
padding-left: 8px; padding-left: 0.5em;
padding-right: 8px; padding-right: 0.5em;
text-decoration: none; text-decoration: none;
vertical-align: middle; vertical-align: middle;
height: 2em; height: 2em;
web/css/style.css
+19 -6
View File
@@ -44,22 +44,35 @@
} }
} }
*, h1, h2, h3, p { *, h1, h2, h3, h4, h5, h6, p {
box-sizing: border-box; box-sizing: border-box;
font-family: monospace; font-family: monospace;
line-height: normal;
} margin: 0;
padding: 0;
h1, p {
font-size: var(--small-font-size);
} }
h2 { h2 {
font-size: var(--large-font-size); font-size: var(--large-font-size);
margin-top: 0.5em;
margin-bottom: 0.5em;
} }
h3 { h3 {
font-size: var(--medium-font-size); font-size: var(--medium-font-size);
margin-top: 0.5em;
margin-bottom: 0.5em;
}
h4, legend {
font-size: var(--small-font-size);
text-decoration: underline;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
p {
font-size: var(--small-font-size);
} }
html { html {
web/html/account.html
+3 -3
View File
@@ -52,7 +52,7 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/form.css">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Change Password Change Password
</p> </p>
<div id="body"> <div id="body">
@@ -64,8 +64,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
web/html/index.html
+3 -3
View File
@@ -82,7 +82,7 @@
</button> </button>
<template id="create-instance-dialog"> <template id="create-instance-dialog">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Create New Instance Create New Instance
</p> </p>
<div id="body"> <div id="body">
@@ -120,8 +120,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
web/html/settings.html
+4 -7
View File
@@ -5,23 +5,20 @@
<script src="scripts/settings.js" type="module"></script> <script src="scripts/settings.js" type="module"></script>
<link rel="modulepreload" href="scripts/utils.js"> <link rel="modulepreload" href="scripts/utils.js">
<style> <style>
legend {
margin-bottom: 25px;
}
label { label {
display: flex; display: flex;
height: fit-content; height: fit-content;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: left; justify-content: left;
column-gap: 10px; column-gap: 0.5em;
} }
label + p { label + p {
margin-top: 5px; margin-top: 0.5em;
margin-bottom: 25px; margin-bottom: 1em;
} }
p:last-child { p:last-child {
margin-bottom: 0px; margin-bottom: 0;
} }
</style> </style>
</head> </head>
web/scripts/dialog.js
+4 -4
View File
@@ -48,7 +48,7 @@ export function alert (message) {
dialog.id = "alert-dialog"; dialog.id = "alert-dialog";
dialog.innerHTML = ` dialog.innerHTML = `
<form method="dialog"> <form method="dialog">
<p class="w3-center" style="margin-bottom: 0px;">${message}</p> <p class="w3-center" style="margin-bottom: 0;">${message}</p>
<div class="w3-center"> <div class="w3-center">
<button class="w3-button w3-margin" id="submit">OK</button> <button class="w3-button w3-margin" id="submit">OK</button>
</div> </div>
@@ -82,18 +82,18 @@ class ErrorDialog extends HTMLElement {
<link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/form.css">
<style> <style>
#errors { #errors {
margin-bottom: 0px; margin-bottom: 0;
max-height: 20lh; max-height: 20lh;
min-height: 20lh; min-height: 20lh;
overflow-y: scroll; overflow-y: scroll;
} }
#errors * { #errors * {
margin: 0px; margin: 0;
} }
</style> </style>
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<form method="dialog"> <form method="dialog">
<p class="w3-large" id="prompt" style="text-align: center;">Error</p> <p class="w3-large" id="prompt">Error</p>
<div id="errors" class="flex column-reverse"></div> <div id="errors" class="flex column-reverse"></div>
<div class="w3-center" id="controls"> <div class="w3-center" id="controls">
<button class="w3-button w3-margin" type="submit" value="ok">OK</button> <button class="w3-button w3-margin" type="submit" value="ok">OK</button>
web/templates/backups.go.tmpl
+14 -14
View File
@@ -10,8 +10,8 @@
a { a {
height: 1em; height: 1em;
width: 1em; width: 1em;
margin: 0px; margin: 0;
padding: 0px; padding: 0;
} }
</style> </style>
<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;"> <div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;">
@@ -29,7 +29,7 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/form.css">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Edit Backup Edit Backup
</p> </p>
<div id="body"> <div id="body">
@@ -39,8 +39,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -49,7 +49,7 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/form.css">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Delete Backup Delete Backup
</p> </p>
<div id="body"> <div id="body">
@@ -60,8 +60,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -70,7 +70,7 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/form.css">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Restore From Backup? Restore From Backup?
</p> </p>
<div id="body"> <div id="body">
@@ -84,8 +84,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -103,7 +103,7 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/form.css">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Create Backup Create Backup
</p> </p>
<div id="body"> <div id="body">
@@ -113,8 +113,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
web/templates/config.go.tmpl
+57 -50
View File
@@ -50,7 +50,7 @@
</button> </button>
<template id="add-disk-dialog"> <template id="add-disk-dialog">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Create New Disk Create New Disk
</p> </p>
<div id="body"> <div id="body">
@@ -65,8 +65,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -79,7 +79,7 @@
</button> </button>
<template id="add-cd-dialog"> <template id="add-cd-dialog">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Mount a CDROM Mount a CDROM
</p> </p>
<div id="body"> <div id="body">
@@ -89,8 +89,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -163,7 +163,7 @@
<img class="clickable" alt="Move {{.Name}}" src="images/actions/disk/move-active.svg#symb"> <img class="clickable" alt="Move {{.Name}}" src="images/actions/disk/move-active.svg#symb">
<template id="dialog-template"> <template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Move {{.Name}} Move {{.Name}}
</p> </p>
<div id="body"> <div id="body">
@@ -173,8 +173,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -198,7 +198,7 @@
<img class="clickable" alt="Resize {{.Name}}" src="images/actions/disk/resize-active.svg#symb"> <img class="clickable" alt="Resize {{.Name}}" src="images/actions/disk/resize-active.svg#symb">
<template id="dialog-template"> <template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Resize {{.Name}} Resize {{.Name}}
</p> </p>
<div id="body"> <div id="body">
@@ -208,8 +208,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -233,7 +233,7 @@
<img class="clickable" alt="Delete {{.Name}}" src="images/actions/disk/delete-active.svg#symb"> <img class="clickable" alt="Delete {{.Name}}" src="images/actions/disk/delete-active.svg#symb">
<template id="dialog-template"> <template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Delete {{.Name}} Delete {{.Name}}
</p> </p>
<div id="body"> <div id="body">
@@ -242,8 +242,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -267,7 +267,7 @@
<img class="clickable" alt="Attach {{.Name}}" src="images/actions/disk/attach.svg#symb"> <img class="clickable" alt="Attach {{.Name}}" src="images/actions/disk/attach.svg#symb">
<template id="dialog-template"> <template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Attach {{.Name}} Attach {{.Name}}
</p> </p>
<div id="body"> <div id="body">
@@ -284,8 +284,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -300,7 +300,7 @@
<img class="clickable" alt="Detach {{.Name}}" src="images/actions/disk/detach.svg#symb"> <img class="clickable" alt="Detach {{.Name}}" src="images/actions/disk/detach.svg#symb">
<template id="dialog-template"> <template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Detach {{.Name}} Detach {{.Name}}
</p> </p>
<div id="body"> <div id="body">
@@ -309,8 +309,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -340,7 +340,7 @@
</button> </button>
<template id="add-net-dialog"> <template id="add-net-dialog">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Create Network Interface Create Network Interface
</p> </p>
<div id="body"> <div id="body">
@@ -353,8 +353,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -371,7 +371,7 @@
<img class="clickable" alt="Configure Net {{.Net_ID}}" src="images/actions/network/config.svg#symb"> <img class="clickable" alt="Configure Net {{.Net_ID}}" src="images/actions/network/config.svg#symb">
<template id="dialog-template"> <template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Edit {{.Net_ID}} Edit {{.Net_ID}}
</p> </p>
<div id="body"> <div id="body">
@@ -380,8 +380,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -393,7 +393,7 @@
<img class="clickable" alt="Delete Net {{.Net_ID}}" src="images/actions/network/delete-active.svg#symb"> <img class="clickable" alt="Delete Net {{.Net_ID}}" src="images/actions/network/delete-active.svg#symb">
<template id="dialog-template"> <template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Delete {{.Net_ID}} Delete {{.Net_ID}}
</p> </p>
<div id="body"> <div id="body">
@@ -402,8 +402,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -425,7 +425,7 @@
</button> </button>
<template id="add-device-dialog"> <template id="add-device-dialog">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Add Expansion Card Add Expansion Card
</p> </p>
<div id="body"> <div id="body">
@@ -436,8 +436,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -454,7 +454,7 @@
<img class="clickable" alt="Configure Device {{.Device_ID}}" src="images/actions/device/config.svg#symb"> <img class="clickable" alt="Configure Device {{.Device_ID}}" src="images/actions/device/config.svg#symb">
<template id="dialog-template"> <template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Edit Expansion Card {{.Device_ID}} Edit Expansion Card {{.Device_ID}}
</p> </p>
<div id="body"> <div id="body">
@@ -463,8 +463,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -476,7 +476,7 @@
<img class="clickable" alt="Delete Device {{.Device_ID}}" src="images/actions/device/delete-active.svg#symb"> <img class="clickable" alt="Delete Device {{.Device_ID}}" src="images/actions/device/delete-active.svg#symb">
<template id="dialog-template"> <template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
remove Expansion Card {{.Device_ID}} remove Expansion Card {{.Device_ID}}
</p> </p>
<div id="body"> <div id="body">
@@ -485,8 +485,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -516,10 +516,17 @@
div.draggable-item { div.draggable-item {
cursor: grab; cursor: grab;
} }
div.draggable-item svg { div.draggable-item img {
height: 1em; height: 1em;
width: 1em; width: 1em;
} }
div.draggable-item p {
margin: 0;
}
div.draggable-item p.volume-file {
overflow: hidden;
white-space: nowrap;
}
#wrapper { #wrapper {
padding-bottom: 1em; padding-bottom: 1em;
} }
@@ -536,18 +543,18 @@
{{define "boot-target"}} {{define "boot-target"}}
{{if .volume_id}} {{if .volume_id}}
<div class="draggable-item" data-value="{{.volume_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;"> <div class="draggable-item" data-value="{{.volume_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 0.5em; align-items: center;">
<img style="height: 1em; width: 1em" alt="Drag" src="images/actions/drag.svg#symb"> <img alt="Drag" src="images/actions/drag.svg#symb">
<img style="height: 1em; width: 1em" alt="Volume" src="images/resources/drive.svg#symb"> <img alt="Volume" src="images/resources/drive.svg#symb">
<p style="margin: 0px;">{{.volume_id}}</p> <p class="volume-id">{{.volume_id}}</p>
<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.file}}</p> <p class="volume-file">{{.file}}</p>
</div> </div>
{{else if .net_id}} {{else if .net_id}}
<div class="draggable-item" data-value="{{.net_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;"> <div class="draggable-item" data-value="{{.net_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 0.5em; align-items: center;">
<img style="height: 1em; width: 1em" alt="Drag" src="images/actions/drag.svg#symb"> <img alt="Drag" src="images/actions/drag.svg#symb">
<img style="height: 1em; width: 1em" alt="Net" src="images/resources/network.svg#symb"> <img alt="Net" src="images/resources/network.svg#symb">
<p style="margin: 0px;">{{.net_id}}</p> <p class="volume-id">{{.net_id}}</p>
<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.value}}</p> <p class="volume-file">{{.value}}</p>
</div> </div>
{{else}} {{else}}
{{end}} {{end}}
web/templates/instance-card.go.tmpl
+10 -10
View File
@@ -13,8 +13,8 @@
line-height: 1em; line-height: 1em;
height: 1em; height: 1em;
width: 1em; width: 1em;
margin: 0px; margin: 0;
padding: 0px; padding: 0;
} }
a img { a img {
vertical-align: unset; vertical-align: unset;
@@ -30,7 +30,7 @@
} }
.row { /* needed for some reason to avoid a flickering issue on chrome ONLY */ .row { /* needed for some reason to avoid a flickering issue on chrome ONLY */
flex-direction: row; flex-direction: row;
column-gap: 10px; column-gap: 0.5em;
align-items: center; align-items: center;
} }
.nowrap { /* needed for some reason to avoid a flickering issue on chrome ONLY */ .nowrap { /* needed for some reason to avoid a flickering issue on chrome ONLY */
@@ -82,7 +82,7 @@
{{end}} {{end}}
<p>{{.NodeStatus}}</p> <p>{{.NodeStatus}}</p>
</div> </div>
<div class="flex row nowrap" style="height: 1lh;"> <div class="flex row nowrap">
{{if and (eq .NodeStatus "online") (eq .Status "running")}} {{if and (eq .NodeStatus "online") (eq .Status "running")}}
<img id="power-btn" class="clickable" alt="shutdown instance" role="button" tabindex=0 src="images/actions/instance/stop.svg#symb"> <img id="power-btn" class="clickable" alt="shutdown instance" role="button" tabindex=0 src="images/actions/instance/stop.svg#symb">
<img id="configure-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/config-inactive.svg#symb"> <img id="configure-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/config-inactive.svg#symb">
@@ -115,7 +115,7 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/form.css">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
{{if eq .Status "running"}} {{if eq .Status "running"}}
Stop {{.VMID}} Stop {{.VMID}}
{{else if eq .Status "stopped"}} {{else if eq .Status "stopped"}}
@@ -134,8 +134,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
@@ -144,7 +144,7 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/form.css">
<dialog class="w3-container w3-card w3-border-0"> <dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;"> <p class="w3-large" id="prompt">
Delete {{.VMID}} Delete {{.VMID}}
</p> </p>
<div id="body"> <div id="body">
@@ -153,8 +153,8 @@
</form> </form>
</div> </div>
<div id="controls" class="w3-center w3-container"> <div id="controls" class="w3-center w3-container">
<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button> <button id="cancel" value="cancel" form="form" class="w3-button w3-margin" formnovalidate>CANCEL</button>
<button id="confirm" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button> <button id="confirm" value="confirm" form="form" class="w3-button w3-margin">CONFIRM</button>
</div> </div>
</dialog> </dialog>
</template> </template>
web/templates/resource-chart.go.tmpl
+2 -3
View File
@@ -8,8 +8,7 @@
margin: 0; margin: 0;
width: 100%; width: 100%;
height: fit-content; height: fit-content;
padding: 10px; padding: 0.5em;
border-radius: 5px;
} }
progress { progress {
width: 100%; width: 100%;
@@ -19,7 +18,7 @@
} }
#caption { #caption {
text-align: center; text-align: center;
margin-top: 10px; margin-top: 0.5em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }