From 722cbfe47f85682486cb8ee4436ca7ab63d2fdf0 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 15:48:23 +0200
Subject: [PATCH 01/43] CSS: Make body and #layout 100% of viewport

---
 public/css/icinga/layout-structure.less | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 80ce4d0069..d50d96608d 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -1,15 +1,17 @@
 /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
 
 html {
+  height: 100%;
   font-family: 'default-layout';
 }
 
+body {
+  min-height: 100%;
+  height: 100%;
+}
+
 #layout {
   height: 100%;
-  width: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
   // Prevent nav-level-2 flyovers from being covered by #main
   z-index: 0;
 }
@@ -20,7 +22,6 @@ html {
   position: fixed;
   left: 0;
   top: 0;
-
 }
 
 #sidebar {

From 204fd5d636b4929e245da0171b2d51fd6dece7a3 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 15:49:12 +0200
Subject: [PATCH 02/43] Body: Restructure layout markup

---
 application/layouts/scripts/body.phtml | 41 ++++++++++++++------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
index e04aaf1dd3..aeb49fbe92 100644
--- a/application/layouts/scripts/body.phtml
+++ b/application/layouts/scripts/body.phtml
@@ -23,28 +23,30 @@ if ($this->layout()->inlineLayout) {
 }
 
 ?>
-<div id="header">
-  <div id="announcements" class="container">
+<div id="announcements" class="container">
     <?= $this->widget('announcements') ?>
-  </div>
-  <div id="header-logo-container">
-    <?= $this->qlink(
-      '',
-      Auth::getInstance()->isAuthenticated() ? 'dashboard' : '',
-      null,
-      array(
-        'aria-hidden'       => 'true',
-        'data-base-target'  => '_main',
-        'id'                => 'header-logo'
-      )
-    ); ?>
-  </div>
 </div>
-<?php if (! $this->layout()->isIframe): ?>
-<div id="sidebar">
-  <?= $this->render('parts/navigation.phtml'); ?>
+<div id="content-wrapper">
+    <?php if (! $this->layout()->isIframe): ?>
+    <div id="sidebar">
+        <div id="header">
+            <div id="header-logo-container">
+                <?= $this->qlink(
+                    '',
+                    Auth::getInstance()->isAuthenticated() ? 'dashboard' : '',
+                    null,
+                    array(
+                        'aria-hidden'       => 'true',
+                        'data-base-target'  => '_main',
+                        'id'                => 'header-logo'
+                    )
+                ); ?>
+            </div>
+        </div>
+      <?= $this->render('parts/navigation.phtml'); ?>
+    </div>
+    <?php endif ?>
 </div>
-<?php endif ?>
 <div id="main" role="main">
   <div id="col1"
        class="container<?= $moduleClass ?>"
@@ -72,3 +74,4 @@ if ($this->layout()->inlineLayout) {
   ?></ul>
   <div id="application-state-summary" class="container" data-icinga-url="<?= $this->url('application-state/summary') ?>" data-last-update="-1" data-icinga-refresh="60"></div>
 </div>
+

From 739dd503847aac05c91fd756a9f4966b1a4ea4e9 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 15:58:11 +0200
Subject: [PATCH 03/43] CSS: Set basic layout structure

---
 public/css/icinga/layout-structure.less | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index d50d96608d..dcb089acef 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -12,32 +12,24 @@ body {
 
 #layout {
   height: 100%;
+  display: flex;
+  flex-direction: column;
   // Prevent nav-level-2 flyovers from being covered by #main
   z-index: 0;
 }
 
-#header {
-  width: 100%;
-  padding-bottom: 3em;
-  position: fixed;
-  left: 0;
-  top: 0;
+#content-wrapper {
+  flex: 1;
+  display: flex;
+
 }
 
 #sidebar {
   width: 12em;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  top: 4.5em;
 }
 
 #main {
-  position: fixed;
-  bottom: 0;
-  left: 12em;
-  right: 0;
-  top: 2.25em;
+  flex: 1;
 }
 
 .iframe {

From b819dd688173996cc40c578bd4aefdb63933e957 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 16:19:27 +0200
Subject: [PATCH 04/43] CSS: Add sidebar layout

---
 public/css/icinga/layout-structure.less | 2 ++
 public/css/icinga/layout.less           | 3 ---
 public/css/icinga/menu.less             | 6 ++----
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index dcb089acef..7b43482f8f 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -26,6 +26,8 @@ body {
 
 #sidebar {
   width: 12em;
+  display: flex;
+  flex-direction: column;
 }
 
 #main {
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 2dea1e2f11..883ab6b5e1 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -41,9 +41,6 @@
   height: 6em;
   padding: 1.25em;
   width: 16em;
-  position: fixed;
-  left: 0;
-  margin-top: -3em;
 }
 
 #header-logo,
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 105e93b156..52f77300c1 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -18,11 +18,9 @@
 #menu {
   background-color: @menu-bg-color;
   box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3);
-  height: 100%;
   width: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: absolute;
+  flex: 1;
+  overflow: scroll;
 }
 
 #layout:not(.minimal-layout) #menu {

From d2187c37161b721d8c1f955ad0f5b6078f82e508 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 16:20:10 +0200
Subject: [PATCH 05/43] Navigation: Remove menu-container wrapper

---
 .../layouts/scripts/parts/navigation.phtml    | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/application/layouts/scripts/parts/navigation.phtml b/application/layouts/scripts/parts/navigation.phtml
