Merge pull request #3904 from Icinga/feature/flex-box-layout-reworked

Rework layout with flexbox
Icinga · Dec 6, 2019 · f5dc25b · f5dc25b
2 parents b8f8187 + 6a4c3ea
commit f5dc25b
Show file tree

Hide file tree

Showing 19 changed files with 222 additions and 391 deletions.
diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
@@ -24,41 +24,45 @@ if ($this->layout()->inlineLayout) {
 
 ?>
 <div id="header">
-  <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 id="announcements" class="container">
+        <?= $this->widget('announcements') ?>
+    </div>
 </div>
+<div id="content-wrapper">
 <?php if (! $this->layout()->isIframe): ?>
-<div id="sidebar">
-  <?= $this->render('parts/navigation.phtml'); ?>
-</div>
+    <div id="sidebar">
+        <div id="header-logo-container">
+            <?= $this->qlink(
+                '',
+                Auth::getInstance()->isAuthenticated() ? 'dashboard' : '',
+                null,
+                array(
+                    'aria-hidden'       => 'true',
+                    'data-base-target'  => '_main',
+                    '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'); ?>
+    </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-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; ?>
+        >
+            <?= $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

diff --git 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>

diff --git 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
@@ -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
@@ -1,17 +1,10 @@
 /*! 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 {
+  position: relative;
   background-color: @body-bg-color;
   border-top: 1px solid @gray-lighter;
-  bottom: 0;
   padding: .25em @gutter;
-  position: fixed;
   line-height: 1;
 
   &:before {
@@ -200,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;
+    }
   }
 }
 

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
@@ -1,53 +1,45 @@
 /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
 
 html {
+  height: 100%;
   font-family: 'default-layout';
 }
 
+body {
+  height: 100%;
+}
+
 #layout {
   height: 100%;
-  width: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
+  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 1 auto;
+  display: flex;
+  height: 0;
 
 }
 
 #sidebar {
-  width: 12em;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  top: 4.5em;
+  width: 16em;
+  display: flex;
+  flex-direction: column;
+  position: relative;
 }
 
 #main {
-  position: fixed;
-  bottom: 0;
-  left: 12em;
-  right: 0;
-  top: 2.25em;
+  flex: 1;
+  display: flex;
 }
 
 .iframe {
   #header, #sidebar {
     display: none;
   }
-
-  #main {
-    left: 0;
-    top: 0;
-  }
 }
 
 #fileupload-frame-target {
@@ -103,17 +95,11 @@ html {
     height: 1.5em;
     font-size: 0.75em;
     padding: 0.2em 0 0;
-    background-color: @icinga-blue;
   }
 
   .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
@@ -26,24 +26,16 @@
 
 #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;
-  position: fixed;
-  left: 0;
-  margin-top: -3em;
 }
 
 #header-logo,
@@ -105,29 +97,35 @@
   .clearfix();
 
   & > .container {
-    float: left;
-    // Column width controlled by #layout
-    width: 100%;
-
-    // Container scrolling
-    height: 100%;
+    width: 0;
     overflow: auto;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+
+    &:empty {
+      display: none;
+    }
 
     & > .content {
+      flex: 1 1 auto;
+      overflow: auto;
       padding: @gutter;
-      z-index: 2;
     }
 
     & > .controls {
-      z-index: 3;
-
       padding-left: @gutter;
       padding-right: @gutter;
 
       > .tabs {
         // Remove gutter for tabs
         margin-left: -1 * @gutter;
         margin-right: -1 * @gutter;
+        height: 2.5em;
+      }
+
+      .tabs:first-child:not(:last-child) {
+        margin-bottom: .5em;
       }
     }
   }
@@ -162,19 +160,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
@@ -245,15 +233,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 {
@@ -266,13 +245,8 @@ html.no-js .controls > .tabs {
     background-image: url('../img/icinga-logo-compact.svg');
   }
 
-  #main {
-    left: 3em;
-  }
-
   #sidebar {
-    top: 2.25em;
-    width: 3em;
+    width: 4em;
   }
 
   #open-sidebar {