Slightly improve dynamic top header styling.

diff --git a/src/templates/_base.tmpl b/src/templates/_base.tmpl
index 45fe9f87299c3e76d2b9957b4b1ad5d7fde31d67..268e586ede97a92074018555d27f8cc601d534bf 100644 (file)
--- a/src/templates/_base.tmpl
+++ b/src/templates/_base.tmpl
@@ -34,7 +34,7 @@ table.alternating > tbody > tr:nth-child(even) {
 td {
     vertical-align: top;
 }
-div.bad, td.bad, tr.bad, span.bad, input[type="submit"].bad {
+div.bad, td.bad, tr.bad, span.bad {
     {{macros.css_bg_red()}}
 }
 {% block css %}{% endblock %}
@@ -48,11 +48,14 @@ div.bad, td.bad, tr.bad, span.bad, input[type="submit"].bad {
 ledger <a href="/ledger_structured">structured</a>
 / <a href="/ledger_raw">raw</a>
 · <a href="/balance">balance</a>
-<span class="disable_on_change">
-· <input type="submit"name="file_load" value="reload" />
-</span>
+·
+{% if tainted %}
+    <span class="bad">unsaved changes:
+{% endif %}
+<input type="submit"name="file_load" value="reload" />
 {% if tainted %}
-    · <span class="bad">unsaved changes:</span><input type="submit" class="bad" name="file_save" value="save">
+    · <input type="submit" name="file_save" value="save">
+    &nbsp;</span>
 {% endif %}
 </span>
 </form>

diff --git a/src/templates/_macros.tmpl b/src/templates/_macros.tmpl
index 158675762a6525a7cede0036e31229d70103e74d..dc25e0b80eb57995e73bf1bb9f18edccaa6aea57 100644 (file)
--- a/src/templates/_macros.tmpl
+++ b/src/templates/_macros.tmpl
@@ -106,11 +106,14 @@ function taint() {
         el.disabled = false;
     });
     // deactivate "disable_on_change" span contents
-    Array.from(document.getElementsByClassName('disable_on_change')).forEach((el) => {
+    function recursive_span_disable(el) {
         old_nodes = Array.from(el.childNodes);
         el.innerHTML = '';
         old_nodes.forEach((node) => {
-            if (node.tagName == 'INPUT') {
+            if (node.tagName == 'SPAN') {
+                recursive_span_disable(node);
+                el.appendChild(node);
+            } else if (node.tagName == 'INPUT') {
                 node.disabled = true;
                 el.appendChild(node);
             } else if (node.tagName == 'A') {
@@ -121,6 +124,9 @@ function taint() {
                 el.appendChild(node);
             };
         });
+    }
+    Array.from(document.getElementsByClassName('disable_on_change')).forEach((el) => {
+        recursive_span_disable(el);
     });
     // remove oninput handlers no longer needed (since we only ever go one way)
     Array.from(document.querySelectorAll('*')