97 lines
No EOL
3.2 KiB
HTML
97 lines
No EOL
3.2 KiB
HTML
<!DOCTYPE HTML5>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="~{layout.htm}">
|
|
|
|
<head>
|
|
<title>Settings</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid" layout:fragment="content">
|
|
<sl-breadcrumb>
|
|
<sl-breadcrumb-item href="/app/pdfs">PDF</sl-breadcrumb-item>
|
|
<sl-breadcrumb-item>settings</sl-breadcrumb-item>
|
|
</sl-breadcrumb>
|
|
<form method="post" action="/app/pdfs/settings" layout="column items:start gap" class="input-validation-required container">
|
|
<fieldset>
|
|
<legend>Settings</legend>
|
|
<div class="row mb-3">
|
|
<label for="inputdp" class="col-sm-2 col-form-label text-end">dataPath</label>
|
|
<div class="col-sm-8">
|
|
<sl-input id="inputdp" name="dataPath"
|
|
clearable="clearable" filled="filled" required="required" value="{settings.dataPath}"
|
|
th:value="${ settings.dataPath }"
|
|
help-text="Root folder on server containing data files e.g.'/data/'"></sl-input>
|
|
<div th:text="${error.dataPath}" class='error-message'></div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
<div class="row mb-3 ">
|
|
<label for="inputdrop" class="col-sm-2 col-form-label text-end">drop</label>
|
|
|
|
<div class="col-sm-8">
|
|
<sl-input id="inputdrop" name="drop"
|
|
clearable="clearable" filled="filled"
|
|
value="{settings.drop}" th:value="${ settings.drop }" help-text="optional sub-folder of dataPath e.g. drop-01e/"></sl-input>
|
|
<div th:text="${error.drop}" class='error-message'></div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
|
|
<div class="row mb-3">
|
|
<label for="selectam" class="col-sm-2 col-form-label text-end">Animation</label>
|
|
|
|
<div class="col-sm-8">
|
|
<sl-select id="selectam" name="animation" value="{settings.animation}" th:value="${ settings.animation }"
|
|
filled="filled" help-text="Animation for page transistions.">
|
|
<sl-option value="">None</sl-option>
|
|
<sl-option value="fade">Fade</sl-option>
|
|
<sl-option value="slide-fade">slide-fade</sl-option>
|
|
<sl-option value="bounce">bounce</sl-option>
|
|
</sl-select>
|
|
<div class='error-message'></div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
</fieldset>
|
|
<div class="mx-auto" style="width: 600px;">
|
|
<sl-button type="submit" variant="primary">Save</sl-button>
|
|
<sl-button type="reset">Reset to default values</sl-button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.errors {
|
|
background-color: red;
|
|
}
|
|
|
|
.label-on-left {
|
|
--label-width: 8rem;
|
|
--gap-width: 1rem;
|
|
}
|
|
|
|
.label-on-left+.label-on-left {
|
|
margin-top: var(--sl-spacing-medium);
|
|
}
|
|
|
|
.label-on-left::part(form-control) {
|
|
display: grid;
|
|
grid: auto / var(--label-width) 1fr;
|
|
gap: var(--sl-spacing-3x-small) var(--gap-width);
|
|
align-items: center;
|
|
}
|
|
|
|
.label-on-left::part(form-control-label) {
|
|
text-align: right;
|
|
}
|
|
|
|
.label-on-left::part(form-control-help-text) {
|
|
grid-column-start: 2;
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html> |