index edb0d8fbce..6f3e622149 100644
--- a/application/layouts/scripts/parts/navigation.phtml
+++ b/application/layouts/scripts/parts/navigation.phtml
@@ -19,17 +19,15 @@ if (! $this->auth()->isAuthenticated()) {
         </li>
     </ul>
 </div>
-<div id="menu-container">
-    <div  id="menu" data-last-update="-1" data-base-target="_main" class="container"
-          data-icinga-url="<?= $this->href('layout/menu') ?>"  data-icinga-refresh="15">
-        <?= $this->partial(
-            'layout/menu.phtml',
-            'default',
-            array(
-                'menuRenderer' => (new Menu())->getRenderer()->setUseStandardItemRenderer()
-            )
-        ) ?>
-    </div>
+<div  id="menu" data-last-update="-1" data-base-target="_main" class="container"
+      data-icinga-url="<?= $this->href('layout/menu') ?>"  data-icinga-refresh="15">
+    <?= $this->partial(
+        'layout/menu.phtml',
+        'default',
+        array(
+            'menuRenderer' => (new Menu())->getRenderer()->setUseStandardItemRenderer()
+        )
+    ) ?>
 </div>
 <button id="toggle-sidebar" title="<?= $this->translate('Toggle Menu') ?>">
     <i id="close-sidebar" class="icon-angle-double-left"></i>

From cfbeb2635425694ee011a7beafc7231fcadaec42 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 16:22:40 +0200
Subject: [PATCH 06/43] JS: Disable fixControls()

---
 public/js/icinga/ui.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index 947473b493..9f558f3820 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -529,11 +529,11 @@
         initializeControls: function(container) {
             var $container = $(container);
 
-            if ($container.parent('.dashboard').length || $('#layout').hasClass('fullscreen-layout')) {
+/*            if ($container.parent('.dashboard').length || $('#layout').hasClass('fullscreen-layout')) {
                 return;
-            }
+            }*/
 
-            $container.find('.controls').each(function() {
+/*            $container.find('.controls').each(function() {
                 var $controls = $(this);
                 if (! $controls.prev('.fake-controls').length) {
                     var $tabs = $controls.find('.tabs', $controls);
@@ -552,12 +552,12 @@
                         position: 'fixed'
                     });
                 }
-            });
+            });*/
 
             this.fixControls($container);
         },
 
-        fixControls: function($container) {
+        fixControls2: function($container) {
             var $layout = $('#layout');
 
             if ($layout.hasClass('fullscreen-layout')) {
@@ -664,6 +664,11 @@
             }
         },
 
+        fixControls: function ($container) {
+            console.log('fixControls');
+            return false;
+        },
+
         toggleFullscreen: function () {
             $('#layout').toggleClass('fullscreen-layout');
             this.fixControls();

From d579428ff954f5649b7ded68fb5d2c60ae883db7 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 16:50:17 +0200
Subject: [PATCH 07/43] CSS: Restrict #content-wrapper height to window

---
 public/css/icinga/layout-structure.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 7b43482f8f..e9b420dfcb 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -19,8 +19,9 @@ body {
 }
 
 #content-wrapper {
-  flex: 1;
+  flex: 1 1 auto;
   display: flex;
+  height: 0;
 
 }
 

From b4c1e8e846278415fddd3ce6efd0ff3fdfb4ab26 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 16:57:11 +0200
Subject: [PATCH 08/43] Body: Empty #col2 + #col3

---
 application/layouts/scripts/body.phtml | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
index aeb49fbe92..2c9ae5b813 100644
--- a/application/layouts/scripts/body.phtml
+++ b/application/layouts/scripts/body.phtml
@@ -46,21 +46,13 @@ if ($this->layout()->inlineLayout) {
       <?= $this->render('parts/navigation.phtml'); ?>
     </div>
     <?php endif ?>
-</div>
-<div id="main" role="main">
-  <div id="col1"
-       class="container<?= $moduleClass ?>"
-      <?php if ($moduleName): ?>data-icinga-module="<?= $moduleName ?>"<?php endif ?>
-       data-icinga-title="<?= ! empty($this->title) ? $this->escape($this->title) . ' :: ' : '' ?><?= $this->defaultTitle ?>"
-       data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>"
-      <?= $refresh; ?>
-       style="display: block">
-    <?= $this->render($inlineLayoutScript) ?>
-  </div>
-  <div id="col2" class="container">
-  </div>
-  <div id="col3" class="container">
-  </div>
+    <div id="main" role="main">
+      <div id="col1" class="container<?= $moduleClass ?>"<?php if ($moduleName): ?> data-icinga-module="<?= $moduleName ?>" <?php endif ?> data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>"<?= $refresh; ?> style="display: block">
+        <?= $this->render($inlineLayoutScript) ?>
+      </div>
+      <div id="col2" class="container"></div>
+      <div id="col3" class="container"></div>
+    </div>
 </div>
 <div id="footer">
   <ul role="alert" id="notifications"><?php

From ead543e37377b1f2db4166d6d3904711dbd30d4e Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 16:57:46 +0200
Subject: [PATCH 09/43] =?UTF-8?q?CSS:=20Hide=20=E2=80=98empty=E2=80=99=20c?=
 =?UTF-8?q?ontainers=20in=20main?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/icinga/layout.less | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 883ab6b5e1..50afa70b81 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -102,9 +102,10 @@
   .clearfix();
 
   & > .container {
-    float: left;
-    // Column width controlled by #layout
-    width: 100%;
+
+    &:empty {
+      display: none;
+    }
 
     // Container scrolling
     height: 100%;

From 8c7b5fcd57bc1f19fb459837f470432ed8395002 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 17:44:26 +0200
Subject: [PATCH 10/43] CSS: Add flex-box to #main

---
 public/css/icinga/layout-structure.less |  1 +
 public/css/icinga/layout.less           | 13 ++++++-------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index e9b420dfcb..9fc7e10357 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -33,6 +33,7 @@ body {
 
 #main {
   flex: 1;
+  display: flex;
 }
 
 .iframe {
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 50afa70b81..12e3225f1d 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -102,23 +102,22 @@
   .clearfix();
 
   & > .container {
+    width: 0;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
 
     &:empty {
       display: none;
     }
 
-    // Container scrolling
-    height: 100%;
-    overflow: auto;
-
     & > .content {
+      flex: 1 1 auto;
+      overflow: auto;
       padding: @gutter;
-      z-index: 2;
     }
 
     & > .controls {
-      z-index: 3;
-
       padding-left: @gutter;
       padding-right: @gutter;
 

From 098898eca64a9d1b44d2e4100d618b9982849396 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 17:46:09 +0200
Subject: [PATCH 11/43] Services/Hosts: Remove status-bar-ghost

---
 .../monitoring/application/views/scripts/list/hosts.phtml   | 1 -
 .../application/views/scripts/list/services.phtml           | 1 -
 modules/monitoring/public/css/module.less                   | 6 ------
 3 files changed, 8 deletions(-)

diff --git a/modules/monitoring/application/views/scripts/list/hosts.phtml b/modules/monitoring/application/views/scripts/list/hosts.phtml
index 4f5cd0ea57..1b8466ce34 100644
--- a/modules/monitoring/application/views/scripts/list/hosts.phtml
+++ b/modules/monitoring/application/views/scripts/list/hosts.phtml
@@ -113,7 +113,6 @@ if (! $this->compact): ?>
 <?php endif ?>
 </div>
 <?php if (! $this->compact): ?>
-<div class="monitoring-statusbar-ghost dont-print"></div>
 <div class="monitoring-statusbar dont-print">
     <?= $this->render('list/components/hostssummary.phtml') ?>
     <?= $this->render('list/components/selectioninfo.phtml') ?>
diff --git a/modules/monitoring/application/views/scripts/list/services.phtml b/modules/monitoring/application/views/scripts/list/services.phtml
index 0c78653162..60a39a32ad 100644
--- a/modules/monitoring/application/views/scripts/list/services.phtml
+++ b/modules/monitoring/application/views/scripts/list/services.phtml
@@ -141,7 +141,6 @@ if (! $this->compact): ?>
 <?php endif ?>
 </div>
 <?php if (! $this->compact): ?>
-<div class="monitoring-statusbar-ghost dont-print"></div>
 <div class="monitoring-statusbar dont-print">
     <?= $this->render('list/components/servicesummary.phtml') ?>
     <?= $this->render('list/components/selectioninfo.phtml') ?>
diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index c0a0ca10c5..be4fd86a43 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -1,11 +1,5 @@
 /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
 
-// Styles for the bottom status bar in the host and service list views
-.monitoring-statusbar-ghost {
-  display: block;
-  visibility: hidden;
-}
-
 .monitoring-statusbar {
   background-color: @body-bg-color;
   border-top: 1px solid @gray-lighter;

From 955ab298f73d056c656e65cabca5a8ea053b0059 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 17:46:42 +0200
Subject: [PATCH 12/43] CSS: Flex layout to container contents

---
 modules/monitoring/public/css/module.less |  3 +--
 public/css/icinga/layout.less             | 19 -------------------
 2 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index be4fd86a43..0a8adb8adf 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -1,11 +1,10 @@
 /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
 
 .monitoring-statusbar {
+  position: relative;
   background-color: @body-bg-color;
   border-top: 1px solid @gray-lighter;
-  bottom: 0;
   padding: .25em @gutter;
-  position: fixed;
   line-height: 1;
 
   &:before {
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 12e3225f1d..49adaa9fa3 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -159,19 +159,9 @@
 }
 
 .controls {
-  // Override default transparent background because scrolled content is positioned beneath controls and could be seen
-  // through otherwise
-  background-color: @body-bg-color;
-
   > .tabs {
-    height: 2.6em;
-    margin-top: -2.6em;
     overflow: hidden;
   }
-
-  > .tabs-spacer {
-    margin-bottom: 1em;
-  }
 }
 
 // Display tabs if JS is disabled
@@ -242,15 +232,6 @@ html.no-js .controls > .tabs {
   }
 }
 
-// Z-Index correction
-#main {
-  z-index: 1;
-}
-
-#sidebar {
-  z-index: 2;
-}
-
 // Collapsed sidebar
 #layout:not(.minimal-layout).sidebar-collapsed {
   #header-logo-container {

From c06aec0471b9c96552678d46dd6977c0abe04ce4 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 3 Jul 2019 17:47:20 +0200
Subject: [PATCH 13/43] Remove unused code

---
 public/css/icinga/responsive.less              | 5 -----
 public/css/icinga/setup.less                   | 6 ------
 public/js/icinga/behavior/application-state.js | 3 ---
 3 files changed, 14 deletions(-)

diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
index 8260e3d22f..ecaa5d00b9 100644
--- a/public/css/icinga/responsive.less
+++ b/public/css/icinga/responsive.less
@@ -174,13 +174,8 @@
 
 // Columns
 
-#layout #col2 {
-  display: none;
-}
-
 #layout.twocols #col2 {
   border-left: 1px solid @gray-lighter;
-  display: block;
 }
 
 #layout.twocols > #main > .container {
diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less
index a348c31444..53b72d87b1 100644
--- a/public/css/icinga/setup.less
+++ b/public/css/icinga/setup.less
@@ -1,10 +1,4 @@
 /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
-
-#layout {
-  overflow: auto; // TODO: Shouldn't be necessary, here, IMHO
-}
-
-
 #setup {
   > .header {
     width: 100%;
diff --git a/public/js/icinga/behavior/application-state.js b/public/js/icinga/behavior/application-state.js
index a38848ab8d..4e4a1cd901 100644
--- a/public/js/icinga/behavior/application-state.js
+++ b/public/js/icinga/behavior/application-state.js
@@ -34,9 +34,6 @@
 
     ApplicationState.prototype.onSummaryRendered = function(e) {
         var height = $(this).height();
-
-        $('#sidebar').css('bottom', height);
-        $('#main').css('bottom', height);
     };
 
     Icinga.Behaviors.ApplicationState = ApplicationState;

From 400abfe7f22702016225b40b421f22d22a15e286 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 11:35:08 +0200
Subject: [PATCH 14/43] CSS: Fix overflowing content in Safari

---
 public/css/icinga/layout-structure.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 9fc7e10357..8311d24a12 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -8,6 +8,7 @@ html {
 body {
   min-height: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 #layout {

From 37260b5035d42bceee59d4b3a18d2b94b38eb749 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 11:38:30 +0200
Subject: [PATCH 15/43] CSS: Inline styles

---
 application/layouts/scripts/body.phtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
index 2c9ae5b813..e90e439e2f 100644
--- a/application/layouts/scripts/body.phtml
+++ b/application/layouts/scripts/body.phtml
@@ -47,7 +47,7 @@ if ($this->layout()->inlineLayout) {
     </div>
     <?php endif ?>
     <div id="main" role="main">
-      <div id="col1" class="container<?= $moduleClass ?>"<?php if ($moduleName): ?> data-icinga-module="<?= $moduleName ?>" <?php endif ?> data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>"<?= $refresh; ?> style="display: block">
+      <div id="col1" class="container<?= $moduleClass ?>"<?php if ($moduleName): ?> data-icinga-module="<?= $moduleName ?>" <?php endif ?> data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>"<?= $refresh; ?>>
         <?= $this->render($inlineLayoutScript) ?>
       </div>
       <div id="col2" class="container"></div>

From cbb88d1d5e1f17970806be25e16c24c0707a0ec7 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 11:44:38 +0200
Subject: [PATCH 16/43] CSS: Add tabs background

---
 public/css/icinga/layout-structure.less | 1 -
 public/css/icinga/tabs.less             | 7 ++-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 8311d24a12..0373b75ee1 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -101,7 +101,6 @@ body {
     height: 1.5em;
     font-size: 0.75em;
     padding: 0.2em 0 0;
-    background-color: @icinga-blue;
   }
 
   .controls > ul.tabs > li > a {
diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less
index d1cf11e74a..66a8a881dd 100644
--- a/public/css/icinga/tabs.less
+++ b/public/css/icinga/tabs.less
@@ -3,6 +3,7 @@
 // Styles for tab navigation of containers
 
 .tabs {
+  background-color: @icinga-blue;
   letter-spacing: -0.417em;
 }
 
@@ -11,17 +12,13 @@
   letter-spacing: normal;
 }
 
-.tabs {
-  height: 2.6em;
-
-  a {
+.tabs a {
     padding: 0 1em;
     line-height: 2.6em;
 
     &:focus {
       outline-offset: -0.5em;
     }
-  }
 }
 
 .tabs > li {

From 59d6237a5a46c125587f4bf0d721405be0018435 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 13:33:12 +0200
Subject: [PATCH 17/43] CSS: Style fixes for sidebar

---
 public/css/icinga/layout-structure.less | 1 +
 public/css/icinga/menu.less             | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 0373b75ee1..b75dfbc108 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -30,6 +30,7 @@ body {
   width: 12em;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 #main {
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 52f77300c1..841e36cd1a 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -20,7 +20,7 @@
   box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3);
   width: 100%;
   flex: 1;
-  overflow: scroll;
+  overflow: auto;
 }
 
 #layout:not(.minimal-layout) #menu {
@@ -36,6 +36,8 @@
   vertical-align: middle;
 
   > a {
+    position: relative;
+
     &:focus {
       outline: none;
     }
@@ -254,6 +256,7 @@ ul:not(.nav-level-2) > .selected > a {
     padding: @vertical-padding 0;
     width: 14em;
     position: fixed;
+    z-index: 1;
 
     &:after {
       .transform(rotate(45deg));

From 615085d744e127b34951ca3673324fc7347e641c Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 14:55:18 +0200
Subject: [PATCH 18/43] CSS: Fix collapsed sidebar

---
 public/css/icinga/layout.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 49adaa9fa3..9a53a653d7 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -249,7 +249,6 @@ html.no-js .controls > .tabs {
   }
 
   #sidebar {
-    top: 2.25em;
     width: 3em;
   }
 

From 4febf7433e869efe1a481dc79cfe06eecfe42244 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 14:56:14 +0200
Subject: [PATCH 19/43] CSS: Add minimal-layout styles for #content-wrapper

---
 public/css/icinga/responsive.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
index ecaa5d00b9..7380eb10a3 100644
--- a/public/css/icinga/responsive.less
+++ b/public/css/icinga/responsive.less
@@ -80,6 +80,10 @@
             box-shadow: none;
   }
 
+  #content-wrapper {
+    flex-direction: column;
+  }
+
   ul > .selected > a:after,
   ul > .nav-item.active:after {
     display: none;

From 0da89bb977152cf231b579ee08c4783f8d53e3c9 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 14:56:33 +0200
Subject: [PATCH 20/43] JS: Reinstate mobile menu

---
 public/js/icinga/ui.js | 62 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 60 insertions(+), 2 deletions(-)

diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index 9f558f3820..c01b7a2a2f 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -665,8 +665,66 @@
         },
 
         fixControls: function ($container) {
-            console.log('fixControls');
-            return false;
+            var $layout = $('#layout');
+
+            var $header = $('#header');
+            var $headerLogo = $('#header-logo-container');
+            var $main = $('#main');
+            var $search = $('#search');
+            var $sidebar = $('#sidebar');
+
+            if ($layout.hasClass('minimal-layout')) {
+                if (! this.mobileMenu && $sidebar.length) {
+                    $header.css({
+                        top: $sidebar.outerHeight() + 'px'
+                    });
+                    $headerLogo.css({
+                        display: 'none'
+                    });
+                    $main.css({
+                        top: $header.outerHeight() + $sidebar.outerHeight()
+                    });
+                    $sidebar
+                        .on(
+                            'click',
+                            this.toggleMobileMenu
+                        )
+                        .prepend(
+                            $('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i><i class="icon-cancel"></i></button></div>')
+                        );
+                    $('#header-logo').clone().attr('id', 'mobile-menu-logo')
+                        .appendTo('#mobile-menu-toggle');
+                    $(window).on('keypress', this.closeMobileMenu);
+
+                    this.mobileMenu = true;
+                }
+            } else {
+                $headerLogo.css({
+                    top: $header.css('height')
+                });
+                $main.css({
+                    top: $header.css('height')
+                });
+                if (!! $headerLogo.length) {
+                    $sidebar.css({
+                        top: $headerLogo.offset().top + $headerLogo.outerHeight()
+                    });
+                }
+
+                if (this.mobileMenu) {
+                    $header.css({
+                        top: 0
+                    });
+                    $headerLogo.css({
+                        display: 'block'
+                    });
+                    $sidebar.removeClass('expanded').off('click', this.toggleMobileMenu);
+                    $search.off('keypress', this.closeMobileMenu);
+                    $('#mobile-menu-toggle').remove();
+
+                    this.mobileMenu = false;
+                }
+            }
         },
 
         toggleFullscreen: function () {

From 516bbc1ef0ed9afce31124a6f4663c5e9eb6ee40 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 16:47:41 +0200
Subject: [PATCH 21/43] JS: Fix sidebar animating out

---
 public/js/icinga/ui.js | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index c01b7a2a2f..7a69a0d333 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -675,15 +675,9 @@
 
             if ($layout.hasClass('minimal-layout')) {
                 if (! this.mobileMenu && $sidebar.length) {
-                    $header.css({
-                        top: $sidebar.outerHeight() + 'px'
-                    });
                     $headerLogo.css({
                         display: 'none'
                     });
-                    $main.css({
-                        top: $header.outerHeight() + $sidebar.outerHeight()
-                    });
                     $sidebar
                         .on(
                             'click',
@@ -699,22 +693,7 @@
                     this.mobileMenu = true;
                 }
             } else {
-                $headerLogo.css({
-                    top: $header.css('height')
-                });
-                $main.css({
-                    top: $header.css('height')
-                });
-                if (!! $headerLogo.length) {
-                    $sidebar.css({
-                        top: $headerLogo.offset().top + $headerLogo.outerHeight()
-                    });
-                }
-
                 if (this.mobileMenu) {
-                    $header.css({
-                        top: 0
-                    });
                     $headerLogo.css({
                         display: 'block'
                     });

From 6d7bccc34855aadbedba9ea8e71e7c66b55f7417 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 16:48:01 +0200
Subject: [PATCH 22/43] CSS: Fix special view layout issues

---
 public/css/icinga/menu.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 841e36cd1a..7a8a3258cb 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -21,6 +21,7 @@
   width: 100%;
   flex: 1;
   overflow: auto;
+  overflow-x: hidden;
 }
 
 #layout:not(.minimal-layout) #menu {

From c6c77aa4118b86bf4fd5a8b28315631f4745f811 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 4 Jul 2019 17:51:37 +0200
Subject: [PATCH 23/43] JS: Remove unused code

---
 public/js/icinga/ui.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index 7a69a0d333..2b4b591efc 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -666,10 +666,7 @@
 
         fixControls: function ($container) {
             var $layout = $('#layout');
-
-            var $header = $('#header');
             var $headerLogo = $('#header-logo-container');
-            var $main = $('#main');
             var $search = $('#search');
             var $sidebar = $('#sidebar');
 

From eb104c33326385be45b116eaac64bc320d986597 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Tue, 6 Aug 2019 14:11:38 +0200
Subject: [PATCH 24/43] CSS: Prevent tabs from line-break

refs #3810
refs #3815
---
 public/css/icinga/layout.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 9a53a653d7..857f895d26 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -125,6 +125,7 @@
         // Remove gutter for tabs
         margin-left: -1 * @gutter;
         margin-right: -1 * @gutter;
+        height: 2.5em;
       }
     }
   }

From 88db9c80c366060ff37419ea56fa77b356538ff1 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Tue, 6 Aug 2019 14:53:08 +0200
Subject: [PATCH 25/43] CSS: Compensate .tabs-spacer

refs #3810
refs #3815
---
 public/css/icinga/layout.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 857f895d26..0cead13c2e 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -127,6 +127,10 @@
         margin-right: -1 * @gutter;
         height: 2.5em;
       }
+
+      .tabs:first-child:not(:last-child) {
+        margin-bottom: .5em;
+      }
     }
   }
 }

From 7864150054052c440afec26218e56c1463920c34 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 7 Aug 2019 13:14:27 +0200
Subject: [PATCH 26/43] JS: Fix navigation flyout not fading out after mouseout

refs #3904
---
 public/js/icinga/behavior/navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/js/icinga/behavior/navigation.js b/public/js/icinga/behavior/navigation.js
index 07a90ef4d8..0e1d2504a6 100644
--- a/public/js/icinga/behavior/navigation.js
+++ b/public/js/icinga/behavior/navigation.js
@@ -12,7 +12,7 @@
         this.on('click', '#menu tr[href]', this.linkClicked, this);
         this.on('rendered', '#menu', this.onRendered, this);
         this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.showFlyoutMenu, this);
-        this.on('mouseleave', '#menu-container', this.hideFlyoutMenu, this);
+        this.on('mouseleave', '#menu', this.hideFlyoutMenu, this);
         this.on('click', '#toggle-sidebar', this.toggleSidebar, this);
 
         /**

From 5443bfe9fa02abdff8e785d8c3186e609f317c54 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 7 Aug 2019 13:16:19 +0200
Subject: [PATCH 27/43] JS: Do not apply 'menu-hovered' on #layout

refs #3904
---
 public/js/icinga/behavior/navigation.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/public/js/icinga/behavior/navigation.js b/public/js/icinga/behavior/navigation.js
index 0e1d2504a6..30d0df0a8a 100644
--- a/public/js/icinga/behavior/navigation.js
+++ b/public/js/icinga/behavior/navigation.js
@@ -277,17 +277,12 @@
         var $flyout = $target.find('.nav-level-2');
 
         if (! $flyout.length) {
-            $layout.removeClass('menu-hovered');
             $target.siblings().not($target).removeClass('hover');
             return;
         }
 
         var delay = 300;
 
-        if ($layout.hasClass('menu-hovered')) {
-            delay = 0;
-        }
-
         setTimeout(function() {
             try {
                 if (! $target.is(':hover')) {
@@ -295,7 +290,6 @@
                 }
             } catch(e) { /* Bypass because if IE8 */ }
 
-            $layout.addClass('menu-hovered');
             $target.siblings().not($target).removeClass('hover');
             $target.addClass('hover');
 
@@ -325,8 +319,6 @@
         var $hovered = $('#menu').find('.nav-level-1 > .nav-item.hover');
 
         if (! $hovered.length) {
-            $layout.removeClass('menu-hovered');
-
             return;
         }
 
@@ -337,7 +329,6 @@
                 }
             } catch(e) { /* Bypass because if IE8 */ };
             $hovered.removeClass('hover');
-            $layout.removeClass('menu-hovered');
         }, 600);
     };
 

From 8ebc04f2c16ffaf76bee38f5285d733b96623f22 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 22 Aug 2019 16:48:47 +0200
Subject: [PATCH 28/43] Monitoring: Beautify quick-action item hover

---
 modules/monitoring/public/css/module.less | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index 0a8adb8adf..533e283f2a 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -193,17 +193,25 @@
 
 // Quick actions
 .quick-actions {
+  margin: 0 -.5em;
+
+  &:last-child {
+    margin-bottom: -.25em;
+  }
+
   li {
     color: @icinga-blue;
-    padding: 0 0.6em;
   }
 
-  li:first-child {
-    padding-left: 0;
-  }
+  a,
+  button {
+    .rounded-corners();
+    padding: .25em .5em;
 
-  li:last-child {
-    padding-right: 0;
+    &:hover {
+      background-color: @gray-lighter;
+      text-decoration: none;
+    }
   }
 }
 

From ca02547bf6d574282bdbffb79d8f341f5b876b5b Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 22 Aug 2019 16:48:58 +0200
Subject: [PATCH 29/43] Tabs: Beautify tabs hover

---
 public/css/icinga/tabs.less | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less
index 66a8a881dd..4ef51e2d08 100644
--- a/public/css/icinga/tabs.less
+++ b/public/css/icinga/tabs.less
@@ -22,10 +22,17 @@
 }
 
 .tabs > li {
-  margin-right: 0.5em;
+  &:not(:last-child) {
+    margin-right: 0.5em;
+  }
 
   > a {
     color: @body-bg-color;
+
+    &:hover {
+      text-decoration: none;
+      background: rgba(0,0,0,.1);
+    }
   }
 
   &.active > a,
@@ -33,10 +40,6 @@
     background-color: @body-bg-color;
     color: @text-color;
   }
-
-  &:last-child {
-    margin-right: 0;
-  }
 }
 
 .tabs > .dropdown-nav-item > a,

