Bug 34730 - Add responsive behavior to more tables in the OPAC
Summary: Add responsive behavior to more tables in the OPAC
Status: Pushed to oldstable
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Katrin Fischer
URL:
Keywords:
Depends on: 32341
Blocks:
  Show dependency treegraph
 
Reported: 2023-09-06 19:36 UTC by Lucas Gass
Modified: 2023-10-12 16:11 UTC (History)
3 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.11.00,23.05.04,22.11.11


Attachments
Example of problem at 605px (41.81 KB, image/png)
2023-09-06 19:36 UTC, Lucas Gass
Details
Bug 34730: Add responsive behavior to more tables in the OPAC (14.73 KB, patch)
2023-09-12 15:25 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 34730: Add responsive behavior to more tables in the OPAC (14.79 KB, patch)
2023-09-12 17:43 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 34730: Add responsive behavior to more tables in the OPAC (14.84 KB, patch)
2023-09-19 19:26 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 34730: Add responsive behavior to more tables in the OPAC (14.96 KB, patch)
2023-09-22 13:01 UTC, Kyle M Hall
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Lucas Gass 2023-09-06 19:36:26 UTC
Created attachment 155279 [details]
Example of problem at 605px

To recreate: 
1. Log in to the OPAC as a user with some checkouts, some holds, and some overdues.
2. Starting with a larger screensize ( 1385px or greater ) load the "Summary" page. ( opac-user.pl )
3. Using your browser's mobile mode shrink the size of the screen to down to where columns start disappearing. As the disappear notice they are replaced with a button that has an '+' symbol. 
4. Shrink the screen to 605px or less. 
5. Notice the odd placement of the '+' button. 
6. Reload the page with a screen size of 605px or less. There is no '+' the content is already expanded.
Comment 1 Christopher Brannon 2023-09-11 18:09:00 UTC
This bug is causing a lot of confusion for patrons.  Hopefully this can be resolved quickly.
Comment 2 Owen Leonard 2023-09-12 15:25:20 UTC
Created attachment 155557 [details] [review]
Bug 34730: Add responsive behavior to more tables in the OPAC

This patch adds responsiveness to several DataTables which were not
updated in 32341. The patch removes the CSS-based responsive styling
which was previously used for these tables.

This patch also adds some additional configuration to the tables on the
user home page so that the title column is always prioritized when
DataTables collapses columns in narrow views.

To test, apply the patch and rebuild the OPAC CSS. Ideally this should
be tested with a user who has checkouts, overdues, holds, tags, and a
checkout history.

- Log in to the OPAC and test the user summary page. Check that each
  table adjusts well to narrow browser widths. In each case the column
  containing the title should never be hidden no matter how narrow the
  window:
  - Checkouts
  - Relatives' checkouts (requires that the user is a guarantor for a
    patron with checkouts and that the guarantee's account is set up to
    show checkouts to the guarantor).
  - Overdues
  - Holds
  - Article requests

The new places the responsive DataTables extension is being used:

- Checkout history
- Suggestions
- Tags (in the table of user-submitted tags)
- Most popular

Again, in each case the table should be responsive and the title column
should be prioritized so that it doesn't get hidden at narrow page
widths.
Comment 3 Lucas Gass 2023-09-12 17:43:36 UTC
Created attachment 155566 [details] [review]
Bug 34730: Add responsive behavior to more tables in the OPAC

This patch adds responsiveness to several DataTables which were not
updated in 32341. The patch removes the CSS-based responsive styling
which was previously used for these tables.

This patch also adds some additional configuration to the tables on the
user home page so that the title column is always prioritized when
DataTables collapses columns in narrow views.

To test, apply the patch and rebuild the OPAC CSS. Ideally this should
be tested with a user who has checkouts, overdues, holds, tags, and a
checkout history.

- Log in to the OPAC and test the user summary page. Check that each
  table adjusts well to narrow browser widths. In each case the column
  containing the title should never be hidden no matter how narrow the
  window:
  - Checkouts
  - Relatives' checkouts (requires that the user is a guarantor for a
    patron with checkouts and that the guarantee's account is set up to
    show checkouts to the guarantor).
  - Overdues
  - Holds
  - Article requests

The new places the responsive DataTables extension is being used:

- Checkout history
- Suggestions
- Tags (in the table of user-submitted tags)
- Most popular

Again, in each case the table should be responsive and the title column
should be prioritized so that it doesn't get hidden at narrow page
widths.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 4 Katrin Fischer 2023-09-19 19:25:25 UTC
I like this, but it makes me wonder if we should take care somehow that the action columns like 'place hold' and 'renew' remain visible/are hidden last.
Comment 5 Katrin Fischer 2023-09-19 19:26:05 UTC
Created attachment 155909 [details] [review]
Bug 34730: Add responsive behavior to more tables in the OPAC

This patch adds responsiveness to several DataTables which were not
updated in 32341. The patch removes the CSS-based responsive styling
which was previously used for these tables.

This patch also adds some additional configuration to the tables on the
user home page so that the title column is always prioritized when
DataTables collapses columns in narrow views.

To test, apply the patch and rebuild the OPAC CSS. Ideally this should
be tested with a user who has checkouts, overdues, holds, tags, and a
checkout history.

- Log in to the OPAC and test the user summary page. Check that each
  table adjusts well to narrow browser widths. In each case the column
  containing the title should never be hidden no matter how narrow the
  window:
  - Checkouts
  - Relatives' checkouts (requires that the user is a guarantor for a
    patron with checkouts and that the guarantee's account is set up to
    show checkouts to the guarantor).
  - Overdues
  - Holds
  - Article requests

The new places the responsive DataTables extension is being used:

- Checkout history
- Suggestions
- Tags (in the table of user-submitted tags)
- Most popular

Again, in each case the table should be responsive and the title column
should be prioritized so that it doesn't get hidden at narrow page
widths.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 6 Tomás Cohen Arazi 2023-09-19 19:40:08 UTC
Pushed to master for 23.11.

Nice work everyone, thanks!
Comment 7 Fridolin Somers 2023-09-21 06:44:34 UTC
Pushed to 23.05.x for 23.05.04
Comment 8 Kyle M Hall 2023-09-22 13:01:24 UTC
Created attachment 156090 [details] [review]
Bug 34730: Add responsive behavior to more tables in the OPAC

This patch adds responsiveness to several DataTables which were not
updated in 32341. The patch removes the CSS-based responsive styling
which was previously used for these tables.

This patch also adds some additional configuration to the tables on the
user home page so that the title column is always prioritized when
DataTables collapses columns in narrow views.

To test, apply the patch and rebuild the OPAC CSS. Ideally this should
be tested with a user who has checkouts, overdues, holds, tags, and a
checkout history.

- Log in to the OPAC and test the user summary page. Check that each
  table adjusts well to narrow browser widths. In each case the column
  containing the title should never be hidden no matter how narrow the
  window:
  - Checkouts
  - Relatives' checkouts (requires that the user is a guarantor for a
    patron with checkouts and that the guarantee's account is set up to
    show checkouts to the guarantor).
  - Overdues
  - Holds
  - Article requests

The new places the responsive DataTables extension is being used:

- Checkout history
- Suggestions
- Tags (in the table of user-submitted tags)
- Most popular

Again, in each case the table should be responsive and the title column
should be prioritized so that it doesn't get hidden at narrow page
widths.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 9 Christopher Brannon 2023-09-26 21:21:43 UTC
Can this be back ported to 22.11?
Comment 10 Matt Blenkinsop 2023-10-12 16:11:08 UTC
Nice work everyone!

Pushed to oldstable for 22.11.x