From fdcad4928ef62c5569ef7b746c8862d1f0b93eb3 Mon Sep 17 00:00:00 2001
From: Marius Hein <marius.hein@netways.de>
Date: Thu, 12 Feb 2015 15:06:37 +0100
Subject: [PATCH] Tinystatesummary: Adjust styles for summaries and headers

refs #7976
---
 .../list/components/hostssummary.phtml        |  6 +--
 .../list/components/servicesummary.phtml      | 10 ++--
 .../partials/host/servicesummary.phtml        | 10 ++--
 modules/monitoring/public/css/module.less     | 14 +++---
 public/css/icinga/defaults.less               | 48 +++++++++++--------
 5 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/modules/monitoring/application/views/scripts/list/components/hostssummary.phtml b/modules/monitoring/application/views/scripts/list/components/hostssummary.phtml
index 2e19ff352..64bd63165 100644
--- a/modules/monitoring/application/views/scripts/list/components/hostssummary.phtml
+++ b/modules/monitoring/application/views/scripts/list/components/hostssummary.phtml
@@ -4,9 +4,7 @@ use Icinga\Web\Url;
 
 $selfUrl = 'monitoring/list/hosts';
 $currentUrl = Url::fromRequest()->getRelativeUrl();
-
-?>
-<h1 class="tinystatesummary" <?= $this->compact ? ' data-base-target="col1"' : '' ?>>
+?><div class="tinystatesummary" <?= $this->compact ? ' data-base-target="col1"' : '' ?>>
     <?= $this->qlink(sprintf($this->translate('%s hosts:'), $this->stats->hosts_total), $selfUrl); ?>
   <span class="badges">
     <?php if($this->stats->hosts_up): ?>
@@ -81,4 +79,4 @@ $currentUrl = Url::fromRequest()->getRelativeUrl();
     </span>
     <?php endif; ?>
   </span>
-</h1>
+</div>
diff --git a/modules/monitoring/application/views/scripts/list/components/servicesummary.phtml b/modules/monitoring/application/views/scripts/list/components/servicesummary.phtml
index c870b09b0..11d7b5d07 100644
--- a/modules/monitoring/application/views/scripts/list/components/servicesummary.phtml
+++ b/modules/monitoring/application/views/scripts/list/components/servicesummary.phtml
@@ -1,10 +1,10 @@
 <?php
 
 use Icinga\Web\Url;
+
 $selfUrl = 'monitoring/list/services';
 $currentUrl = Url::fromRequest()->getRelativeUrl();
-
-?><h1 class="tinystatesummary" <?= $this->compact ? ' data-base-target="col1"' : '' ?>>
+?><div class="tinystatesummary" <?= $this->compact ? ' data-base-target="col1"' : '' ?>>
 <?= $this->qlink(sprintf($this->translate('%s services:'), $this->stats->services_total), $selfUrl) ?>
 <span class="badges">
 <?php if ($this->stats->services_ok): ?>
@@ -15,9 +15,7 @@ $currentUrl = Url::fromRequest()->getRelativeUrl();
     array('title' => sprintf($this->translate('Services with state %s'), $this->translate('OK')))
 )  ?></span>
 <?php endif ?>
-
 <?php