From 2b2f0cf48fafa74491b0c0631efb9f133e58d149 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Thu, 28 Nov 2019 14:55:43 +0100
Subject: [PATCH 30/43] menu.less: Align .badge-nav-item with flexbox

---
 public/css/icinga/menu.less | 49 +++++++++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 7a8a3258cb..6fec4a93f2 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -149,8 +149,8 @@ ul:not(.nav-level-2) > .selected > a {
     padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small;
   }
 
-  &:not(.selected):not(.active) > a:hover,
-  &:not(.selected):not(.active) > a:focus {
+  &:not(.selected):not(.active) > a:not(.badge):hover,
+  &:not(.selected):not(.active) > a:not(.badge):focus {
     background-color: mix(#000, @menu-active-bg-color, 20);
     color: @menu-2ndlvl-highlight-color;
   }
@@ -479,3 +479,48 @@ input[type=text].search-input {
   width: 1.4em;
   margin-right: 0;
 }
+
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li,
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
+  &.badge-nav-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &.badge-nav-item a:not(.badge) {
+    flex: 1 1 auto;
+    width: 0;
+  }
+
+  &.badge-nav-item a.badge {
+    color: white;
+    flex: 0 1 auto;
+    margin-right: 1em;
+    padding: .25em;
+    width: auto;
+
+    &:hover {
+      opacity: .6;
+    }
+  }
+}
+
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
+  &.badge-nav-item:not(.selected) {
+    &:hover {
+      background-color: darken(@menu-bg-color, 20);
+
+      a {
+        color: white;
+      }
+    }
+  }
+}
+
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
+  &.badge-nav-item {
+    &:hover {
+      background-color: lighten(@icinga-blue, 80);
+    }
+  }
+}

