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

15
config.html
View File

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

92
css/style.css
View File

@ -12,98 +12,38 @@
* {
font-family: monospace;
font-size: large;
}
body {
display: grid;
min-height: 100vh;
grid-template-rows: auto auto 1fr auto;
grid-template-rows: 1fr auto;
grid-template-columns: auto 1fr;
grid-template-areas:
"logo title"
"hr1 hr2"
"nav main"
"bar main"
"footer main"
;
margin: 0px;
}
header {
display: contents;
}
#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);
grid-area: bar;
}
main {
padding: 20px;
grid-area: main;
background-color: var(--content-bkg-color);
color: var(--content-txt-color);
padding-left: 20px;
padding-right: 20px;
}
footer {
grid-area: footer;
text-align: center;
}
footer p {
text-align: center;
header, footer {
background-color: var(--accent-bkg-color);
color: var(--accent-txt-color);
padding: 20px;
}
nav {
@ -139,11 +79,14 @@ nav a:hover:before {
}
h1 {
font-size: xxx-large;
font-size: xx-large;
margin: 0px;
text-align: center;
}
h2 {
font-size: xxx-large;
font-size: xx-large;
margin: 0px;
}
h3 {
@ -160,4 +103,11 @@ p {
.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>
<body>
<header>
<div id="logo">
<p style="font-size: xxx-large; margin: 0px;">tronnet</p>
</div>
<div id="title">
<h1>Instances</h1>
</div>
<div id="hr1"><hr></div>
<div id="hr2"><hr></div>
<h1>tronnet</h1>
<hr>
<nav id="nav">
<a href="index.html" aria-current="true">Instances</a>
<a href="account.html">Account</a>
<a href="login.html">Logout</a>
</nav>
</nav>
</header>
<main>
<h2>Instances</h2><hr>
<div id="instance-container">
</div>
<div class="center-div" style="text-align: center;">

17
login.html
View File

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

2
scripts/config.js
View File

@ -35,7 +35,7 @@ async function getConfig () {
function populateResources () {
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/ram.svg", "Memory", {type: "number", value: config.data.memory, min: 16, step: 1}, "MiB"); // TODO add max from quota API