luci-theme-bootstrap: dynamically adjust body margin

Fixes: #3722
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit c99684dff73b4d0ca6f73cd3cde667f685aa5b4b)

diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/json-menu.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/json-menu.htm
index b38406f65aeb38a24475cc5b4ba383edcc9bd318..02b81b88112291996ee9fb4513663fc88843a9f0 100644 (file)
--- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/json-menu.htm
+++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/json-menu.htm
@@ -98,6 +98,13 @@
                                ul.style.display = '';
                }
 
+               function adjust_body_margin(ev) {
+                       var body = document.querySelector('body'),
+                           head = document.querySelector('header');
+
+                       body.style.marginTop = head.offsetHeight + 'px';
+               }
+
                document.addEventListener('luci-loaded', function(ev) {
                        var tree = <%= luci.http.write_json(luci.dispatcher.context.authsession and luci.dispatcher.menu_json() or {}) %>,
                            node = tree,
@@ -114,6 +121,14 @@
                                if (node)
                                        render_tabmenu(node, url);
                        }
+
+                       document.addEventListener('poll-start', adjust_body_margin);
+                       document.addEventListener('poll-stop', adjust_body_margin);
+                       document.addEventListener('uci-new-changes', adjust_body_margin);
+                       document.addEventListener('uci-clear-changes', adjust_body_margin);
+                       window.addEventListener('resize', adjust_body_margin);
+
+                       adjust_body_margin(ev);
                });
        })();
 </script>