| Summary: | OPAC list view toolbar and action buttons consume most of the screen on mobile | ||
|---|---|---|---|
| Product: | Koha | Reporter: | Paul Derscheid <paul.derscheid> |
| Component: | Lists | Assignee: | Paul Derscheid <paul.derscheid> |
| Status: | Needs Signoff --- | QA Contact: | Owen Leonard <oleonard> |
| Severity: | enhancement | ||
| Priority: | P5 - low | CC: | dcook, m.de.rooy |
| Version: | Main | ||
| Hardware: | All | ||
| OS: | All | ||
| GIT URL: | Initiative type: | --- | |
| Sponsorship status: | --- | Comma delimited list of Sponsors: | |
| Crowdfunding goal: | 0 | Patch complexity: | --- |
| Documentation contact: | Documentation submission: | ||
| Text to go in the release notes: | Version(s) released in: | ||
| Circulation function: | |||
| Attachments: |
Bug 41963: Improve OPAC list view mobile responsiveness
Bug 41963: (follow-up) Extend collapsible toolbar to search results Bug 41963: Improve OPAC list view mobile responsiveness Bug 41963: (follow-up) Extend collapsible toolbar to search results Bug 41963: (follow-up) Extend collapsible toolbar to search results |
||
|
Description
Paul Derscheid
2026-03-02 12:02:36 UTC
Created attachment 194340 [details] [review] Bug 41963: Improve OPAC list view mobile responsiveness - On mobile devices, the OPAC virtual shelves/lists view has the toolbar and selections bar permanently expanded and sticky, consuming most of the viewport before any list content is visible - Per-item action buttons render as full-width block elements with 120% font size, taking more space than the content itself - Add collapsible toolbar on mobile (<=608px) with a toggle bar, collapsed by default so list content is visible immediately - Make per-item action buttons compact inline links instead of full-width block buttons on the shelves page - Scope all responsive overrides to #opac-userlists/#opac-lists body IDs to avoid side effects on other OPAC pages - Add aria-expanded and aria-controls for accessibility Test plan: - Go to the OPAC, create or open a list with several items - Resize the browser to a mobile viewport (<=608px) or use a phone - Observe the toolbar takes up most of the screen and cannot be collapsed, leaving little room for actual list content - Observe per-item action buttons are oversized full-width blocks - Apply patch - Run: yarn css:build - Run: koha-plack --reload kohadev - Reload the list page at the same mobile viewport - Verify the toolbar is now collapsed behind a "List actions" bar - Click the toggle to expand the toolbar, verify all actions are still accessible, click again to collapse - Verify per-item actions display as compact inline links - Resize to desktop width (>608px) and verify the toolbar displays normally with no toggle button visible - Verify aria-expanded attribute changes on toggle click Hi Owen, would you take a look at this once we get an SO? I don't want to delay a good usability improvement but I also think that we should have a solution which works for both the list contents page and the catalog search results page. Created attachment 194353 [details] [review] Bug 41963: (follow-up) Extend collapsible toolbar to search results - Extend the collapsible toolbar pattern to the catalog search results page (opac-results.tt) which has the same #floating sticky toolbar consuming the viewport on mobile - Un-scope .toolbar-collapse-toggle and .toolbar-collapse CSS rules so they apply globally (safe: only pages with those HTML classes are affected) - Add #results body ID to the per-item .actions-menu compact override alongside #opac-userlists and #opac-lists - Move the toggle click handler from opac-shelves.tt inline script to global.js to avoid duplication across pages Test plan: - Apply patch on top of Bug 41963 base patch - Run: yarn css:build - Run: koha-plack --reload kohadev - Perform a search that returns results - At mobile viewport (<=608px), verify toolbar is collapsed behind a "Search controls" toggle bar - Click the toggle to expand, verify pagination, sort, and batch controls are all accessible - Verify per-item actions display as compact inline links - Navigate to a list page and verify collapse still works - At desktop width (>608px), verify both pages display toolbars normally with no toggle button visible Created attachment 194355 [details] [review] Bug 41963: Improve OPAC list view mobile responsiveness - On mobile devices, the OPAC virtual shelves/lists view has the toolbar and selections bar permanently expanded and sticky, consuming most of the viewport before any list content is visible - Per-item action buttons render as full-width block elements with 120% font size, taking more space than the content itself - Add collapsible toolbar on mobile (<=608px) with a toggle bar, collapsed by default so list content is visible immediately - Make per-item action buttons compact inline links instead of full-width block buttons on the shelves page - Scope all responsive overrides to #opac-userlists/#opac-lists body IDs to avoid side effects on other OPAC pages - Add aria-expanded and aria-controls for accessibility Test plan: - Go to the OPAC, create or open a list with several items - Resize the browser to a mobile viewport (<=608px) or use a phone - Observe the toolbar takes up most of the screen and cannot be collapsed, leaving little room for actual list content - Observe per-item action buttons are oversized full-width blocks - Apply patch - Run: yarn css:build - Run: koha-plack --reload kohadev - Reload the list page at the same mobile viewport - Verify the toolbar is now collapsed behind a "List actions" bar - Click the toggle to expand the toolbar, verify all actions are still accessible, click again to collapse - Verify per-item actions display as compact inline links - Resize to desktop width (>608px) and verify the toolbar displays normally with no toggle button visible - Verify aria-expanded attribute changes on toggle click Created attachment 194356 [details] [review] Bug 41963: (follow-up) Extend collapsible toolbar to search results - Add collapsible toolbar wrapper and toggle to opac-results.tt - Move toggle click handler from opac-shelves.tt to global.js so it works on both pages - Un-scope .toolbar-collapse-toggle and .toolbar-collapse CSS rules to apply globally - Add #results to .actions-menu compact override Test plan: - Open the OPAC search results page on a mobile viewport (<=608px) - Confirm the toolbar is collapsed with a toggle button visible - Click the toggle to expand/collapse the toolbar - Verify the list view (opac-shelves) still works as before - On desktop (>608px), confirm no toggle button is visible and the toolbar displays normally - yarn css:build - koha-plack --reload kohadev Added another patch to try it in search results. The diff looks horrible from the indentation change, best to check with `--ignore-all-space`. Created attachment 194359 [details] [review] Bug 41963: (follow-up) Extend collapsible toolbar to search results - Add collapsible toolbar wrapper and toggle to opac-results.tt - Move toggle click handler from opac-shelves.tt to global.js so it works on both pages - Un-scope .toolbar-collapse-toggle and .toolbar-collapse CSS rules to apply globally - Add #results to .actions-menu compact override Test plan: - Open the OPAC search results page on a mobile viewport (<=608px) - Observe the toolbar is permanently expanded and sticky, consuming viewport space before search results are visible - Apply patch - Run: yarn css:build - Run: koha-plack --reload kohadev - Reload the search results page at the same mobile viewport - Confirm the toolbar is collapsed with a "Search controls" toggle - Click the toggle to expand/collapse the toolbar - Verify the list view (opac-shelves) still works as before - On desktop (>608px), confirm no toggle button is visible and the toolbar displays normally |