Andreas/watchtower
1
0
Fork 0
mirror of https://github.com/containrrr/watchtower.git synced 2025-12-16 07:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

clean up preview html

Browse source
This commit is contained in:
nils måsén 2023-10-02 16:01:55 +02:00
parent ddb6affcd5
commit e24e2224a0
1 changed files with 56 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

93
docs/template-preview.md
View file

@ -1,8 +1,14 @@
<style>
body {font-size: .75rem;}
textarea {
#tplprev {
margin: 0;
display: flex;
flex-direction: column;
row-gap: 1rem;
box-sizing: border-box;
position: relative;
margin-right: -13.3rem
}
#tplprev textarea {
box-decoration-break: slice;
overflow: auto;
padding: 0.77em 1.18em;
@ -11,9 +17,14 @@
touch-action: auto;
word-break: normal;
height: 420px;
flex: 1;
}
textarea, input {
#tplprev .controls {
display: flex;
flex-direction: row;
column-gap: 0.5rem
}
#tplprev textarea, #tplprev input {
background-color: var(--md-code-bg-color);
border-width: 0;
border-radius: 0.1rem;
@ -21,36 +32,39 @@
font-feature-settings: "kern";
font-family: var(--md-code-font-family);
}
.numfield {
font-size: .7rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
label:not(:last-child) {
/* margin-bottom: 0.5rem; */
}
button {
#tplprev button {
border-radius: 0.1rem;
color: var(--md-typeset-color);
background-color: var(--md-primary-fg-color);
flex:1;
min-width: 12ch;
padding: 0.5rem
}
button:hover {
background-color: var(--md-accent-fg-color);
}
input[type="number"] { width: 5ch; flex: 1; font-size: 1rem; }
fieldset {
#tplprev button:hover {
background-color: var(--md-accent-fg-color);
}
#tplprev input[type="number"] { width: 5ch; flex: 1; font-size: 1rem; }
#tplprev fieldset {
margin-top: -0.5rem;
display: flex;
flex: 1;
column-gap: 0.5rem;
}
#tplprev .template-wrapper {
display: flex;
flex:1;
column-gap: 1rem;
}
#tplprev .result-wrapper {
flex: 1;
display: flex
}
#result {
font-size: 0.7rem;
background-color: var(--md-code-bg-color);
@ -61,8 +75,18 @@
padding: 0.77em 1.18em;
margin:0;
height: 540px;
flex:1;
width:100%
}
#tplprev .loading {
position: absolute;
inset: 0;
display: flex;
padding: 1rem;
box-sizing: border-box;
background: var(--md-code-bg-color);
margin-top: 0
}
</style>
<script src="../assets/wasm_exec.js"></script>
<script>
@ -109,20 +133,14 @@
}
const go = new Go();
WebAssembly.instantiateStreaming(fetch("../assets/tplprev.wasm"), go.importObject).then((result) => {
document.querySelector('#loading').style.display = "none";
document.querySelector('#tplprev .loading').style.display = "none";
go.run(result.instance);
updatePreview();
});
</script>
<form id="tplprev" onchange="updatePreview()" onsubmit="formSubmitted(event)" style="margin: 0;display: flex; flex-direction: column; row-gap: 1rem; box-sizing: border-box; position: relative; margin-right: -13.3rem">
<pre id="loading" style="position: absolute; inset: 0; display: flex; padding: 1rem; box-sizing: border-box; background: var(--md-code-bg-color); margin-top: 0">loading wasm...</pre>
<div style="display: flex; flex:1; column-gap: 1rem;">
<form id="tplprev" onchange="updatePreview()" onsubmit="formSubmitted(event)">
<pre class="loading">loading wasm...</pre>
<div class="template-wrapper">
<textarea name="template" type="text" style="flex: 1" onkeyup="inputUpdated()">{{- with .Report -}}
{{- if ( or .Updated .Failed ) -}}
{{len .Scanned}} Scanned, {{len .Updated}} Updated, {{len .Failed}} Failed
@ -146,7 +164,7 @@ Logs:
{{ end -}}
{{range .Entries -}}{{.Time.Format "2006-01-02T15:04:05Z07:00"}} [{{.Level}}] {{.Message}}{{"\n"}}{{- end -}}</textarea>
</div>
<div style="display: flex; flex-direction: row; column-gap: 0.5rem">
<div class="controls">
<fieldset>
<legend><label><input type="checkbox" name="enablereport" checked /> Container report</label></legend>
<label class="numfield">
@ -193,8 +211,9 @@ Logs:
<input type="number" name="debug" value="4" />
</label>
</fieldset>
<button type="submit" style="flex:1; min-width: 12ch; padding: 0.5rem">Update preview</button>
<button type="submit">Update preview</button>
</div>
<div style="flex: 1; display: flex">
<pre style="flex:1; width:100%" id="result"></pre>
</div>
<div style="result-wrapper">
<pre id="result"></pre>
</div>
</form>