From c94cd40b923999f39d6b35735f02e54762f05f86 Mon Sep 17 00:00:00 2001 From: Johannes Meyer <johannes.meyer@netways.de> Date: Mon, 31 Mar 2014 10:39:01 +0200 Subject: [PATCH] Center timeframe elements vertically refs #4190 --- .../application/views/scripts/timeline/index.phtml | 14 ++++++++++---- public/css/icinga/monitoring-colors.less | 12 ++++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/modules/monitoring/application/views/scripts/timeline/index.phtml b/modules/monitoring/application/views/scripts/timeline/index.phtml index a63a0cfe7..c5e93a590 100644 --- a/modules/monitoring/application/views/scripts/timeline/index.phtml +++ b/modules/monitoring/application/views/scripts/timeline/index.phtml @@ -33,7 +33,6 @@ $firstRow = true; <?= $timeInfo[0]->end->format($intervalFormat); ?> </a> </span> - <div class="circles"> <?php foreach ($groupInfo as $groupName => $labelAndColor): ?> <?php if (array_key_exists($groupName, $timeInfo[1])): ?> <?php @@ -41,14 +40,21 @@ $circleWidth = $timeline->calculateCircleWidth($timeInfo[1][$groupName], 2); $extrapolatedCircleWidth = $timeline->getExtrapolatedCircleWidth($timeInfo[1][$groupName], 2); ?> <?php if ($firstRow && $extrapolatedCircleWidth !== $circleWidth): ?> + <div class="circle-box" style="width: <?= $extrapolatedCircleWidth; ?>;"> <div class="outer-circle extrapolated" style="<?= sprintf( - 'width: %3$s; height: %3$s; border-color: %2$s; background-color: %1$s;', + 'width: %4$s; height: %4$s; border-color: %3$s; background-color: %1$s; margin-top: -%2$s;', Color::changeBrightness($timeInfo[1][$groupName]->getColor(), 0.7), + ((float) substr($extrapolatedCircleWidth, 0, -2) / 2) . 'em', $timeInfo[1][$groupName]->getColor(), $extrapolatedCircleWidth ); ?>"> <?php else: ?> - <div class="outer-circle" style="<?= sprintf('width: %1$s; height: %1$s;', $circleWidth); ?>"> + <div class="circle-box" style="width: <?= $circleWidth; ?>;"> + <div class="outer-circle" style="<?= sprintf( + 'width: %2$s; height: %2$s; margin-top: -%1$s;', + ((float) substr($circleWidth, 0, -2) / 2) . 'em', + $circleWidth + ); ?>"> <?php endif ?> <a class="inner-circle" style="<?= sprintf( 'width: %3$s; height: %3$s; background-color: %2$s; margin-top: -%1$s; margin-left: -%1$s;', @@ -64,9 +70,9 @@ $extrapolatedCircleWidth = $timeline->getExtrapolatedCircleWidth($timeInfo[1][$g ) ); ?>" title="<?= $timeInfo[1][$groupName]->getValue(); ?> <?= $labelAndColor['label']; ?>"></a> </div> + </div> <?php endif ?> <?php endforeach ?> - </div> </div> <?php $firstRow = false; ?> <?php endforeach ?> diff --git a/public/css/icinga/monitoring-colors.less b/public/css/icinga/monitoring-colors.less index 2243b3e6c..a4c8c9e6a 100644 --- a/public/css/icinga/monitoring-colors.less +++ b/public/css/icinga/monitoring-colors.less @@ -687,15 +687,19 @@ div.timeline { } } - div.circles { + div.circle-box { + // width: inline-style; + height: 100%; + margin-right: 0.5em; + position: relative; float: left; div.outer-circle { // width: inline-style; // height: inline-style; - margin: 0.5em; - position: relative; - float: left; + position: absolute; + top: 50%; + // margin-top: inline-style; &.extrapolated { border-width: 2px;