Improve table layout

Add alternating colors to table rows, to improve visibillity of the table.

refs #9361
This commit is contained in:
Matthias Jentsch 2015-06-17 17:28:28 +02:00
parent 42e712402c
commit 5b517a2cb0
7 changed files with 25 additions and 8 deletions

View File

@ -5,7 +5,7 @@
<a href="<?= $this->href('/config/createresource'); ?>"> <a href="<?= $this->href('/config/createresource'); ?>">
<?= $this->icon('plus'); ?> <?= $this->translate('Create A New Resource'); ?> <?= $this->icon('plus'); ?> <?= $this->translate('Create A New Resource'); ?>
</a> </a>
<table class="action" id="resource-edit-table"> <table class="action alternating" id="resource-edit-table">
<thead> <thead>
<th><?= $this->translate('Resource'); ?></th> <th><?= $this->translate('Resource'); ?></th>
<th style="width: 5em"><?= $this->translate('Remove'); ?></th> <th style="width: 5em"><?= $this->translate('Remove'); ?></th>

View File

@ -1,5 +1,5 @@
<form id="<?= $form->getId(); ?>" name="<?= $form->getName(); ?>" enctype="<?= $form->getEncType(); ?>" method="<?= $form->getMethod(); ?>" action="<?= $form->getAction(); ?>"> <form id="<?= $form->getId(); ?>" name="<?= $form->getName(); ?>" enctype="<?= $form->getEncType(); ?>" method="<?= $form->getMethod(); ?>" action="<?= $form->getAction(); ?>">
<table class="action"> <table class="action alternating">
<thead> <thead>
<th>Backend</th> <th>Backend</th>
<th style="width: 5em"><?= $this->translate('Remove'); ?></th> <th style="width: 5em"><?= $this->translate('Remove'); ?></th>

View File

@ -27,7 +27,7 @@ if (! isset($backend)) {
} }
if (count($groups) > 0): ?> if (count($groups) > 0): ?>
<table data-base-target="_next" class="action group-list"> <table data-base-target="_next" class="action group-list alternating">
<thead> <thead>
<tr> <tr>
<th class="group-name"><?= $this->translate('Group'); ?></th> <th class="group-name"><?= $this->translate('Group'); ?></th>

View File

@ -6,7 +6,7 @@
<?php /** @var \Icinga\Application\Config $roles */ if ($roles->isEmpty()): ?> <?php /** @var \Icinga\Application\Config $roles */ if ($roles->isEmpty()): ?>
<?= $this->translate('No roles found.') ?> <?= $this->translate('No roles found.') ?>
<?php else: ?> <?php else: ?>
<table class="avp action" data-base-target="_next"> <table class="avp action alternating" data-base-target="_next">
<thead> <thead>
<tr> <tr>
<th><?= $this->translate('Name') ?></th> <th><?= $this->translate('Name') ?></th>

View File

@ -27,7 +27,7 @@ if (! isset($backend)) {
} }
if (count($users) > 0): ?> if (count($users) > 0): ?>
<table data-base-target="_next" class="action user-list"> <table data-base-target="_next" class="action user-list alternating">
<thead> <thead>
<tr> <tr>
<th class="user-name"><?= $this->translate('Username'); ?></th> <th class="user-name"><?= $this->translate('Username'); ?></th>

View File

@ -11,7 +11,7 @@
) )
); ?> ); ?>
<?php if (count($backendNames) > 0): ?> <?php if (count($backendNames) > 0): ?>
<table class="action usergroupbackend-list"> <table class="action usergroupbackend-list alternating">
<thead> <thead>
<tr> <tr>
<th class="backend-name"><?= $this->translate('Backend'); ?></th> <th class="backend-name"><?= $this->translate('Backend'); ?></th>

View File

@ -202,14 +202,31 @@ tr[href].active {
background-color: #eee; background-color: #eee;
color: black; color: black;
} }
table.alternating {
tr[href].active:nth-child(even), tr[href].active:nth-child(odd) {
background-color: #E5E5E5;
color: black;
}
tr[href]:nth-child(even) {
background-color: #FDFDFD;
}
tr[href]:nth-child(odd) {
background-color: #f5f5f5;
}
tr[href]:hover {
color: black;
background-color: #DDDDDD;
}
}
/* End of table behaviour */ /* End of table behaviour */
/* HOVER colors */ /* HOVER colors */
tr[href]:hover { tr[href]:hover {
color: black; color: black;
background-color: #eee; background-color: #DDDDDD;
} }
/* END of HOVER colors */ /* END of HOVER colors */