Merge pull request #28 from Icinga/feature/design-update

style: Update handled colors with material design
Icinga · Jan 25, 2018 · 42d0134 · 42d0134
2 parents da0c9ab + abba159
commit 42d0134
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 21 deletions.
diff --git a/application/views/scripts/show/index.phtml b/application/views/scripts/show/index.phtml
@@ -10,13 +10,10 @@ if (! $this->compact):
 <?php endif ?>
 <div class="content tlv-content">
     <div class="tlv-header">
-        <div class="last-refresh">
-            <?= $this->translate('Last update') ?>
-            <?= $this->timeAgo($tree->getFetchTime()) ?>
-        </div>
         <?= $this->badges($tree->getStatus(), false, true) ?>
         <h1><?= $view->getMeta('name') ?></h1>
         <?= $this->partial('show/actions.phtml', $this) ?>
+        <div class="last-refresh"><?= $this->timeAgo($tree->getFetchTime()) ?></div>
     </div>
     <div class="tlv-view-tiles">
         <?php foreach ($tree->getChildren() as $topTile): ?>

diff --git a/application/views/scripts/show/tree.phtml b/application/views/scripts/show/tree.phtml
@@ -12,13 +12,10 @@ if (! $this->compact):
 <?php endif ?>
 <div class="content tlv-view-tree">
     <div class="tlv-header">
-        <div class="last-refresh">
-            <?= $this->translate('Last update') ?>
-            <?= $this->timeAgo($tree->getFetchTime()) ?>
-        </div>
         <?= $this->badges($tree->getStatus(), false, true) ?>
         <h1><?= $view->getMeta('name') ?></h1>
         <?= $this->partial('show/actions.phtml', $this) ?>
+        <div class="last-refresh"><?= $this->timeAgo($tree->getFetchTime()) ?></div>
     </div>
     <?= $this->breadcrumb($node->getBreadCrumb(), $view->getName()) ?>
     <?= $this->tree($node) ?>

diff --git a/public/css/module.less b/public/css/module.less
@@ -44,17 +44,18 @@
 }
 
 // see Icinga Web 2: public/css/icinga/base.less
+//@import '../../vendor/icingaweb2/public/css/icinga/base.less';
 @tlv-color-critical-bg: @color-critical;
 @tlv-color-critical-fg: white;
-@tlv-color-critical-handled-bg: @color-critical-handled;
+@tlv-color-critical-handled-bg: #FFCCBC; // Material Design Deep Orange 100
 @tlv-color-critical-handled-fg: #6d4148;
 @tlv-color-warning-bg: @color-warning;
 @tlv-color-warning-fg: #6d572b;
-@tlv-color-warning-handled-bg: @color-warning-handled;
+@tlv-color-warning-handled-bg: #FFF9C4; // Material Design Yellow 100
 @tlv-color-warning-handled-fg: #6d572b;
 @tlv-color-unknown-bg: @color-unknown;
 @tlv-color-unknown-fg: white;
-@tlv-color-unknown-handled-bg: @color-unknown-handled;
+@tlv-color-unknown-handled-bg: #E1BEE7; // Material Design Purple 100
 @tlv-color-unknown-handled-fg: #57326d;
 @tlv-color-ok-bg: @color-ok;
 @tlv-color-ok-fg: white;
@@ -165,26 +166,30 @@
 .tlv-header {
   position: relative;
 
-  height: 4em;
+  line-height: 2em;
+  height: 2em;
 
   h1 {
+    display: inline-block;
     border: none;
-    margin: 0;
+    margin: 0 0.5em 0 0;
   }
 
   .last-refresh {
-    position: absolute;
-
-    right: 0;
-    top: 0;
-
+    display: inline-block;
     font-weight: bold;
+    margin: 0 0.5em;
+  }
+
+  .action-links {
+    display: inline-block;
+    margin: 0 0.5em;
   }
 
   .badges {
+    display: inline-block;
     position: absolute;
     right: 0;
-    top: 1.6em;
 
     font-size: 1.2em;
 
@@ -204,8 +209,8 @@
 
   height: 100%;
 
-  margin-top: -4em;
-  padding-top: 4em;
+  margin-top: -2em;
+  padding-top: 2em;
 
   .tlv-tiles {
     display: flex;