On mobile devices, the OPAC virtual shelves/lists view (opac-shelves.pl) has two problems that make it hard to use: 1. The list actions toolbar (New list, Download, Send, Print, Edit, Delete, Share, Sort) and the selections toolbar (Select all, Clear all, Place hold, Remove) are always fully expanded and sticky, consuming 7+ rows of buttons before any list content is visible. There is no way I found to collapse or dismiss them. 2. The per-item action buttons (Place hold, Save to another list, Remove from list, Add to cart) render as full-width block elements with 120% font size, taking more vertical space than the bibliographic information itself.
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