improve settings page

This commit is contained in:
Arthur Lu 2023-07-20 22:00:54 +00:00
parent c8919307af
commit ddfca3b5ef

View File

@ -11,6 +11,9 @@
<link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/form.css">
<script src="scripts/settings.js" type="module"></script> <script src="scripts/settings.js" type="module"></script>
<style> <style>
legend {
margin-bottom: 25px;
}
label { label {
display: flex; display: flex;
height: fit-content; height: fit-content;
@ -19,6 +22,13 @@
justify-content: left; justify-content: left;
column-gap: 10px; column-gap: 10px;
} }
label + p {
margin-top: 5px;
margin-bottom: 25px;
}
p:last-child {
margin-bottom: 0px;
}
</style> </style>
</head> </head>
<body> <body>
@ -41,14 +51,12 @@
<h3>Synchronization Settings</h3> <h3>Synchronization Settings</h3>
<fieldset> <fieldset>
<legend>App Sync Method</legend> <legend>App Sync Method</legend>
<div> <label><input class="w3-radio" type="radio" id="sync-always" name="sync-scheme" value="always" required><span>Always Sync</span></label>
<label><input class="w3-radio" type="radio" id="sync-always" name="sync-scheme" value="always" required><span>Always Sync</span></label> <p>App will always periodically synchronize with Proxmox. High resource usage.</p>
<p>App will periodically synchronize with Proxmox. High resource usage.</p> <label><input class="w3-radio" type="radio" id="sync-hash" name="sync-scheme" value="hash" required>Check For Sync</label>
<label><input class="w3-radio" type="radio" id="sync-hash" name="sync-scheme" value="hash" required>Check For Sync</label> <p>App will periodically synchronize only if there have been change. Medium resource usage.</p>
<p>App will periodically synchronize only if there have been change. Medium resource usage.</p> <label><input class="w3-radio" type="radio" id="sync-interrupt" name="sync-scheme" value="interrupt" required>Sync When Needed</label>
<label><input class="w3-radio" type="radio" id="sync-interrupt" name="sync-scheme" value="interrupt" required>Sync When Needed</label> <p>App will react to changes and synchronize when changes are made. Low resource usage.</p>
<p>App will react to changes and synchronize when changes are made. Low resource usage.</p>
</div>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>App Sync Frequency</legend> <legend>App Sync Frequency</legend>