Bug 29131 - Row striping breaks color coding on item circulation alerts
Summary: Row striping breaks color coding on item circulation alerts
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff Client (show other bugs)
Version: master
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2021-09-28 20:57 UTC by Nick Clemens
Modified: 2021-10-26 01:02 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Text to go in the release notes:
Version(s) released in:
21.11.00,21.05.05,20.11.11


Attachments
Bug 29131: Row striping breaks color coding on item circulation alerts (3.29 KB, patch)
2021-10-05 12:34 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29131: Row striping breaks color coding on item circulation alerts (3.33 KB, patch)
2021-10-06 06:08 UTC, David Nind
Details | Diff | Splinter Review
Bug 29131: Row striping breaks color coding on item circulation alerts (3.39 KB, patch)
2021-10-06 11:01 UTC, Nick Clemens
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Nick Clemens 2021-09-28 20:57:39 UTC
To recreate:
Browse to Administration->Item circulation alerts

Note that 'Disabled for all' and 'Enabled' are the same color in the key

Note that half the rows are gray


Seems to be from:
tbody tr:nth-child(odd):not(.dtrg-group):not(.active) td:not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-primary) {
 background-color:#f9f9f9;
}
Comment 1 Owen Leonard 2021-10-05 12:34:05 UTC
Created attachment 125735 [details] [review]
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.
Comment 2 David Nind 2021-10-06 06:08:31 UTC
Created attachment 125757 [details] [review]
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>
Comment 3 Nick Clemens 2021-10-06 11:01:30 UTC
Created attachment 125766 [details] [review]
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>
Comment 4 Jonathan Druart 2021-10-07 13:48:30 UTC
Pushed to master for 21.11, thanks to everybody involved!
Comment 5 Kyle M Hall 2021-10-08 15:21:59 UTC
Pushed to 21.05.x for 21.05.05
Comment 6 Fridolin Somers 2021-10-21 06:07:31 UTC
Pushed to 20.11.x for 20.11.11
Comment 7 Victor Grousset/tuxayo 2021-10-26 01:02:21 UTC
Not backported to oldoldstable (20.05.x). Feel free to ask if it's needed.