Add automatic adjustment of HTML body padding

Closes GitLab issue #643. Thanks to Light Templar
(@LightTemplar) for the report.

Signed-off-by: Roberto Rosario <Roberto.Rosario@mayan-edms.com>

mayan/apps/appearance/static/appearance/js/mayan_app.js

@@ -60,6 +60,13 @@ class MayanApp {
         }
     }
 
+    doBodyAdjust () {
+        // Adjust the height of the body-spacer to move content elements
+        // up or down when the navbar changes size.
+        const navbarSize = 60;
+        $('.body-spacer').css('height', $('.navbar').height() - navbarSize);
+    }
+
     doRefreshAJAXMenu (options) {
         $.ajax({
             complete: function() {
@@ -72,7 +79,7 @@ class MayanApp {
                     $(options.menuSelector).html(data.html);
                     options.app.ajaxMenuHashes[data.name] = data.hex_hash;
                     if (options.callback !== undefined) {
-                        options.callback();
+                        options.callback(options);
                     }
                 }
             },
@@ -156,6 +163,7 @@ class MayanApp {
 
         this.setupAJAXSpinner();
         this.setupAutoSubmit();
+        this.setupBodyAdjust();
         this.setupFormHotkeys();
         this.setupFullHeightResizing();
         this.setupItemsSelector();
@@ -196,6 +204,14 @@ class MayanApp {
         });
     }
 
+    setupBodyAdjust () {
+        var self = this;
+
+        this.window.resize(function() {
+            self.doBodyAdjust();
+        });
+    }
+
     setupFormHotkeys () {
         $('body').on('keypress', '.form-hotkey-enter', function (e) {
             if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {

mayan/apps/appearance/templates/appearance/base.html

@@ -55,6 +55,7 @@
                 {% navigation_resolve_menus names='object,secondary' sort_results=True as action_menus_link_results %}
                 {% if action_menus_link_results %}
                     <div class="pull-right btn-group" id="menu-actions">
+                        <div class="body-spacer"></div>
                         <button aria-expanded="true" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" type="button">
                             {% trans 'Actions' %}
                             <span class="caret"></span>
@@ -106,6 +107,7 @@
 
             {% if facet_menus_link_results %}
                 <div id="sidebar">
+                    <div class="body-spacer"></div>
                     <div class="list-group">
                         {% for menu_link_result in facet_menus_link_results %}
                             {% for link_group in menu_link_result.link_groups %}

mayan/apps/appearance/templates/appearance/root.html

@@ -36,6 +36,7 @@
                 {% include 'appearance/main_menu.html' %}
             </div>
             <div class="main">
+                <div class="body-spacer"></div>
                 <div class="row zero-margin">
                     <div class="col-xs-12">
                         <div id="ajax-content"></div>
@@ -101,6 +102,9 @@
             var app = new MayanApp({
                 ajaxMenusOptions: [
                     {
+                        callback: function (options) {
+                            options.app.doBodyAdjust();
+                        },
                         interval: 5000,
                         menuSelector: '#menu-main',
                         name: 'menu_main',
@@ -117,11 +121,13 @@
                 app.resizeFullHeight();
                 app.setupSelect2();
                 app.setupScrollView();
+
             }
 
             jQuery(document).ready(function() {
                 app.initialize();
             });
+
         </script>
     </body>
 </html>