Improve Booking editing links bar layout.

diff --git a/templates/_macros.tmpl b/templates/_macros.tmpl
index 3619472b02cfb30f4b6bd17611b6794f89ae1d85..a89969998bcfad480ae45abff7bb35f6c9f5198b 100644 (file)
--- a/templates/_macros.tmpl
+++ b/templates/_macros.tmpl
@@ -59,15 +59,16 @@ function taint() {
     el.disabled = false;
   });
   // deactivate Booking links
-  let links_text = '';
-  Array.from(document.getElementsByClassName("disable_on_change")).forEach((el) => {
-    links_text += el.textContent + ' ';
+  Array.from(document.getElementsByClassName("disable_on_change")).forEach((span) => {
+    let links_text = '';
+    Array.from(span.childNodes).forEach((node) => {
+      links_text += node.textContent + ' ';
+    });
+    span.innerHTML = '';
+    const del = document.createElement("del");
+    span.appendChild(del);
+    del.textContent = links_text;
   });
-  const span = document.getElementById('booking_links');
-  span.innerHTML = '';
-  const del = document.createElement("del");
-  span.appendChild(del);
-  del.textContent = links_text;
   // remove oninput handlers no longer needed (since we only ever go one way)
   ['input', 'textarea'].forEach((tag_name) => {
       Array.from(document.getElementsByTagName(tag_name)).forEach((el) => {
@@ -78,13 +79,13 @@ function taint() {
 {% endmacro %}
 
 {% macro edit_bar(target, id) %}
+<span class="disable_on_change">
+<a href="/bookings/{{id-1}}">prev</a> · <a href="/bookings/{{id+1}}">next</a>
+</span>
 <input class="enable_on_change" type="submit" name="apply" value="apply" disabled />
 <input class="enable_on_change" type="submit" name="revert" value="revert" disabled />
-<span id="booking_links">
-<a class="disable_on_change" href="/edit_{{target}}/{{id}}">switch to {{target}}</a>
-<a class="disable_on_change" href="/balance?up_incl={{id}}">balance after</a>
-<a class="disable_on_change" href="/bookings/{{id-1}}">prev</a>
-<a class="disable_on_change" href="/bookings/{{id+1}}">next</a>
+<span class="disable_on_change">
+<a href="/edit_{{target}}/{{id}}">switch to {{target}}</a> · <a href="/balance?up_incl={{id}}">balance after</a>
 </span>
 <hr />
 {% endmacro %}