From cf9edf9f6ab25032042d498c74ac73607e477871 Mon Sep 17 00:00:00 2001 From: Paul Derscheid Date: Mon, 2 Mar 2026 13:15:58 +0100 Subject: [PATCH] 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 --- .../bootstrap/css/src/_responsive.scss | 39 +++++++++++++++++++ .../bootstrap/en/modules/opac-shelves.tt | 15 +++++++ 2 files changed, 54 insertions(+) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 04a84b18938..684391159b6 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -217,6 +217,45 @@ #checkouts_filter { display: block; } + + #opac-userlists, + #opac-lists { + .toolbar-collapse-toggle { + background-color: #EEEEEE; + color: $gray-550; + display: block !important; + font-size: .9rem; + padding: 6px 10px; + text-align: center; + width: 100%; + + &:hover, + &:focus { + background-color: darken( #EEEEEE, 5% ); + color: $gray-700; + text-decoration: none; + } + } + + .toolbar-collapse { + display: none; + + &.open { + display: block; + } + } + + .actions-menu .actions { + display: inline; + + a { + display: inline; + font-size: .9rem; + font-weight: normal; + margin: 0; + } + } + } } @media only screen and ( max-width: 700px ) { diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt index 78629f1e38a..45583dbaf63 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt @@ -258,6 +258,10 @@ [% SET contents = shelf.get_contents %] [% IF ( contents.count ) %]

This list contains [% contents.count | html %] titles

[% END %]
+ +
New list | @@ -401,6 +405,7 @@
[% INCLUDE 'result-batch-controls.inc' %] +
@@ -1094,6 +1099,16 @@ Dopop( link ); }); + $(".toolbar-collapse-toggle").on("click", function(e) { + e.preventDefault(); + var $toggle = $(this); + var $collapse = $toggle.siblings(".toolbar-collapse"); + var isOpen = $collapse.hasClass("open"); + $collapse.toggleClass("open"); + $toggle.attr("aria-expanded", !isOpen ? "true" : "false"); + $toggle.find("i").toggleClass("fa-bars fa-times"); + }); + }); // document.ready function sortMenu( sorting_form ){ -- 2.53.0