From e3be5dd255ca7147ab309ffd2adfe475831e5660 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@netways.de>
Date: Fri, 28 Mar 2014 17:00:53 +0100
Subject: [PATCH] Restructure timeline layout and styles

refs #4190
---
 .../views/scripts/timeline/index.phtml        | 92 ++++++++-----------
 public/css/icinga/monitoring-colors.less      | 57 ++++++------
 2 files changed, 68 insertions(+), 81 deletions(-)

diff --git a/modules/monitoring/application/views/scripts/timeline/index.phtml b/modules/monitoring/application/views/scripts/timeline/index.phtml
index c5e57007f..a63a0cfe7 100644
--- a/modules/monitoring/application/views/scripts/timeline/index.phtml
+++ b/modules/monitoring/application/views/scripts/timeline/index.phtml
@@ -3,6 +3,7 @@ use Icinga\Util\Color;
 
 $groupInfo = $timeline->getGroupInfo();
 $firstRow = true;
+
 ?>
 <div class="controls">
     <div style="margin: 1em;" class="dontprint">
@@ -18,69 +19,56 @@ $firstRow = true;
     </div>
 </div>
 <div class="content" data-base-target="_next">
-    <table class="timeline">
-        <tbody>
+    <div class="timeline">
 <?php foreach ($timeline as $timeInfo): ?>
-            <tr>
-                <th>
-                    <a href="<?= $this->href(
-                        '/monitoring/list/eventhistory',
-                        array(
-                            'raw_timestamp<' => $timeInfo[0]->start->getTimestamp(),
-                            'raw_timestamp>' => $timeInfo[0]->end->getTimestamp()
-                        )
-                    ); ?>">
-                        <?= $timeInfo[0]->end->format($intervalFormat); ?>
-                    </a>
-                </th>
+        <div class="timeframe">
+            <span>
+                <a href="<?= $this->href(
+                    '/monitoring/list/eventhistory',
+                    array(
+                        'raw_timestamp<' => $timeInfo[0]->start->getTimestamp(),
+                        'raw_timestamp>' => $timeInfo[0]->end->getTimestamp()
+                    )
+                ); ?>">
+                    <?= $timeInfo[0]->end->format($intervalFormat); ?>
+                </a>
+            </span>
+            <div class="circles">
 <?php foreach ($groupInfo as $groupName => $labelAndColor): ?>
-                <td>
-                    <div class="circle-box">
 <?php if (array_key_exists($groupName, $timeInfo[1])): ?>
 <?php
 $circleWidth = $timeline->calculateCircleWidth($timeInfo[1][$groupName], 2);
 $extrapolatedCircleWidth = $timeline->getExtrapolatedCircleWidth($timeInfo[1][$groupName], 2);
 ?>
 <?php if ($firstRow && $extrapolatedCircleWidth !== $circleWidth): ?>
-<?php
-$inlineStyle = sprintf(
-    'width: %4$s; height: %4$s; margin-top: -%2$s; margin-left: -%2$s; border-color: %3$s; background-color: %1$s;',
-    Color::changeBrightness($timeInfo[1][$groupName]->getColor(), 0.7),
-    ((float) substr($extrapolatedCircleWidth, 0, -2) / 2) . 'em',
-    $timeInfo[1][$groupName]->getColor(),
-    $extrapolatedCircleWidth
-);
-?>
-                        <div class="outer-circle extrapolated" style="<?= $inlineStyle; ?>">
+                <div class="outer-circle extrapolated" style="<?= sprintf(
+                    'width: %3$s; height: %3$s; border-color: %2$s; background-color: %1$s;',
+                    Color::changeBrightness($timeInfo[1][$groupName]->getColor(), 0.7),
+                    $timeInfo[1][$groupName]->getColor(),
+                    $extrapolatedCircleWidth
+                ); ?>">
 <?php else: ?>
-                        <div class="outer-circle">
+                <div class="outer-circle" style="<?= sprintf('width: %1$s; height: %1$s;', $circleWidth); ?>">
 <?php endif ?>
