Merge pull request #59 from Icinga/fix/tlv-header

Rework TLV Header Styling
Icinga · Jul 15, 2024 · c43d1ee · c43d1ee
2 parents a9a0bba + ad317f6
commit c43d1ee
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 22 deletions.
diff --git a/application/views/scripts/index/index.phtml b/application/views/scripts/index/index.phtml
@@ -27,7 +27,7 @@ if (! $this->compact): ?>
             $url = $this->url('toplevelview/show', array('name' => $name));
             ?>
             <div class="tlv-overview-tile">
-                <div class="tlv-title"><?= $this->qlink(Str::limit($view->getMeta('name')), $url) ?></div>
+                <div class="tlv-title"><?= $this->qlink($view->getMeta('name'), $url) ?></div>
                 <div class="tlv-name"><?= $name ?></div>
                 <?php if ($view->hasBeenLoadedFromSession()): ?>
                     <div class="unsaved"><?= $this->translate('Unsaved changes!') ?></div>

diff --git a/application/views/scripts/show/index.phtml b/application/views/scripts/show/index.phtml
@@ -20,9 +20,9 @@ if (! $this->compact):
         </div>
     <?php endif; ?>
     <div class="tlv-header">
-        <?= $this->badges($tree->getStatus(), false, true) ?>
-        <h1><?= Str::limit($view->getMeta('name'), 40) ?></h1>
+        <h1><?= $view->getMeta('name') ?></h1>
         <div class="last-refresh"><?= $this->timeAgo($tree->getFetchTime()) ?></div>
+        <?= $this->badges($tree->getStatus(), false, true) ?>
     </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
@@ -15,9 +15,9 @@ if (! $this->compact):
 <?php endif ?>
 <div class="content tlv-view-tree">
     <div class="tlv-header">
-        <?= $this->badges($tree->getStatus(), false, true) ?>
-        <h1><?= Str::limit($view->getMeta('name'), 40) ?></h1>
+        <h1><?= $view->getMeta('name') ?></h1>
         <div class="last-refresh"><?= $this->timeAgo($tree->getFetchTime()) ?></div>
+        <?= $this->badges($tree->getStatus(), false, true) ?>
     </div>
     <?= $this->breadcrumb($node->getBreadCrumb(), $view->getName()) ?>
     <?= $this->tree($node) ?>

diff --git a/public/css/module.less b/public/css/module.less
@@ -14,6 +14,7 @@
   .tlv-title {
     font-weight: bold;
     font-size: 1.3em;
+    .text-ellipsis();
   }
 
   .tlv-name {
@@ -155,16 +156,13 @@
   padding-left: 0 !important;
 
   .tlv-header {
-    margin: 0 12px;
-    z-index: 99;
+    margin: 0.5em;
   }
 }
 
 /** BEGIN of header **/
 .tlv-header {
-  position: relative;
-  line-height: 2em;
-  height: 2em;
+  display: inline-block;
 
   h1 {
     display: inline-block;
@@ -174,8 +172,6 @@
 
   .last-refresh {
     display: inline-block;
-    font-weight: bold;
-    margin: 0 0.5em;
   }
 
   .action-links {
@@ -184,11 +180,6 @@
   }
 
   .badges {
-    display: inline-block;
-    position: absolute;
-    right: 0;
-    font-size: 1.2em;
-
     .badge {
       margin-left: 0.2em;
     }
@@ -198,14 +189,9 @@
 
 /** BEGIN of tiles **/
 .tlv-view-tiles {
-  position: relative;
-  clear: both;
   display: flex;
   flex-wrap: wrap;
-  align-content: stretch;
   height: 100%;
-  margin-top: -2em;
-  padding-top: 2em;
 
   .tlv-tiles {
     display: flex;