From 6218ad8cdeba4cce96555e2f4b33f5a0950dd497 Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Tue, 3 Dec 2019 10:40:43 +0100
Subject: [PATCH 31/43] menu.less: Use appropriate less functions to darken
 colors

---
 public/css/icinga/menu.less | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 6fec4a93f2..8063ce7e15 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -92,7 +92,7 @@
 
   &.active:not(.selected) > a:focus,
   &.active:not(.selected) > a:hover {
-    background-color: mix(#000, @menu-active-bg-color, 20);
+    background-color: darken(@menu-active-bg-color, 20);
   }
 
   &:not(.selected) > a:hover,
@@ -151,7 +151,7 @@ ul:not(.nav-level-2) > .selected > a {
 
   &:not(.selected):not(.active) > a:not(.badge):hover,
   &:not(.selected):not(.active) > a:not(.badge):focus {
-    background-color: mix(#000, @menu-active-bg-color, 20);
+    background-color: darken(@menu-active-bg-color, 20);
     color: @menu-2ndlvl-highlight-color;
   }
 
@@ -232,7 +232,7 @@ ul:not(.nav-level-2) > .selected > a {
 
   &:hover,
   &:focus {
-    background-color: mix(#000, @menu-bg-color, 20);
+    background-color: darken(@menu-bg-color, 20);
   }
 }
 
@@ -375,7 +375,7 @@ ul:not(.nav-level-2) > .selected > a {
 }
 
 .search-input:focus ~ .search-reset:hover {
-  background-color: mix(#000, @menu-active-bg-color, 20);
+  background-color: darken(@menu-active-bg-color, 20);
 }
 
 .search-reset {
@@ -393,7 +393,7 @@ ul:not(.nav-level-2) > .selected > a {
 
   &:focus,
   &:hover {
-    background-color: mix(#000, @menu-bg-color, 20);
+    background-color: darken(@menu-bg-color, 20);
     outline: none;
   }
 }

From 31e3ce70a834d9f2e24270f0b64b76f3057b1cc1 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 10:31:00 +0100
Subject: [PATCH 32/43] layout: Don't use id `header` if it's not a global
 header

---
 application/layouts/scripts/body.phtml  | 31 ++++++++++++-------------
 public/css/icinga/layout-structure.less |  2 +-
 public/css/icinga/layout.less           | 11 +++------
 public/css/icinga/menu.less             |  4 ++++
 public/css/themes/Winter.less           |  2 +-
 public/css/themes/solarized-dark.less   |  2 +-
 6 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
index e90e439e2f..097f108f34 100644
--- a/application/layouts/scripts/body.phtml
+++ b/application/layouts/scripts/body.phtml
@@ -23,25 +23,25 @@ if ($this->layout()->inlineLayout) {
 }
 
 ?>
-<div id="announcements" class="container">
-    <?= $this->widget('announcements') ?>
+<div id="header">
+    <div id="announcements" class="container">
+        <?= $this->widget('announcements') ?>
+    </div>
 </div>
 <div id="content-wrapper">
     <?php if (! $this->layout()->isIframe): ?>
     <div id="sidebar">
-        <div id="header">
-            <div id="header-logo-container">
-                <?= $this->qlink(
-                    '',
-                    Auth::getInstance()->isAuthenticated() ? 'dashboard' : '',
-                    null,
-                    array(
-                        'aria-hidden'       => 'true',
-                        'data-base-target'  => '_main',
-                        'id'                => 'header-logo'
-                    )
-                ); ?>
-            </div>
+        <div id="header-logo-container">
+            <?= $this->qlink(
+                '',
+                Auth::getInstance()->isAuthenticated() ? 'dashboard' : '',
+                null,
+                array(
+                    'aria-hidden'       => 'true',
+                    'data-base-target'  => '_main',
+                    'id'                => 'header-logo'
+                )
+            ); ?>
         </div>
       <?= $this->render('parts/navigation.phtml'); ?>
     </div>
@@ -66,4 +66,3 @@ if ($this->layout()->inlineLayout) {
   ?></ul>
   <div id="application-state-summary" class="container" data-icinga-url="<?= $this->url('application-state/summary') ?>" data-last-update="-1" data-icinga-refresh="60"></div>
 </div>
-
diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index b75dfbc108..127af2bd55 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -27,7 +27,7 @@ body {
 }
 
 #sidebar {
-  width: 12em;
+  width: 16em;
   display: flex;
   flex-direction: column;
   position: relative;
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 0cead13c2e..8c8fdfb832 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -26,18 +26,13 @@
 
 #header,
 #login,
-#main > .container,
-#menu {
+#content-wrapper {
   font-size: @font-size;
   line-height: @line-height;
 }
 
-#header {
-  background-color: @icinga-blue;
-}
-
 #header-logo-container {
-  background: inherit;
+  background: @icinga-blue;
   height: 6em;
   padding: 1.25em;
   width: 16em;
@@ -254,7 +249,7 @@ html.no-js .controls > .tabs {
   }
 
   #sidebar {
-    width: 3em;
+    width: 4em;
   }
 
   #open-sidebar {
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 8063ce7e15..e3bb53e8d7 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -331,6 +331,8 @@ ul:not(.nav-level-2) > .selected > a {
 // Accessibility skip links
 .skip-links {
   position: relative;
+  font-size: 1/.75em;
+
   ul {
     list-style-type: none;
     margin: 0;
@@ -439,6 +441,8 @@ input[type=text].search-input {
 
 // Toggle sidebar button
 #toggle-sidebar {
+  font-size: 1/.75em;
+
   // Reset button styles
   background: none;
   border: none;
diff --git a/public/css/themes/Winter.less b/public/css/themes/Winter.less
index 3062589c4f..e07d0d659e 100644
--- a/public/css/themes/Winter.less
+++ b/public/css/themes/Winter.less
@@ -10,7 +10,7 @@
 @tr-hover-color: #c6cfe4;
 
 /* Snow, from http://codepen.io/NickyCDK/pen/AIonk */
-#header, #login {
+#login, #header-logo-container {
     background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png');
     -webkit-animation: snow 10s linear infinite;
     -moz-animation: snow 10s linear infinite;
diff --git a/public/css/themes/solarized-dark.less b/public/css/themes/solarized-dark.less
index 4b04a8950d..f383624a40 100644
--- a/public/css/themes/solarized-dark.less
+++ b/public/css/themes/solarized-dark.less
@@ -56,7 +56,7 @@
 // Form colors
 @button-primary-color: lighten(@base02, 20);
 
-#header {
+#header-logo-container {
   background-color: @base02;
 }
 

From cfb9450cf0170b2ffcc2aa3c43128647425a476d Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 10:33:42 +0100
Subject: [PATCH 33/43] Winter.less: Apply snow effect to directly to tabs

The header has no height anymore without announcements.
---
 public/css/themes/Winter.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/css/themes/Winter.less b/public/css/themes/Winter.less
index e07d0d659e..6399acec0c 100644
--- a/public/css/themes/Winter.less
+++ b/public/css/themes/Winter.less
@@ -10,7 +10,7 @@
 @tr-hover-color: #c6cfe4;
 
 /* Snow, from http://codepen.io/NickyCDK/pen/AIonk */
-#login, #header-logo-container {
+#login, #header-logo-container, #main > .container > .controls > .tabs {
     background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png');
     -webkit-animation: snow 10s linear infinite;
     -moz-animation: snow 10s linear infinite;

From 83d6a258ec9d7249b915054213a3a43b768752fd Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 13:12:54 +0100
Subject: [PATCH 34/43] application-state.js: Remove redundant rendered
 callback

---
 public/js/icinga/behavior/application-state.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/public/js/icinga/behavior/application-state.js b/public/js/icinga/behavior/application-state.js
index 4e4a1cd901..7cd655b449 100644
--- a/public/js/icinga/behavior/application-state.js
+++ b/public/js/icinga/behavior/application-state.js
@@ -10,7 +10,6 @@
     var ApplicationState = function (icinga) {
         Icinga.EventListener.call(this, icinga);
         this.on('rendered', this.onRendered, this);
-        this.on('rendered', '#application-state-summary', this.onSummaryRendered, this);
         this.icinga = icinga;
     };
 
@@ -32,10 +31,6 @@
         }
     };
 
-    ApplicationState.prototype.onSummaryRendered = function(e) {
-        var height = $(this).height();
-    };
-
     Icinga.Behaviors.ApplicationState = ApplicationState;
 
 })(Icinga, jQuery);

From 4af48c797d0b5e2991a329171e0f31ef69d7c94a Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 13:22:10 +0100
Subject: [PATCH 35/43] js: Remove `ui.fixControls()` and
 `ui.initializeControls()`

Hooray!
---
 public/js/icinga/behavior/filtereditor.js |   2 -
 public/js/icinga/events.js                |   5 -
 public/js/icinga/loader.js                |   9 -
 public/js/icinga/ui.js                    | 194 +---------------------
 4 files changed, 2 insertions(+), 208 deletions(-)

diff --git a/public/js/icinga/behavior/filtereditor.js b/public/js/icinga/behavior/filtereditor.js
index 5cd40e43ba..9bdd17144c 100644
--- a/public/js/icinga/behavior/filtereditor.js
+++ b/public/js/icinga/behavior/filtereditor.js
@@ -56,8 +56,6 @@
                         $li.toggleClass('collapsed');
                     }
                 });
-
-                icinga.ui.fixControls($container);
             }
         }
     };