-<?php
-$inlineStyle = sprintf(
-    'width: %3$s; height: %3$s; background-color: %2$s; margin-top: -%1$s; margin-left: -%1$s;',
-    ((float) substr($circleWidth, 0, -2) / 2) . 'em',
-    $timeInfo[1][$groupName]->getColor(),
-    $circleWidth
-);
-?>
-                            <a class="inner-circle" style="<?= $inlineStyle; ?>" href="<?= $this->href(
-                                sprintf(
-                                    $timeInfo[1][$groupName]->getDetailUrl(),
-                                    $timeInfo[0]->start->getTimestamp(),
-                                    $timeInfo[0]->end->getTimestamp(),
-                                    $groupName
-                                )
-                            ); ?>" title="<?= $timeInfo[1][$groupName]->getValue(); ?> <?= $labelAndColor['label']; ?>"></a>
-                        </div>
-<?php else: ?>
-                        &nbsp;
+                    <a class="inner-circle" style="<?= sprintf(
+                        'width: %3$s; height: %3$s; background-color: %2$s; margin-top: -%1$s; margin-left: -%1$s;',
+                        ((float) substr($circleWidth, 0, -2) / 2) . 'em',
+                        $timeInfo[1][$groupName]->getColor(),
+                        $circleWidth
+                    ); ?>" href="<?= $this->href(
+                        sprintf(
+                            $timeInfo[1][$groupName]->getDetailUrl(),
+                            $timeInfo[0]->start->getTimestamp(),
+                            $timeInfo[0]->end->getTimestamp(),
+                            $groupName
+                        )
+                    ); ?>" title="<?= $timeInfo[1][$groupName]->getValue(); ?> <?= $labelAndColor['label']; ?>"></a>
+                </div>
 <?php endif ?>
-                    </div>
-                </td>
 <?php endforeach ?>
-            </tr>
-            <?php $firstRow = false; ?>
+            </div>
+        </div>
+        <?php $firstRow = false; ?>
 <?php endforeach ?>
-        </tbody>
-    </table>
+    </div>
 </div>
diff --git a/public/css/icinga/monitoring-colors.less b/public/css/icinga/monitoring-colors.less
index 8f20544cd..2243b3e6c 100644
--- a/public/css/icinga/monitoring-colors.less
+++ b/public/css/icinga/monitoring-colors.less
@@ -660,45 +660,44 @@ div.timeline-legend {
   }
 }
 
-table.timeline {
-  clear: left;
+div.timeline {
+  div.timeframe {
+    height: 7em;
+    margin-bottom: 1em;
+    clear: left;
 
-  th {
-    width: 8em;
-    padding-right: 1.5em;
+    span {
+      width: 8em;
+      margin-top: 2.3em;
+      margin-right: 1.5em;
+      display: block;
+      float: left;
+      text-align: center;
 
-    a {
-      color: black;
-      font-size: 0.8em;
-      text-decoration: none;
-      white-space: nowrap;
+      a {
+        color: black;
+        font-size: 0.8em;
+        font-weight: bold;
+        text-decoration: none;
+        white-space: nowrap;
 
-      &:hover {
-        color: #666;
+        &:hover {
+          color: #666;
+        }
       }
     }
-  }
 
-  td {
-    padding: 0.5em;
-
-    div.circle-box {
-      width: 6em;
-      height: 6em;
-      position: relative;
+    div.circles {
+      float: left;
 
       div.outer-circle {
-        width: 100%;
-        height: 100%;
-        position: absolute;
+        // width: inline-style;
+        // height: inline-style;
+        margin: 0.5em;
+        position: relative;
+        float: left;
 
         &.extrapolated {
-          // width: inline-style;
-          // height: inline-style;
-          top: 48%; // Compensate border
-          left: 48%; // Compensate border
-          // margin-top: inline-style;
-          // margin-left: inline-style;
           border-width: 2px;
           border-style: dotted;
           //border-color: inline-style;