From 11bb6a80c17e76f6f787e68925b110843af7f1d6 Mon Sep 17 00:00:00 2001
From: Christian Heller <c.heller@plomlompom.de>
Date: Sun, 27 Apr 2025 17:53:19 +0200
Subject: [PATCH] Slightly improve dynamic top header styling.

---
 src/templates/_base.tmpl   | 13 ++++++++-----
 src/templates/_macros.tmpl | 10 ++++++++--
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/templates/_base.tmpl b/src/templates/_base.tmpl
index 45fe9f8..268e586 100644
--- 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 1586757..dc25e0b 100644
--- 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('*')
-- 
2.30.2