diff --git a/public/js/icinga/events.js b/public/js/icinga/events.js
index c82572a55c..651972f1ba 100644
--- a/public/js/icinga/events.js
+++ b/public/js/icinga/events.js
@@ -23,9 +23,6 @@
          */
         initialize: function () {
             this.applyGlobalDefaults();
-            $('.container').each(function(idx, el) {
-                icinga.ui.initializeControls($(el));
-            });
         },
 
         /**
@@ -101,8 +98,6 @@
             } else {
                 $parent.addClass('collapsed');
             }
-
-            icinga.ui.fixControls($parent.closest('.container'));
         },
 
         onInit: function (event) {
diff --git a/public/js/icinga/loader.js b/public/js/icinga/loader.js
index 4334ae6e1a..bd655f36d7 100644
--- a/public/js/icinga/loader.js
+++ b/public/js/icinga/loader.js
@@ -938,8 +938,6 @@
                             + '.',
                             true
                         );
-
-                        this.icinga.ui.fixControls();
                     }
 
                     this.icinga.logger.error(
@@ -964,8 +962,6 @@
                 '<li class="' + c + '">' + this.icinga.utils.escape(message) + '</li>'
             ).appendTo($('#notifications'));
 
-            this.icinga.ui.fixControls();
-
             if (!persist) {
                 this.icinga.ui.fadeNotificationsAway();
             }
@@ -1145,11 +1141,6 @@
                 }, 0);
             }
 
-            var icinga = this.icinga;
-            //icinga.events.applyHandlers($container);
-            icinga.ui.initializeControls($container);
-            icinga.ui.fixControls();
-
             if (scrollPos !== false) {
                 $container.scrollTop(scrollPos);
 
diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index 2b4b591efc..d91fd11248 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -21,13 +21,6 @@
 
         this.timeCounterTimer = null;
 
-        /**
-         * Whether the mobile menu is shown
-         *
-         * @type {bool}
-         */
-        this.mobileMenu = false;
-
         // detect currentLayout
         var classList = $('#layout').attr('class').split(/\s+/);
         var _this = this;
