Bug 31248 - Fix responsive table style in the OPAC after switch to Bootstrap tabs
Summary: Fix responsive table style in the OPAC after switch to Bootstrap tabs
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal (vote)
Assignee: Lucas Gass
QA Contact: Testopia
URL:
Keywords:
Depends on: 30570
Blocks: 34427
  Show dependency treegraph
 
Reported: 2022-07-27 14:50 UTC by Caroline Cyr La Rose
Modified: 2023-07-26 21:45 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.04,22.05.11


Attachments
Screenshot of checkout history in mobile view on Firefox (81.76 KB, image/png)
2022-07-27 14:50 UTC, Caroline Cyr La Rose
Details
Bug 31248: Fix responsiveness of tables on OPAC summary page (1.83 KB, patch)
2022-12-28 18:46 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 31248: Fix responsiveness of tables on OPAC summary page (1.88 KB, patch)
2023-01-01 23:50 UTC, David Nind
Details | Diff | Splinter Review
Bug 31248: (follow-up) Add fix to checkout history page (794 bytes, patch)
2023-01-17 22:57 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 31248: Fix responsiveness of tables on OPAC summary page (1.88 KB, patch)
2023-01-17 23:32 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 31248: (follow-up) Add fix to checkout history page (853 bytes, patch)
2023-01-17 23:32 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 31248: Fix responsiveness of tables on OPAC summary page (1.95 KB, patch)
2023-02-23 10:12 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 31248: (follow-up) Add fix to checkout history page (929 bytes, patch)
2023-02-23 10:12 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 Caroline Cyr La Rose 2022-07-27 14:50:28 UTC
Created attachment 138180 [details]
Screenshot of checkout history in mobile view on Firefox

The checkout history table on mobile is large and there doesn't seem to be a way to scroll right. When on mobile, the current checkouts are not in a table, maybe the same could be done with the checkout history?

To test:
1) Make sure you have checkouts in your account
2) Log into the OPAC
--> In 'Your summary' current checkouts are in a table
3) Go to 'You checkout history'
--> Current and previous checkouts are in a table
4) Switch to mobile view (in Firefox, Ctrl + Shift + M)
--> Checkout history is still in a table and the last column is not entirely visible (depending on the content of the columns, I suppose)
5) Go to 'Your summary'
--> Current checkouts are presented in list form instead of a table
Comment 1 Paul Derscheid 2022-07-28 07:36:31 UTC
I cannot reproduce this issue. Following your steps I'm able to scroll sideway with a trackpad (as this is a mobile view, scrolling with a touchscreen is possible). 

However I noticed that in the checkout history as well as in the summary the UI uses a table to display the data. So there's no list view for me.
Comment 2 Caroline Cyr La Rose 2022-07-28 13:12:26 UTC
You're right, I think I was testing on 22.05 (I'm documenting 22.05 and I can get a bit confused when I have 20 million tabs open and all the OPACs look the same, lol)

In my current master (22.06.00.021), the checkouts table is a table and I can scroll sideways, and the checkout history is the same.

In 22.05 (I'm at 22.05.02.001), the checkouts are in a list and the checkout history is in a table and I am unable to scroll.

So we seem to have lost the checkouts in a list since 22.05, but we gained the scrolling. I'm not sure if it was intentional? 

Personally, I like the list form better on mobile. Opinions?
Comment 3 Owen Leonard 2022-07-28 17:22:26 UTC
Caused by Bug 30570
Comment 4 Lucas Gass 2022-12-28 18:46:00 UTC
Created attachment 144869 [details] [review]
Bug 31248: Fix responsiveness of tables on OPAC summary page

This patch adds back the responsive styles of the tables on the OPAC summary page. This includes all of the following tables that may appear:

opac-user-checkouts
opac-user-relative-issues
opac-user-overdues
opac-user-fines
opac-user-relative-fines
opac-user-clubs
opac-user-holds
opac-user-recalls
opac-user-article-requests
opac-user-overdrive
opac-user-recordedbooks

To test:
1) Make sure you have checkouts in your account
2) Log into the OPAC
--> In 'Your summary' current checkouts are in a table
3) Go to 'You checkout history'
--> Current and previous checkouts are in a table
4) Switch to mobile view (in Firefox, Ctrl + Shift + M)
--> Checkout history is still in a table and the last column is not entirely visible (depending on the content of the columns, I suppose)
5) Go to 'Your summary'
--> Current checkouts are presented in list form instead of a table
6) Apply patch and rebuild the OPAC CSS ( https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface )
7) Try the tables again, they should appear in a list form when the screen is smaller than 608px.
Comment 5 David Nind 2023-01-01 23:50:21 UTC
Created attachment 144899 [details] [review]
Bug 31248: Fix responsiveness of tables on OPAC summary page

This patch adds back the responsive styles of the tables on the OPAC summary page. This includes all of the following tables that may appear:

opac-user-checkouts
opac-user-relative-issues
opac-user-overdues
opac-user-fines
opac-user-relative-fines
opac-user-clubs
opac-user-holds
opac-user-recalls
opac-user-article-requests
opac-user-overdrive
opac-user-recordedbooks

