Rename error layout for guests and support theming

refs #10705

application/controllers/ErrorController.php

@@ -36,7 +36,7 @@ class ErrorController extends ActionController
         Logger::error('Stacktrace: %s', $exception->getTraceAsString());
 
         if (! ($isAuthenticated = $this->Auth()->isAuthenticated())) {
-            $this->innerLayout = 'error';
+            $this->innerLayout = 'guest-error';
         }
 
         switch ($error->type) {
@@ -89,6 +89,7 @@ class ErrorController extends ActionController
                 if ($this->getInvokeArg('displayExceptions')) {
                     $this->view->stackTrace = $exception->getTraceAsString();
                 }
+
                 break;
         }
 

application/layouts/scripts/error.phtml

@@ -1,8 +0,0 @@
-<div class="logo">
- <div class="image">
-  <img aria-hidden="true" src="<?= $this->baseUrl('img/logo_icinga_big.png'); ?>" alt="<?= $this->translate('The Icinga logo'); ?>" >
- </div>
-</div>
-<div class="below-logo">
-  <?= $this->render('inline.phtml') ?>
-</div>

application/layouts/scripts/guest-error.phtml

@@ -0,0 +1,10 @@
+<div id="guest-error">
+    <div class="centered-ghost">
+        <div class="centered-content">
+            <div id="icinga-logo" aria-hidden="true"></div>
+            <div id="guest-error-message">
+                <?= $this->render('inline.phtml') ?>
+            </div>
+        </div>
+    </div>
+</div>

application/views/scripts/error/error.phtml

@@ -1,12 +1,12 @@
-<?php if (! $this->compact && !$hideControls): ?>
+<?php if (! $this->compact && ! $hideControls): ?>
 <div class="controls">
-    <?= $tabs->showOnlyCloseButton(); ?>
+    <?= $tabs->showOnlyCloseButton() ?>
 </div>
 <?php endif ?>
 <div class="content">
-    <p><strong><?= nl2br($this->escape($message)); ?></strong></p>
+    <p class="error-message"><?= nl2br($this->escape($message)) ?></p>
     <?php if (isset($stackTrace)): ?>
         <hr />
         <pre><?= $this->escape($stackTrace) ?></pre>
     <?php endif ?>
-</div>
+</div>

public/css/icinga/layout.less

@@ -1,5 +1,20 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
+#guest-error {
+  background-color: @icinga-blue;
+  height: 100%;
+}
+
+#guest-error #icinga-logo {
+  .fadein();
+}
+
+#guest-error-message {
+  .fadein();
+  color: @body-bg-color;
+  font-size: 2em;
+}
+
 #footer {
   position: fixed;
   left: 0;
@@ -42,6 +57,16 @@
   height: 100%;
 }
 
+#icinga-logo {
+  background-image: url('../img/logo_icinga_big.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain; // Does not work in IE < 10
+  height: 177px;
+  margin-bottom: 2em;
+  width: 100%;
+}
+
 #sidebar {
   background-color: @gray-lighter;
 }

public/css/icinga/main.less

@@ -7,6 +7,10 @@
   color: @icinga-blue;
 }
 
+.error-message {
+  font-weight: @font-weight-bold;
+}
+
 .large-icon {
   font-size: 200%;
 }