@@ -62,10 +55,8 @@
                 .delay(7000)
                 .fadeOut('slow',
             function() {
-                icinga.ui.fixControls();
                 $(this).remove();
             });
-
         },
 
         toggleDebug: function() {
@@ -124,9 +115,9 @@
                         'href',
                         base + '/' + url.replace(/^\//, '')
                     ).on('load', function() {
-                        icinga.ui.fixControls();
                         $oldLink.remove();
                     });
+
                     $newLink.appendTo($('head'));
                 }
             });
@@ -195,7 +186,6 @@
             var col2 = this.cutContainer($('#col2'));
             var kill = this.cutContainer($('#col1'));
             this.pasteContainer($('#col1'), col2);
-            this.fixControls();
             this.icinga.behaviors.navigation.trySetActiveAndSelectedByUrl($('#col1').data('icingaUrl'));
         },
 
@@ -250,7 +240,7 @@
                     _this.currentLayout
                 );
             }
-            _this.fixControls();
+
             _this.refreshDebug();
         },
 
@@ -321,14 +311,12 @@
             this.icinga.loader.stopPendingRequestsFor($c);
             $c.trigger('close-column');
             $c.html('');
-            this.fixControls();
         },
 
         layout2col: function () {
             if (! this.isOneColLayout()) { return; }
             this.icinga.logger.debug('Switching to double col');
             $('#layout').addClass('twocols');
-            this.fixControls();
             $('#layout').trigger('layout-change');
         },
 
@@ -526,186 +514,8 @@
             }
         },
 
