Tinystatesummary: Adjust styles for summaries and headers

refs #7976

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();
-
+?><div class="tinystatesummary" <?= $this->compact ? ' data-base-target="col1"' : '' ?>>
-?>
-<h1 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>

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();
-
+?><div class="tinystatesummary" <?= $this->compact ? ' data-base-target="col1"' : '' ?>>
-?><h1 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>
-

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();
-
+?><div class="tinystatesummary" <?= $this->compact ? ' data-base-target="col1"' : '' ?>>
-?>
-<h1 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>
-

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;
   }
-
+  .state > a {
-h1.tinystatesummary .state > a {
     color: white;
     font-size: 0.8em;
     padding: 2px 5px;
   }
-
-h1.tinystatesummary .state.handled a {
 }
 
 /* State badges */

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;
+    .page-header();
-    color: @colorTextDefault;
-    border-bottom: 2px solid @colorPetrol;
 }
 
 h2 {
@@ -87,9 +98,7 @@ h2 {
 }
 
 h3 {
-    font-size: 1.17em;
+  .page-header(1px, 1.17em);
-    color: @colorTextDefault;
-    border-bottom: 1px solid @colorPetrol;
 }
 
 h4 {
@@ -98,8 +107,7 @@ h4 {
 }
 
 h5 {
-    font-size:  .83em;
+  .page-header(1px, .83em);
-    border-bottom: 1px solid @colorPetrol;
 }
 
 h6 {
@@ -107,14 +115,16 @@ h6 {
     color: @colorPetrol;
 }
 
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+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 {
+    &:hover {
       text-decoration: underline;
     }
+  }
+}
 
 button {
   font-family: inherit;
@@ -129,5 +139,3 @@ button {
   top: -2em;
 }
 /*** END of Base rules */
-
-