From 375e62272cfcd79e6b43ef1ce7064998fbbff890 Mon Sep 17 00:00:00 2001
From: Eric Lippmann <eric.lippmann@icinga.com>
Date: Fri, 17 Nov 2017 23:42:04 +0100
Subject: [PATCH] Move header logo to sidebar and increase its height

---
 application/layouts/scripts/body.phtml  | 24 ++++++++++++------------
 public/css/icinga/layout-structure.less | 23 +++++++++++------------
 public/css/icinga/layout.less           | 17 +++++++++++------
 public/js/icinga/ui.js                  |  2 +-
 4 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
index cc561f2b4..2d1bdb149 100644
--- a/application/layouts/scripts/body.phtml
+++ b/application/layouts/scripts/body.phtml
@@ -23,21 +23,21 @@ $inlineLayoutScript = $this->layout()->inlineLayout . '.phtml';
   <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">
+  <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>
 <?php endif ?>
diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 319624cc3..0a784ae98 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -6,34 +6,33 @@ html {
 
 #layout {
   height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
   width: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
 }
 
 #header {
-  height: 3em;
-  left: 0;
-  position: fixed;
-  top: 0;
   width: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
 }
 
 #sidebar {
+  width: 12em;
+  position: fixed;
   bottom: 0;
   left: 0;
-  position: fixed;
-  top: 2.25em;
-  width: 12em;
+  top: 0;
 }
 
 #main {
-  bottom: 0;
   left: 12em;
   position: fixed;
+  bottom: 0;
   right: 0;
-  top: 2.25em;
+  top: 0;
 }
 
 .iframe {
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index a8c7f4f75..61fbe07a0 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -37,18 +37,19 @@
 }
 
 #header-logo-container {
-  height: 2.667em;
-  margin: .1667em 0 .1667em .7em;
-  width: 100px;
+  background-color: @icinga-blue;
+  height: 3em;
+  padding: 0.5em 0.125em;
 }
 
 #header-logo {
   background-image: url('../img/icinga-logo.svg');
-  background-position: left center;
+  background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
   display: block;
   height: 100%;
+  width: 100%;
 }
 
 #icinga-logo {
@@ -149,9 +150,13 @@
   background-color: @body-bg-color;
 
   > .tabs {
-    height: 2.6em;
-    margin-top: -2.6em;
+    background-color: @icinga-blue;
+    height: 3em;
     overflow: hidden;
+
+    > li {
+      margin-top: 0.4em;
+    }
   }
 
   > .tabs-spacer {
diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index 4135f1516..ab42e4741 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -576,7 +576,7 @@
 
             if (typeof $container === 'undefined') {
                 var $header = $('#header');
-                var $headerLogo = $('#header-logo');
+                var $headerLogo = $('#header-logo-container');
                 var $main = $('#main');
                 var $search = $('#search');
                 var $sidebar = $('#sidebar');