-        initializeControls: function(container) {
-            var $container = $(container);
-
-/*            if ($container.parent('.dashboard').length || $('#layout').hasClass('fullscreen-layout')) {
-                return;
-            }*/
-
-/*            $container.find('.controls').each(function() {
-                var $controls = $(this);
-                if (! $controls.prev('.fake-controls').length) {
-                    var $tabs = $controls.find('.tabs', $controls);
-                    if ($tabs.length && $controls.children().length > 1 && ! $tabs.next('.tabs-spacer').length) {
-                        $tabs.after($('<div class="tabs-spacer"></div>'));
-                    }
-                    var $fakeControls = $('<div class="fake-controls"></div>');
-                    $fakeControls.height($controls.height()).css({
-                        // That's only temporary. It's reset in fixControls, which is called at the end of this
-                        // function. Its purpose is to prevent the content from jumping up upon auto-refreshes.
-                        // It works by making the fake-controls appear at the same vertical level as the controls
-                        // and the height of the content then doesn't change when taking the controls out of the flow.
-                        float: 'right'
-                    });
-                    $controls.before($fakeControls).css({
-                        position: 'fixed'
-                    });
-                }
-            });*/
-
-            this.fixControls($container);
-        },
-
-        fixControls2: function($container) {
-            var $layout = $('#layout');
-
-            if ($layout.hasClass('fullscreen-layout')) {
-                return;
-            }
-
-            if (typeof $container === 'undefined') {
-                var $header = $('#header');
-                var $headerLogo = $('#header-logo-container');
-                var $main = $('#main');
-                var $search = $('#search');
-                var $sidebar = $('#sidebar');
-
-                $header.css({ height: 'auto'});
-
-                if ($layout.hasClass('minimal-layout')) {
-                    if (! this.mobileMenu && $sidebar.length) {
-                        $header.css({
-                            top: $sidebar.outerHeight() + 'px'
-                        });
-                        $headerLogo.css({
-                            display: 'none'
-                        });
-                        $main.css({
-                            top: $header.outerHeight() + $sidebar.outerHeight()
-                        });
-                        $sidebar
-                            .on(
-                                'click',
-                                this.toggleMobileMenu
-                            )
-                            .prepend(
-                                $('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i><i class="icon-cancel"></i></button></div>')
-                            );
-                            $('#header-logo').clone().attr('id', 'mobile-menu-logo')
-                                .appendTo('#mobile-menu-toggle');
-                        $(window).on('keypress', this.closeMobileMenu);
-
-                        this.mobileMenu = true;
-                    }
-                } else {
-                    $headerLogo.css({
-                        top: $header.css('height')
-                    });
-                    $main.css({
-                        top: $header.css('height')
-                    });
-                    if (!! $headerLogo.length) {
-                        $sidebar.css({
-                            top: $headerLogo.offset().top + $headerLogo.outerHeight()
-                        });
-                    }
-
-                    if (this.mobileMenu) {
-                        $header.css({
-                            top: 0
-                        });
-                        $headerLogo.css({
-                            display: 'block'
-                        });
-                        $sidebar.removeClass('expanded').off('click', this.toggleMobileMenu);
-                        $search.off('keypress', this.closeMobileMenu);
-                        $('#mobile-menu-toggle').remove();
-
-                        this.mobileMenu = false;
-                    }
-                }
-
-                var _this = this;
-                $('.container').each(function () {
-                    _this.fixControls($(this));
-                });
-
-                return;
-            }
-
-            if ($container.parent('.dashboard').length) {
-                return;
-            }
-
-            // Enable this only in case you want to track down UI problems
-            //this.icinga.logger.debug('Fixing controls for ', $container);
-
-            $container.find('.controls').each(function() {
-                var $controls = $(this);
-                var $fakeControls = $controls.prev('.fake-controls');
-                $fakeControls.css({
-                    float: '', // Set by initializeControls
-                    height: $controls.height()
-                });
-                $controls.css({
-                    top: $container.offsetParent().position().top,
-                    width: $fakeControls.outerWidth()
-                });
-            });
-
-            var $statusBar = $container.children('.monitoring-statusbar');
-            if ($statusBar.length) {
-                $statusBar.css({
-                    left: $container.offset().left,
-                    width: $container.width()
-                });
-                $statusBar.prev('.monitoring-statusbar-ghost').height($statusBar.outerHeight(true));
-            }
-        },
-
-        fixControls: function ($container) {
-            var $layout = $('#layout');
-            var $headerLogo = $('#header-logo-container');
-            var $search = $('#search');
-            var $sidebar = $('#sidebar');
-
-            if ($layout.hasClass('minimal-layout')) {
-                if (! this.mobileMenu && $sidebar.length) {
-                    $headerLogo.css({
-                        display: 'none'
-                    });
-                    $sidebar
-                        .on(
-                            'click',
-                            this.toggleMobileMenu
-                        )
-                        .prepend(
-                            $('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i><i class="icon-cancel"></i></button></div>')
-                        );
-                    $('#header-logo').clone().attr('id', 'mobile-menu-logo')
-                        .appendTo('#mobile-menu-toggle');
-                    $(window).on('keypress', this.closeMobileMenu);
-
-                    this.mobileMenu = true;
-                }
-            } else {
-                if (this.mobileMenu) {
-                    $headerLogo.css({
-                        display: 'block'
-                    });
-                    $sidebar.removeClass('expanded').off('click', this.toggleMobileMenu);
-                    $search.off('keypress', this.closeMobileMenu);
-                    $('#mobile-menu-toggle').remove();
-
-                    this.mobileMenu = false;
-                }
-            }
-        },
-
         toggleFullscreen: function () {
             $('#layout').toggleClass('fullscreen-layout');
-            this.fixControls();
         },
 
         getUniqueContainerId: function ($cont) {

From e61eb6f16083f3f3161aaa1bfb9c5c4555e02d4e Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 13:22:58 +0100
Subject: [PATCH 36/43] ui: Fix sidebar issues in minimal layout

Was completely broken even prior the removal of `ui.fixControls()`..
---
 application/layouts/scripts/body.phtml |  5 +++-
 public/css/icinga/responsive.less      | 34 ++++++++++++++++++++------
 public/js/icinga/ui.js                 | 31 ++++++++++++-----------
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
index 097f108f34..d981fff939 100644
--- a/application/layouts/scripts/body.phtml
+++ b/application/layouts/scripts/body.phtml
@@ -42,8 +42,11 @@ if ($this->layout()->inlineLayout) {
                     'id'                => 'header-logo'
                 )
             ); ?>
+            <div id="mobile-menu-toggle">
+                <button type="button"><?= $this->icon('menu') ?><?= $this->icon('cancel') ?></button>
+            </div>
         </div>
-      <?= $this->render('parts/navigation.phtml'); ?>
+        <?= $this->render('parts/navigation.phtml'); ?>
     </div>
     <?php endif ?>
     <div id="main" role="main">
diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
index 7380eb10a3..e96009d842 100644
--- a/public/css/icinga/responsive.less
+++ b/public/css/icinga/responsive.less
@@ -61,17 +61,37 @@
   }
 }
 
-#layout.minimal-layout {
-  #main {
-    left: 0;
+#layout:not(.minimal-layout) {
+  #mobile-menu-toggle {
+    display: none;
   }
+}
 
+#layout.minimal-layout {
   #sidebar {
-    top: 0 !important;
-    height: 32px;
-    padding-bottom: 2.5em;
     width: 100%;
-    z-index: 3;
+  }
+
+  #header-logo-container {
+    width: auto;
+    height: 2.5em;
+    padding: 0;
+    background: inherit;
+  }
+
+  #header-logo {
+    float: left;
+    width: 6em;
+    height: 2em;
+    margin: .25em;
+  }
+
+  #mobile-menu-toggle {
+    float: right;
+  }
+
+  #sidebar:not(.expanded) #menu {
+    display: none;
   }
 
   #menu {
diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index d91fd11248..782de5af6a 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -44,6 +44,11 @@
             this.enableTimeCounters();
             this.triggerWindowResize();
             this.fadeNotificationsAway();
+
+            $(document).on('click', '#mobile-menu-toggle', this.toggleMobileMenu);
+            $(document).on('keypress', '#search',{ self: this, type: 'key' }, this.closeMobileMenu);
+            $(document).on('mouseleave', '#sidebar', { self: this, type: 'leave' }, this.closeMobileMenu);
+            $(document).on('click', '#sidebar a', { self: this, type: 'navigate' }, this.closeMobileMenu);
         },
 
         fadeNotificationsAway: function() {
@@ -489,28 +494,26 @@
          * @param {object} e Event
          */
         toggleMobileMenu: function(e) {
-            var $sidebar = $('#sidebar');
-            var $target = $(e.target);
-            var href = $target.attr('href');
-            if (href) {
-                if (href !== '#') {
-                    $sidebar.removeClass('expanded');
-                }
-            } else if (! $target.is('input')) {
-                $sidebar.toggleClass('expanded');
-            }
+            $('#sidebar').toggleClass('expanded');
         },
 
         /**
-         * Close mobile menu when the enter key was pressed
+         * Close mobile menu when the enter key is pressed during search or the user leaves the sidebar
          *
          * @param {object} e Event
          */
         closeMobileMenu: function(e) {
-            var $search = $('#search');
-            if (e.which === 13 && $search.is(':focus')) {
+            if (e.data.self.currentLayout !== 'minimal') {
+                return;
+            }
+
+            if (e.data.type === 'key') {
+                if (e.which === 13) {
+                    $('#sidebar').removeClass('expanded');
+                    $(e.target)[0].blur();
+                }
+            } else {
                 $('#sidebar').removeClass('expanded');
-                $search[0].blur();
             }
         },
 

From 8922447d10875fe0919ac3871ebe227ee773369a Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 13:57:03 +0100
Subject: [PATCH 37/43] css: Remove remaining position instructions used for
 the legacy layout

---
 public/css/icinga/layout-structure.less | 10 ----------
 public/css/icinga/layout.less           |  4 ----
 public/css/icinga/menu.less             |  3 ---
 3 files changed, 17 deletions(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 127af2bd55..474071e593 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -42,11 +42,6 @@ body {
   #header, #sidebar {
     display: none;
   }
-
-  #main {
-    left: 0;
-    top: 0;
-  }
 }
 
 #fileupload-frame-target {
@@ -107,11 +102,6 @@ body {
   .controls > ul.tabs > li > a {
     line-height: 1.5em;
   }
-
-  #main {
-    left: 0;
-    top: 0 !important;
-  }
 }
 
 .controls-separated,
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 8c8fdfb832..d419338e92 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -244,10 +244,6 @@ html.no-js .controls > .tabs {
     background-image: url('../img/icinga-logo-compact.svg');
   }
 
