list/servicegrid: Increase joystick size to make it more apparent

Also increases x-axis label length by 30% since we're now showing
hostnames which are usually longer than service descriptions. Also
this makes room for actually being able to increase the joystick size.

refs #2640
This commit is contained in:
Johannes Meyer 2018-05-03 10:34:05 +02:00
parent 589d1bb75c
commit bc398bc8df
3 changed files with 5 additions and 4 deletions

View File

@ -36,7 +36,7 @@ foreach ($pivotData as $serviceDescription => $_) {
) ?></th> ) ?></th>
<?php foreach ($pivotHeader['cols'] as $hostName => $hostAlias): ?> <?php foreach ($pivotHeader['cols'] as $hostName => $hostAlias): ?>
<th class="rotate-45"><div><span><?= $this->qlink( <th class="rotate-45"><div><span><?= $this->qlink(
$this->ellipsis($hostAlias, 18), $this->ellipsis($hostAlias, 24),
Url::fromPath('monitoring/list/services')->addFilter( Url::fromPath('monitoring/list/services')->addFilter(
Filter::matchAll($serviceFilter, Filter::where('host_name', $hostName)) Filter::matchAll($serviceFilter, Filter::where('host_name', $hostName))
), ),

View File

@ -36,7 +36,7 @@ foreach ($pivotData as $hostName => $_) {
) ?></th> ) ?></th>
<?php foreach ($pivotHeader['cols'] as $serviceDescription => $serviceDisplayName): ?> <?php foreach ($pivotHeader['cols'] as $serviceDescription => $serviceDisplayName): ?>
<th class="rotate-45"><div><span><?= $this->qlink( <th class="rotate-45"><div><span><?= $this->qlink(
$this->ellipsis($serviceDisplayName, 18), $this->ellipsis($serviceDisplayName, 24),
Url::fromPath('monitoring/list/services')->addFilter( Url::fromPath('monitoring/list/services')->addFilter(
Filter::matchAll($hostFilter, Filter::where('service_description', $serviceDescription)) Filter::matchAll($hostFilter, Filter::where('service_description', $serviceDescription))
), ),

View File

@ -12,10 +12,10 @@
} }
.rotate-45 { .rotate-45 {
height: 6em; height: 8em;
div { div {
.transform(translate(0.4em, 2.1em) rotate(315deg)); .transform(translate(0.4em, 2.8em) rotate(315deg));
width: 1.5em; width: 1.5em;
} }
} }
@ -30,6 +30,7 @@
.joystick-pagination { .joystick-pagination {
margin: 0 auto; margin: 0 auto;
font-size: 130%;
a { a {
color: @text-color; color: @text-color;