Bug 29131: Row striping breaks color coding on item circulation alerts

The CSS we use for table row "striping," which uses 'tbody
tr:nth-child(odd),' is often difficult to work with because it takes a
lot of increased specificity to override the default. Bootstrap
compounds this by adding its own similar CSS.

In order to overcome this I've added '!important' to the CSS embedded in
the item circulation alerts page. I normally would avoid '!important'
but since this CSS is only relevant to this page I think it's
appropriate.

This patch also adds [% FILTER collapse %] around the <style> block and
does some reindenting, so ignore whitespace when using diff to see the
changes clearly.

To test, apply the patch and go to Administration -> Item circulation
alerts.

- Check the "Legend" table. The first cells should be distinct colors:
  red, pink, and green.
- In the "Checkout" table, table cells should be green by default.
  Clicking in one of the cells should turn it red with the text
  "Disabled for all."
- Use the "Select a library" dropdown to pick a library.
- Clicking in any green cell should turn the cell pink and add the text
  "Disabled for XXX" where XXX is the branchcode.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2021-10-05 12:12:34 +00:00 committed by Kyle Hall
parent a1e6819dec
commit 663d9e3c1d

View file

@ -5,41 +5,43 @@
[% INCLUDE 'doc-head-open.inc' %]
<title>Item circulation alerts &rsaquo; Administration &rsaquo; Koha</title>
[% INCLUDE 'doc-head-close.inc' %]
<style>
table.grid thead th {
vertical-align: bottom;
}
[% FILTER collapse %]
<style>
table.grid thead th {
vertical-align: bottom;
}
table.grid tbody th {
text-align: right;
}
table.grid tbody th {
text-align: right;
}
table.grid tbody td {
font-size: xx-small;
}
table.grid tbody td {
font-size: xx-small;
}
table.grid tbody td.info {
background: #fff;
}
table.grid tbody td.info {
background-color: #fff !important;
}
table.grid.active tbody td {
width: 10%;
cursor: pointer;
}
table.grid.active tbody td {
width: 10%;
cursor: pointer;
}
table.grid tbody td {
background: #cfc;
color: #111;
}
table.grid tbody td {
background-color: #cfc !important;
color: #111;
}
table.grid td.disabled {
background: #fcc;
}
table.grid td.disabled {
background-color: #fcc !important;
}
table.grid td.default {
background: #f88;
}
</style>
table.grid td.default {
background-color: #f88 !important;
}
</style>
[% END %]
</head>
<body id="admin_item_circulation_alerts" class="admin">