[Bug 41963] New: OPAC list view toolbar and action buttons consume most of the screen on mobile
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Bug ID: 41963 Summary: OPAC list view toolbar and action buttons consume most of the screen on mobile Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Lists Assignee: koha-bugs@lists.koha-community.org Reporter: paul.derscheid@lmscloud.de QA Contact: testopia@bugs.koha-community.org CC: m.de.rooy@rijksmuseum.nl 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. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 --- Comment #1 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 194340 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=194340&action=edit 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 -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |paul.derscheid@lmscloud.de |ity.org | QA Contact|testopia@bugs.koha-communit |oleonard@myacpl.org |y.org | --- Comment #2 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Hi Owen, would you take a look at this once we get an SO? -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 --- Comment #3 from Owen Leonard <oleonard@myacpl.org> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 --- Comment #4 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 194353 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=194353&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #194353|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #194340|0 |1 is obsolete| | --- Comment #5 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 194355 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=194355&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 --- Comment #6 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 194356 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=194356&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 --- Comment #7 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Added another patch to try it in search results. The diff looks horrible from the indentation change, best to check with `--ignore-all-space`. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #194356|0 |1 is obsolete| | --- Comment #8 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 194359 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=194359&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #194355|0 |1 is obsolete| | --- Comment #9 from David Nind <david@davidnind.com> --- Created attachment 195374 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=195374&action=edit 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 Signed-off-by: David Nind <david@davidnind.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #194359|0 |1 is obsolete| | --- Comment #10 from David Nind <david@davidnind.com> --- Created attachment 195375 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=195375&action=edit 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 Signed-off-by: David Nind <david@davidnind.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com Text to go in the| |This enhancement collapses release notes| |the OPAC search results and | |list action menus and | |options when in a "mobile" | |view (or when using a | |narrower browser window). | | | |This reduces the amount of | |space that the menus take | |up by default. The action | |menus can be expanded or | |collapsed by patrons ('List | |actions' for lists, and | |'Search controls' for | |search results). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Patch doesn't apply -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #195374|0 |1 is obsolete| | Attachment #195375|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 --- Comment #11 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 202357 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=202357&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 --- Comment #12 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 202358 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=202358&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41963 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Patch doesn't apply -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org