-  #main {
-    left: 3em;
-  }
-
   #sidebar {
     width: 4em;
   }
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index e3bb53e8d7..01c46e07d3 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -360,9 +360,6 @@ ul:not(.nav-level-2) > .selected > a {
 }
 
 #sidebar.expanded {
-  bottom: 0 !important;
-  height: auto !important;
-
   #mobile-menu-toggle .icon-menu {
     display: none;
   }

From 9acd45df13f5b57fc0eb32294b6a9db100a21e08 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 14:56:23 +0100
Subject: [PATCH 38/43] css: Remove `min-height` and `overflow` from `body`

Causes issues in minimal layouts otherwise, at least in
Chrome. Safari suffers from this, but who cares...
---
 public/css/icinga/layout-structure.less | 2 --
 1 file changed, 2 deletions(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 474071e593..cc3fe019bb 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -6,9 +6,7 @@ html {
 }
 
 body {
-  min-height: 100%;
   height: 100%;
-  overflow: hidden;
 }
 
 #layout {

From 2cc90e0a5a97d17318a650396a50fdb928167b2b Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 15:32:07 +0100
Subject: [PATCH 39/43] Fix some .phtml indentation issues

---
 application/layouts/scripts/body.phtml            | 15 +++++++++++----
 .../layouts/scripts/parts/navigation.phtml        |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
index d981fff939..005309aefc 100644
--- a/application/layouts/scripts/body.phtml
+++ b/application/layouts/scripts/body.phtml
@@ -29,7 +29,7 @@ if ($this->layout()->inlineLayout) {
     </div>
 </div>
 <div id="content-wrapper">
-    <?php if (! $this->layout()->isIframe): ?>
+<?php if (! $this->layout()->isIframe): ?>
     <div id="sidebar">
         <div id="header-logo-container">
             <?= $this->qlink(
@@ -48,10 +48,17 @@ if ($this->layout()->inlineLayout) {
         </div>
         <?= $this->render('parts/navigation.phtml'); ?>
     </div>
-    <?php endif ?>
+<?php endif ?>
     <div id="main" role="main">
-      <div id="col1" class="container<?= $moduleClass ?>"<?php if ($moduleName): ?> data-icinga-module="<?= $moduleName ?>" <?php endif ?> data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>"<?= $refresh; ?>>
-        <?= $this->render($inlineLayoutScript) ?>
+        <div id="col1"
+            class="container<?= $moduleClass ?>"
+        <?php if ($moduleName): ?>
+            data-icinga-module="<?= $moduleName ?>"
+        <?php endif ?>
+            data-icinga-url="<?= $this->escape(Url::fromRequest()->without('renderLayout')->getAbsoluteUrl()); ?>"
+            <?= $refresh; ?>
+        >
+            <?= $this->render($inlineLayoutScript) ?>
       </div>
       <div id="col2" class="container"></div>
       <div id="col3" class="container"></div>
diff --git a/application/layouts/scripts/parts/navigation.phtml b/application/layouts/scripts/parts/navigation.phtml
index 6f3e622149..dd973f5c5b 100644
--- a/application/layouts/scripts/parts/navigation.phtml
+++ b/application/layouts/scripts/parts/navigation.phtml
@@ -19,7 +19,7 @@ if (! $this->auth()->isAuthenticated()) {
         </li>
     </ul>
 </div>
-<div  id="menu" data-last-update="-1" data-base-target="_main" class="container"
+<div id="menu" data-last-update="-1" data-base-target="_main" class="container"
       data-icinga-url="<?= $this->href('layout/menu') ?>"  data-icinga-refresh="15">
     <?= $this->partial(
         'layout/menu.phtml',

From 60dfbcbad9dcc1cf25e9724b0ddf4814fb30af50 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 15:32:43 +0100
Subject: [PATCH 40/43] Remove remaining usages of `#menu-container`

---
 public/css/icinga/menu.less             | 6 ------
 public/js/icinga/behavior/navigation.js | 2 +-
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 01c46e07d3..3b2c60f5a1 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -9,12 +9,6 @@
 
 @icon-width: 1.7em; // 1.5em width + 0.2em right margin
 
-#menu-container {
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
 #menu {
   background-color: @menu-bg-color;
   box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3);
diff --git a/public/js/icinga/behavior/navigation.js b/public/js/icinga/behavior/navigation.js
index 30d0df0a8a..2052164702 100644
--- a/public/js/icinga/behavior/navigation.js
+++ b/public/js/icinga/behavior/navigation.js
@@ -324,7 +324,7 @@
 
         setTimeout(function() {
             try {
-                if ($hovered.is(':hover') || $('#menu-container').is(':hover')) {
+                if ($hovered.is(':hover') || $('#menu').is(':hover')) {
                     return;
                 }
             } catch(e) { /* Bypass because if IE8 */ };

From 9a32be2f4e5e360149df8ed9f3f31930317a97ec Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 15:41:16 +0100
Subject: [PATCH 41/43] Winter.less: Properly apply snow effect to menu items

---
 public/css/themes/Winter.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/css/themes/Winter.less b/public/css/themes/Winter.less
index 6399acec0c..e8acb9c3f9 100644
--- a/public/css/themes/Winter.less
+++ b/public/css/themes/Winter.less
@@ -46,6 +46,10 @@
 }
 
 #menu ul.nav-level-1 > .nav-item {
+  &.selected > a {
+    background-color: transparent;
+  }
+
   &:focus, &:hover {
     background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png');
     -webkit-animation: snow 10s linear infinite;

From d83ae2cd9b2cb001d964a56de86988e1b6efecf1 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 16:04:10 +0100
Subject: [PATCH 42/43] layout: Apply `overflow:auto` also to `.container`
 elements

Otherwise content not wrapped with `.content` lets overflow
the entire page.
---
 public/css/icinga/layout.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index d419338e92..7c76e79a91 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -98,6 +98,7 @@
 
   & > .container {
     width: 0;
+    overflow: auto;
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;

From 6a4c3ea54203d6a33b9ffec803681344f7f23093 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 6 Dec 2019 16:05:24 +0100
Subject: [PATCH 43/43] layout: Don't use explicit `width` anymore to resize
 multiple columns

---
 public/css/icinga/responsive.less | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
index e96009d842..993fe836fe 100644
--- a/public/css/icinga/responsive.less
+++ b/public/css/icinga/responsive.less
@@ -202,16 +202,8 @@
   border-left: 1px solid @gray-lighter;
 }
 
-#layout.twocols > #main > .container {
-  width: 50%;
-}
-
-#layout.twocols.wide-layout #col1 {
-  width: 33.33%;
-}
-
 #layout.twocols.wide-layout #col2 {
-  width: 66.66%;
+  flex-grow: 2;
 }
 
 // Safe areas for iPhone X