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

simplify styling

Browse Source
This commit is contained in:
Arthur Lu 2023-04-06 03:46:39 +00:00
parent 9469de72fe
commit 09bf0ebbe9
6 changed files with 38 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
account.html
View File

@ -11,21 +11,16 @@
</head> </head>
<body> <body>
<header> <header>
<div id="logo"> <h1>tronnet</h1>
<p style="font-size: xxx-large; margin: 0px;">tronnet</p> <hr>
</div>
<div id="hr1"><hr></div>
<div id="hr2"><hr></div>
<nav id="nav"> <nav id="nav">
<a href="index.html">Instances</a> <a href="index.html">Instances</a>
<a href="account.html" aria-current="true">Account</a> <a href="account.html" aria-current="true">Account</a>
<a href="login.html">Logout</a> <a href="login.html">Logout</a>
</nav> </nav>
<div id="title">
<h1>Account</h1>
</div>
</header> </header>
<main> <main>
<h2>Account</h2><hr>
<table id="resource-table"> <table id="resource-table">
<thead> <thead>
<tr> <tr>

15
config.html
View File

@ -12,23 +12,16 @@
</head> </head>
<body> <body>
<header> <header>
<div id="logo"> <h1>tronnet</h1>
<p style="font-size: xxx-large; margin: 0px;">tronnet</p> <hr>
</div>
<div id="title">
<h1>Instances</h1>
<p style="font-size: xxx-large;">/</p>
<h2 id="name"></h2>
</div>
<div id="hr1"><hr></div>
<div id="hr2"><hr></div>
<nav id="nav"> <nav id="nav">
<a href="index.html" aria-current="true">Instances</a> <a href="index.html" aria-current="true">Instances</a>
<a href="account.html">Account</a> <a href="account.html">Account</a>
<a href="login.html">Logout</a> <a href="login.html">Logout</a>
</nav> </nav>
</header> </header>
<main> <main>
<h2 id="name">Instances / %{vmname}</h2><hr>
<div class="center-div"> <div class="center-div">
<form> <form>
<fieldset> <fieldset>

92
css/style.css
View File

@ -12,98 +12,38 @@
* { * {
font-family: monospace; font-family: monospace;
font-size: large;
} }
body { body {
display: grid; display: grid;
min-height: 100vh; min-height: 100vh;
grid-template-rows: auto auto 1fr auto; grid-template-rows: 1fr auto;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: grid-template-areas:
"logo title" "bar main"
"hr1 hr2"
"nav main"
"footer main" "footer main"
; ;
margin: 0px; margin: 0px;
} }
header { header {
display: contents; grid-area: bar;
}
#logo {
grid-area: logo;
padding: 20px;
padding-bottom: 0px;
}
#hr1 {
grid-area: hr1;
margin: 0px;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
background-color: var(--accent-bkg-color);
color: var(--accent-txt-color);
}
#hr1 hr {
height: 1px;
}
#hr2 {
grid-area: hr2;
margin: 0px;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
background-color: var(--content-bkg-color);
color: var(--content-txt-color);
}
#hr2 hr {
height: 1px;
}
#nav {
grid-area: nav;
padding: 20px;
}
#title {
grid-area: title;
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: end;
}
#title * {
margin: 0px;
}
#logo, #nav, #hr1, footer {
background-color: var(--accent-bkg-color);
color: var(--accent-txt-color);
} }
main { main {
padding: 20px;
grid-area: main; grid-area: main;
background-color: var(--content-bkg-color);
color: var(--content-txt-color);
padding-left: 20px;
padding-right: 20px;
} }
footer { footer {
grid-area: footer; grid-area: footer;
text-align: center;
} }
footer p { header, footer {
text-align: center; background-color: var(--accent-bkg-color);
color: var(--accent-txt-color);
padding: 20px;
} }
nav { nav {
@ -139,11 +79,14 @@ nav a:hover:before {
} }
h1 { h1 {
font-size: xxx-large; font-size: xx-large;
margin: 0px;
text-align: center;
} }
h2 { h2 {
font-size: xxx-large; font-size: xx-large;
margin: 0px;
} }
h3 { h3 {
@ -160,4 +103,11 @@ p {
.none { .none {
display: none; display: none;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 1px solid;
border-color: inherit;
} }

13
index.html
View File

@ -26,21 +26,16 @@
</head> </head>
<body> <body>
<header> <header>
<div id="logo"> <h1>tronnet</h1>
<p style="font-size: xxx-large; margin: 0px;">tronnet</p> <hr>
</div>
<div id="title">
<h1>Instances</h1>
</div>
<div id="hr1"><hr></div>
<div id="hr2"><hr></div>
<nav id="nav"> <nav id="nav">
<a href="index.html" aria-current="true">Instances</a> <a href="index.html" aria-current="true">Instances</a>
<a href="account.html">Account</a> <a href="account.html">Account</a>
<a href="login.html">Logout</a> <a href="login.html">Logout</a>
</nav> </nav>
</header> </header>
<main> <main>
<h2>Instances</h2><hr>
<div id="instance-container"> <div id="instance-container">
</div> </div>
<div class="center-div" style="text-align: center;"> <div class="center-div" style="text-align: center;">

17
login.html
View File

@ -12,21 +12,14 @@
</head> </head>
<body> <body>
<header> <header>
<div id="logo"> <h1>tronnet</h1>
<p style="font-size: xxx-large; margin: 0px;">tronnet</p> <hr>
</div>
<div id="title">
<h1>Instances</h1>
<p style="font-size: xxx-large;">/</p>
<h2 id="name"></h2>
</div>
<div id="hr1"><hr></div>
<div id="hr2"><hr></div>
<nav id="nav"> <nav id="nav">
<a href="login.html" aria-current="true">Login</a> <a href="login.html">Login</a>
</nav> </nav>
</header> </header>
<main> <main>
<h2>Login</h2><hr>
<form style="margin-left: auto; margin-right: auto;"> <form style="margin-left: auto; margin-right: auto;">
<fieldset> <fieldset>
<legend>Proxmox VE Login</legend> <legend>Proxmox VE Login</legend>

2
scripts/config.js
View File

@ -35,7 +35,7 @@ async function getConfig () {
function populateResources () { function populateResources () {
let name = type === "qemu" ? "name" : "hostname"; let name = type === "qemu" ? "name" : "hostname";
document.querySelector("#name").innerText = config.data[name]; document.querySelector("#name").innerText = document.querySelector("#name").innerText.replace("%{vmname}", config.data[name]);
addResourceLine("resources", "images/resources/cpu.svg", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads"); // TODO add max from quota API addResourceLine("resources", "images/resources/cpu.svg", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads"); // TODO add max from quota API
addResourceLine("resources", "images/resources/ram.svg", "Memory", {type: "number", value: config.data.memory, min: 16, step: 1}, "MiB"); // TODO add max from quota API addResourceLine("resources", "images/resources/ram.svg", "Memory", {type: "number", value: config.data.memory, min: 16, step: 1}, "MiB"); // TODO add max from quota API