Bug 38783 - Row highlighting in the circulation history table for a patron doesn't look great
Summary: Row highlighting in the circulation history table for a patron doesn't look g...
Status: Pushed to stable
Alias: None
Product: Koha
Classification: Unclassified
Component: Circulation (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal
Assignee: Leo Stoyanov
QA Contact: Jonathan Druart
URL:
Keywords: accessibility
Depends on:
Blocks: 38954
  Show dependency treegraph
 
Reported: 2024-12-24 15:15 UTC by Lucas Gass (lukeg)
Modified: 2025-04-22 20:27 UTC (History)
9 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
This fixes the circulation history table for a patron, and makes it easier to identify checked out items: - the alternating row background colors are now white and grey, rather than: . Returned items: white/grey . Checked out items: yellow/grey - checked out items are now shown as "Checked out" using an orange/gold badge in the "Return date" column
Version(s) released in:
25.05.00,24.11.04
Circulation function:


Attachments
Proposed change to Bootstrap badges (62.78 KB, image/png)
2025-01-14 22:22 UTC, Lucas Gass (lukeg)
Details
Bug 38783: Added "Checked out" badge for checked out items in the circulation history table. (2.31 KB, patch)
2025-01-14 22:34 UTC, Leo Stoyanov
Details | Diff | Splinter Review
Bug 38783: Added "Checked out" badge for checked out items in the circulation history table. (2.52 KB, patch)
2025-01-15 07:55 UTC, Magnus Enger
Details | Diff | Splinter Review
Bug 38783: Added "Checked out" badge for checked out items in the circulation history table. (2.57 KB, patch)
2025-01-16 12:01 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 38783: (follow-up) Remove obsolete .badge-pill class (1.31 KB, patch)
2025-01-16 12:01 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 38783: Added "Checked out" badge for checked out items in the circulation history table. (2.64 KB, patch)
2025-01-23 10:51 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 38783: (follow-up) Remove obsolete .badge-pill class (1.39 KB, patch)
2025-01-23 10:51 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Lucas Gass (lukeg) 2024-12-24 15:15:50 UTC
To recreate: 

1. Make some checkout to a patron so they have a circulation history, have some items checked in and some still on loan.

2. Look at the table, you can see that there can be 4 possible background colors for each row (#ffffff, #f3f4f4, #F9FAE0, and #FFFFCC )


I think that's is too many row colors and make the table look ... not great.
Comment 1 Cheryl 2024-12-27 23:35:05 UTC
The problem I had with it is that returned items have alternating shades of grey and white line by line, but items still checked out alternate between yellow and an effectively identical shade of grey to the grey in the returned item alternating lines.

Returned items: white/grey
Checked out items: yellow/grey

So you can't tell the difference between an item that is grey because it's returned (and not white), and an item that is grey because it's checked out (and not yellow).

This is especially unhelpful when you're trying to sort by checkout date and not return date.
Comment 2 Lucas Gass (lukeg) 2025-01-14 20:34:45 UTC
Furthermore, the green links ( #408540 ) on a yellow background ( #FFFFCC ) do not meet accessibility standards for color contrast.
Comment 3 Lucas Gass (lukeg) 2025-01-14 21:36:57 UTC
I don't love the yellow row highlighting. It is meaningless unless you happen to know it represents an on loan item. 

I think we should add a Bootstrap badge somewhere on the row with the text 'Checked out'. It already exists in the return date column. Maybe we can just make that a yellow bade, so it stands out more.
Comment 4 Cheryl 2025-01-14 22:02:19 UTC
What if it was with the title column, or the barcode column? The return date/checked out column is all the way over on the right side, very far away from the title. You would most likely be looking at the title in the first place, and it would just be faster to see the most relevant information all at one go.
Comment 5 Lucas Gass (lukeg) 2025-01-14 22:22:01 UTC
Created attachment 176540 [details]
Proposed change to Bootstrap badges
Comment 6 Lucas Gass (lukeg) 2025-01-14 22:29:45 UTC
(In reply to Cheryl from comment #4)
> What if it was with the title column, or the barcode column? The return
> date/checked out column is all the way over on the right side, very far away
> from the title. You would most likely be looking at the title in the first
> place, and it would just be faster to see the most relevant information all
> at one go.


I do think the 'Return date' column makes the most sense. I uploaded an attachment of what that would look like. 

I don't love the idea of attaching it to a a column that has nothing to do with, return date/onloan status like title or barcode. 

We will attach that patch, adding it to 'Return date'. I am also going to CC some others to see what they think.
Comment 7 Leo Stoyanov 2025-01-14 22:34:33 UTC Comment hidden (obsolete)
Comment 8 Magnus Enger 2025-01-15 07:55:41 UTC
Created attachment 176542 [details] [review]
Bug 38783: Added "Checked out" badge for checked out items in the circulation history table.

To test:
1. Make some checkout to a patron so they have a circulation history, with
   some items checked in and some still on loan.
2. Look at the patron's "Circulation history" table. There are four
   possible background colors for each row: #ffffff, #f3f4f4, #F9FAE0,
   and #FFFFCC.
3. Apply the patch, update the CSS (yarn build), and restart everything
   (restart_all).
4. Repeat steps 1-2, if needed. An orange/gold badge will appear under
   the "Return date" column of the table for items that have been
   checked out, and there will no longer be alternating, pale yellow rows.

Signed-off-by: Magnus Enger <magnus@libriotech.no>
Works as advertised. I agree that it looks better now than before, and
that it is easier to tell the checked out items from the returned items.
Comment 9 Owen Leonard 2025-01-16 12:01:09 UTC
Created attachment 176647 [details] [review]
Bug 38783: Added "Checked out" badge for checked out items in the circulation history table.

To test:
1. Make some checkout to a patron so they have a circulation history,
   with some items checked in and some still on loan.
2. Look at the patron's "Circulation history" table. There are four
   possible background colors for each row: #ffffff, #f3f4f4, #F9FAE0,
   and #FFFFCC.
3. Apply the patch, update the CSS (yarn build), and restart everything
   (restart_all).
4. Repeat steps 1-2, if needed. An orange/gold badge will appear under
   the "Return date" column of the table for items that have been
   checked out, and there will no longer be alternating, pale yellow rows.

Signed-off-by: Magnus Enger <magnus@libriotech.no>
Works as advertised. I agree that it looks better now than before, and
that it is easier to tell the checked out items from the returned items.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 10 Owen Leonard 2025-01-16 12:01:11 UTC
Created attachment 176648 [details] [review]
Bug 38783: (follow-up) Remove obsolete .badge-pill class

.badge-pill is from a previous version of Bootstrap. .rounded-pill is
the current version, but I think it looks better without.
Comment 11 Jonathan Druart 2025-01-23 10:51:39 UTC
Created attachment 176944 [details] [review]
Bug 38783: Added "Checked out" badge for checked out items in the circulation history table.

To test:
1. Make some checkout to a patron so they have a circulation history,
   with some items checked in and some still on loan.
2. Look at the patron's "Circulation history" table. There are four
   possible background colors for each row: #ffffff, #f3f4f4, #F9FAE0,
   and #FFFFCC.
3. Apply the patch, update the CSS (yarn build), and restart everything
   (restart_all).
4. Repeat steps 1-2, if needed. An orange/gold badge will appear under
   the "Return date" column of the table for items that have been
   checked out, and there will no longer be alternating, pale yellow rows.

Signed-off-by: Magnus Enger <magnus@libriotech.no>
Works as advertised. I agree that it looks better now than before, and
that it is easier to tell the checked out items from the returned items.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 12 Jonathan Druart 2025-01-23 10:51:42 UTC
Created attachment 176945 [details] [review]
Bug 38783: (follow-up) Remove obsolete .badge-pill class

.badge-pill is from a previous version of Bootstrap. .rounded-pill is
the current version, but I think it looks better without.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 13 Jonathan Druart 2025-01-23 11:04:28 UTC
Found bug 38954 when QAing this.
Comment 14 David Nind 2025-01-23 20:07:14 UTC
Just to say that this is a great improvement!
Comment 15 Katrin Fischer 2025-01-24 10:50:27 UTC
It's stuff like this, the small changes. Thanks!
Comment 16 Katrin Fischer 2025-01-24 11:03:34 UTC
Pushed for 25.05!

Well done everyone, thank you!
Comment 17 Paul Derscheid 2025-04-22 20:27:38 UTC
Nice work everyone!

Pushed to 24.11.x for 24.11.04