-
 foreach (array(2 => 'critical', 3 => 'unknown', 1 => 'warning') as $stateId => $state) {
     $pre = 'services_' . $state;
     if ($this->stats->$pre) {
@@ -70,7 +68,6 @@ foreach (array(2 => 'critical', 3 => 'unknown', 1 => 'warning') as $stateId => $
         echo "</span>\n";
     }
 }
-
 ?>
 <?php if ($this->stats->services_pending): ?>
  <span class="state pending<?= $currentUrl === Url::fromPath($selfUrl, array('service_state' => 99))->getRelativeUrl() ? ' active' : '' ?>"><?= $this->qlink(
@@ -81,5 +78,4 @@ foreach (array(2 => 'critical', 3 => 'unknown', 1 => 'warning') as $stateId => $
 )  ?></span>
 <?php endif ?>
 </span>
-</h1>
-
+</div>
diff --git a/modules/monitoring/application/views/scripts/partials/host/servicesummary.phtml b/modules/monitoring/application/views/scripts/partials/host/servicesummary.phtml
index 641dd026a..d45415c72 100644
--- a/modules/monitoring/application/views/scripts/partials/host/servicesummary.phtml
+++ b/modules/monitoring/application/views/scripts/partials/host/servicesummary.phtml
@@ -1,11 +1,10 @@
 <?php
 
 use Icinga\Web\Url;
+
 $selfUrl = Url::fromPath('monitoring/show/services', array('host' => $this->object->host_name));
 $currentUrl = Url::fromRequest()->without('limit')->getRelativeUrl();
-
-?>
-<h1 class="tinystatesummary" <?= $this->compact ? ' data-base-target="col1"' : '' ?>>
+?><div class="tinystatesummary" <?= $this->compact ? ' data-base-target="col1"' : '' ?>>
 <?php if ($object->stats->services_total > 0): ?>
 <?= $this->qlink(sprintf($this->translatePlural('%d configured service:', '%d configured services:', $object->stats->services_total), $object->stats->services_total), $selfUrl) ?>
 <?php else: ?>
@@ -21,7 +20,6 @@ $currentUrl = Url::fromRequest()->without('limit')->getRelativeUrl();
 )  ?></span>
 <?php endif ?>
 <?php
-
 foreach (array(2 => 'critical', 3 => 'unknown', 1 => 'warning') as $stateId => $state) {
     $pre = 'services_' . $state;
     if ($object->stats->$pre) {
@@ -74,7 +72,6 @@ foreach (array(2 => 'critical', 3 => 'unknown', 1 => 'warning') as $stateId => $
         echo "</span>\n";
     }
 }
-
 ?>
 <?php if ($object->stats->services_pending): ?>
  <span class="state pending<?= $currentUrl === $selfUrl->with('service_state', 99)->getRelativeUrl() ? ' active' : '' ?>"><?= $this->qlink(
@@ -85,5 +82,4 @@ foreach (array(2 => 'critical', 3 => 'unknown', 1 => 'warning') as $stateId => $
 )  ?></span>
 <?php endif ?>
 </span>
-</h1>
-
+</div>
diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index b0793ee8d..387df892b 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -91,19 +91,19 @@ div.contacts div.notification-periods {
   margin-top: 0.5em;
 }
 
-h1.tinystatesummary .badges {
+div.tinystatesummary {
+  .page-header();
+  font-size: 1em;
+  .badges {
     display: inline-block;
     margin-bottom: 4px;
     margin-left: 1em;
-}
-
-h1.tinystatesummary .state > a {
+  }
+  .state > a {
     color: white;
     font-size: 0.8em;
     padding: 2px 5px;
-}
-
-h1.tinystatesummary .state.handled a {
+  }
 }
 
 /* State badges */
diff --git a/public/css/icinga/defaults.less b/public/css/icinga/defaults.less
index d3c718db2..3dc277300 100644
--- a/public/css/icinga/defaults.less
+++ b/public/css/icinga/defaults.less
@@ -24,7 +24,20 @@
 @colorPending: #77aaff;
 @colorInvalid: #999;
 
+/* Mixins */
 
+.page-header(@borderSize: 2px; @fontSize: 2em; @textColor: @colorTextDarkDefault) {
+  font-size: @fontSize;
+  color: @textColor;
+  border-bottom: @borderSize solid @colorPetrol;
+  a {
+    text-decoration: none;
+    color: inherit;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
 
 /*** Base rules ***/
 * {
@@ -76,9 +89,7 @@ a:hover {
 
 /* W3C Recommendation <http://www.w3.org/TR/CSS21/sample.html> (except h4) */
 h1 {
-    font-size:    2em;
-    color: @colorTextDefault;
-    border-bottom: 2px solid @colorPetrol;
+    .page-header();
 }
 
 h2 {
@@ -87,19 +98,16 @@ h2 {
 }
 
 h3 {
-    font-size: 1.17em;
-    color: @colorTextDefault;
-    border-bottom: 1px solid @colorPetrol;
+  .page-header(1px, 1.17em);
 }
 
 h4 {
-    font-size:    1em;
-    color: @colorPetrol;
+  font-size:    1em;
+  color: @colorPetrol;
 }
 
 h5 {
-    font-size:  .83em;
-    border-bottom: 1px solid @colorPetrol;
+  .page-header(1px, .83em);
 }
 
 h6 {
@@ -107,17 +115,19 @@ h6 {
     color: @colorPetrol;
 }
 
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
-  text-decoration: none;
-  color: inherit;
-}
+h1, h2, h3, h4, h5, h6 {
+  a {
+    text-decoration: none;
+    color: inherit;
 
-h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
-  text-decoration: underline;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 button {
-    font-family: inherit;
+  font-family: inherit;
 }
 
 #fontsize-calc {
@@ -128,6 +138,4 @@ button {
   position: absolute;
   top: -2em;
 }
-/*** END of Base rules */
-
-
+/*** END of Base rules */
\ No newline at end of file