To test:
1) Make sure you have checkouts in your account
2) Log into the OPAC
--> In 'Your summary' current checkouts are in a table
3) Go to 'You checkout history'
--> Current and previous checkouts are in a table
4) Switch to mobile view (in Firefox, Ctrl + Shift + M)
--> Checkout history is still in a table and the last column is not entirely visible (depending on the content of the columns, I suppose)
5) Go to 'Your summary'
--> Current checkouts are presented in list form instead of a table
6) Apply patch and rebuild the OPAC CSS ( https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface )
7) Try the tables again, they should appear in a list form when the screen is smaller than 608px.

Signed-off-by: David Nind <david@davidnind.com>
Comment 6 David Nind 2023-01-01 23:53:07 UTC
Should I log a separate bug for the 'Checkout history' view (and maybe any others that need changing)? This still shows for me as a table and not a list, but is scrollable.

Ideally, it should be as consistent as possible, and I agree with Caroline that the list view is easier to read on a mobile.
Comment 7 Lucas Gass 2023-01-17 22:57:19 UTC
Created attachment 145375 [details] [review]
Bug 31248: (follow-up) Add fix to checkout history page
Comment 8 Lucas Gass 2023-01-17 22:57:52 UTC
(In reply to David Nind from comment #6)
> Should I log a separate bug for the 'Checkout history' view (and maybe any
> others that need changing)? This still shows for me as a table and not a
> list, but is scrollable.
> 
> Ideally, it should be as consistent as possible, and I agree with Caroline
> that the list view is easier to read on a mobile.

David, I provided a follow-up for the Checkout history table.
Comment 9 ByWater Sandboxes 2023-01-17 23:32:39 UTC
Created attachment 145376 [details] [review]
Bug 31248: Fix responsiveness of tables on OPAC summary page

This patch adds back the responsive styles of the tables on the OPAC summary page. This includes all of the following tables that may appear:

opac-user-checkouts
opac-user-relative-issues
opac-user-overdues
opac-user-fines
opac-user-relative-fines
opac-user-clubs
opac-user-holds
opac-user-recalls
opac-user-article-requests
opac-user-overdrive
opac-user-recordedbooks

To test:
1) Make sure you have checkouts in your account
2) Log into the OPAC
--> In 'Your summary' current checkouts are in a table
3) Go to 'You checkout history'
--> Current and previous checkouts are in a table
4) Switch to mobile view (in Firefox, Ctrl + Shift + M)
--> Checkout history is still in a table and the last column is not entirely visible (depending on the content of the columns, I suppose)
5) Go to 'Your summary'
--> Current checkouts are presented in list form instead of a table
6) Apply patch and rebuild the OPAC CSS ( https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface )
7) Try the tables again, they should appear in a list form when the screen is smaller than 608px.

Signed-off-by: David Nind <david@davidnind.com>
Comment 10 ByWater Sandboxes 2023-01-17 23:32:43 UTC
Created attachment 145377 [details] [review]
Bug 31248: (follow-up) Add fix to checkout history page

Signed-off-by: Christopher Brannon <cbrannon@cdalibrary.org>
Comment 11 Christopher Brannon 2023-01-17 23:34:25 UTC
Tested with 2nd patch.  Everything looks good!
Comment 12 Jonathan Druart 2023-02-23 10:12:40 UTC
Created attachment 147213 [details] [review]
Bug 31248: Fix responsiveness of tables on OPAC summary page

This patch adds back the responsive styles of the tables on the OPAC summary page. This includes all of the following tables that may appear:

opac-user-checkouts
opac-user-relative-issues
opac-user-overdues
opac-user-fines
opac-user-relative-fines
opac-user-clubs
opac-user-holds
opac-user-recalls
opac-user-article-requests
opac-user-overdrive
opac-user-recordedbooks

To test:
1) Make sure you have checkouts in your account
2) Log into the OPAC
--> In 'Your summary' current checkouts are in a table
3) Go to 'You checkout history'
--> Current and previous checkouts are in a table
4) Switch to mobile view (in Firefox, Ctrl + Shift + M)
--> Checkout history is still in a table and the last column is not entirely visible (depending on the content of the columns, I suppose)
5) Go to 'Your summary'
--> Current checkouts are presented in list form instead of a table
6) Apply patch and rebuild the OPAC CSS ( https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface )
7) Try the tables again, they should appear in a list form when the screen is smaller than 608px.

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

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 13 Jonathan Druart 2023-02-23 10:12:43 UTC
Created attachment 147214 [details] [review]
Bug 31248: (follow-up) Add fix to checkout history page

Signed-off-by: Christopher Brannon <cbrannon@cdalibrary.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 14 Tomás Cohen Arazi 2023-02-24 19:56:19 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 15 Matt Blenkinsop 2023-02-28 16:24:02 UTC
Nice work everyone!

Pushed to stable for 22.11.x
Comment 16 Christopher Brannon 2023-02-28 17:53:20 UTC
Seems like this one could be backported to 22.05?  Yes/No?
Comment 17 Lucas Gass 2023-03-08 13:24:16 UTC
Backported to 22.05.x for upcoming 22.05.11.
Comment 18 Arthur Suzuki 2023-03-29 12:31:52 UTC
dependancy 30570 not met in 21.11, won't backport