clean up preview html

docs/template-preview.md

@@ -1,8 +1,14 @@
-
 <style>
-    body {font-size: .75rem;}
+    #tplprev {
-
+        margin: 0;
-    textarea {
+        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;
     }
-
+    #tplprev .controls {
-    textarea, input {
+        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) {
+    #tplprev button {
-        /* margin-bottom: 0.5rem; */
-    }
-
-    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 {
+    #tplprev button:hover {
-            background-color: var(--md-accent-fg-color);
+        background-color: var(--md-accent-fg-color);
-        }
+    }
-
+    #tplprev input[type="number"] { width: 5ch; flex: 1; font-size: 1rem; }
-    input[type="number"] { width: 5ch; flex: 1; font-size: 1rem; }
+    #tplprev fieldset {
-
-    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)">
-
+<pre class="loading">loading wasm...</pre>
-
+<div class="template-wrapper">
-
-<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;">
 <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">
+<div style="result-wrapper">
-    <pre style="flex:1; width:100%" id="result"></pre>
+    <pre id="result"></pre>
 </div>
+</form>