CSS: compat.less and monitoring detail

refs #5543

application/controllers/UsergroupbackendController.php

@@ -150,7 +150,7 @@ class UsergroupbackendController extends Controller
         $tabs = $this->getTabs();
         $tabs->add('userbackend', array(
             'title' => $this->translate('Configure how users authenticate with and log into Icinga Web 2'),
-            'label' => $this->translate('Authentication'),
+            'label' => $this->translate('Users'),
             'url'   => 'config/userbackend'
         ));
         $tabs->add('usergroupbackend', array(

library/Icinga/Web/StyleSheet.php

@@ -39,7 +39,8 @@ class StyleSheet
         'css/icinga/controls.less',
         'css/icinga/dev.less',
 //        'css/icinga/logo.less',
-        'css/icinga/spinner.less'
+        'css/icinga/spinner.less',
+        'css/icinga/compat.less',
     );
 
     public static function compileForPdf()

modules/monitoring/application/views/scripts/show/components/acknowledgement.phtml

@@ -40,7 +40,7 @@ if ($object->acknowledged): ?>
                     <?= nl2br($this->createTicketLinks($acknowledgement->getComment()), false) ?>
                 </dd>
             <?php if ($acknowledgement->expires()): ?>
-                <dd>
+                <dd class="text-small">
                     <?= sprintf(
                         $this->translate('Expires %s'),
                         $this->timeUntil($acknowledgement->getExpirationTime())

modules/monitoring/application/views/scripts/show/components/downtime.phtml

@@ -47,7 +47,7 @@ if (empty($object->comments) && ! $addLink) {
     <?php if (empty($object->downtimes)):
         echo $addLink;
     else: ?>
-        <ul class="inline-comments">
+        <dl class="feed-list">
         <?php foreach ($object->downtimes as $downtime):
             if ((bool) $downtime->is_in_effect) {
                 $state = sprintf(
@@ -75,6 +75,7 @@ if (empty($object->comments) && ! $addLink) {
             // Form is unset if the current user lacks the respective permission
             if (isset($delDowntimeForm)) {
                 $deleteButton = clone($delDowntimeForm);
+                $deleteButton->setAttrib('class', $deleteButton->getAttrib('class') . ' pull-right');
                 $deleteButton->populate(
                     array(
                         'downtime_id'           => $downtime->id,
@@ -85,20 +86,19 @@ if (empty($object->comments) && ! $addLink) {
                 $deleteButton = '';
             }
             ?>
-            <li class="comment-item">
+            <dt class="clearfix feed-author">
-                <h3>
+                <span class="author"><?= $this->escape($downtime->author_name) ?></span>
-                    <span class="author"><?= $this->escape($downtime->author_name) ?></span>
+                <?= $this->timeAgo($downtime->entry_time) ?>
-                    <?= $this->timeAgo($downtime->entry_time) ?>
+                <?= $deleteButton ?>
-                    <?= $deleteButton ?>
+             </dt>
-                </h3>
+             <dd class="comment-text">
-                <p>
-                    <span class="sr-only"><?= $this->translate('Downtime') ?></span>
-                    <?= $state ?> -
                     <?= str_replace(array('\r\n', '\n'), '<br>', $this->createTicketLinks($downtime->comment)) ?>
-                </p>
+            </dd>
-             </li>
+            <dd class="text-small">
+                <?= $state ?>
+            </dd>
         <?php endforeach ?>
-        </ul>
+        </dl>
     <?php endif ?>
     </td>
 </tr>

modules/monitoring/application/views/scripts/show/components/flags.phtml

@@ -1,3 +1,3 @@
-<tr class="newsection">
+<div data-base-target="_self">
-    <td colspan="2" data-base-target="_self"><?= $toggleFeaturesForm ?></td>
+    <?= $toggleFeaturesForm ?>
-</tr>
+</div>

modules/monitoring/application/views/scripts/show/components/perfdata.phtml

@@ -1,4 +1,6 @@
 <?php if ($object->perfdata): ?>
 <h2><?= $this->translate('Performance data') ?></h2>
-<?= $this->perfdata($object->perfdata) ?>
+<div class="performance-data">
+    <?= $this->perfdata($object->perfdata) ?>
+</div>
 <?php endif ?>

modules/monitoring/public/css/module.less

@@ -404,6 +404,13 @@ form.object-features .control-label {
     }
 }
 
+.performance-data ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  padding-left: @vertical-padding;
+}
+
 
 //p.pluginoutput {
 //  width: 100%;

public/css/icinga/compat.less

@@ -0,0 +1,35 @@
+@colorMainLayout: @icinga-blue;
+@colorMainBackground: @body-bg-color;
+@colorMainForeground: @text-color;
+@colorMainLink: @text-color;
+@colorSecondary: @gray-lightest;
+@colorGray: @gray-lightest;
+@colorLinkDefault: @text-color;
+@colorTextDefault: @text-color;
+@colorTextDarkDefault: @text-color;
+@colorOk: @color-ok;
+@colorWarning: #ffaa44;
+@colorWarningHandled: #ffcc66;
+@colorCritical: #ff5566;
+@colorCriticalHandled: #ff99aa;
+@colorUnknown: #aa44ff;
+@colorUnknownHandled: #cc77ff;
+@colorUnreachable: #aa44ff;
+@colorUnreachableHandled: #cc77ff;
+@colorPending: #77aaff;
+@colorInvalid: #999;
+@colorFormNotificationInfo: #77aaff;
+@colorFormNotificationWarning: #ffaa44;
+@colorFormNotificationError: #ff5566;
+@colorPetrol: @icinga-blue;
+
+table.action {
+  .action-table();
+  a {
+    font-weight: normal;
+  }
+}
+
+table.avp {
+  .name-value-table()
+}

public/css/icinga/main.less

@@ -103,23 +103,23 @@ dl.feed-list {
 
   dt {
     border-bottom: 1px solid @gray-lighter;
-    
+    margin-top: @vertical-padding;
+
     .icon-cancel {
       display: none;
     }
+
+    &:hover {
+      background-color: @gray-lightest;
+      .icon-cancel {
+        display: block;
+      }
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
   }
-    dt:hover { 
-        background: #F9F9F9;
-        position: relative;
-
-        form { 
-            display: inline;
-        } 
-
-    	.icon-cancel {
-      	display: inline;
-    	}
-    } 
 }
 
 dl.name-value-list {