Bugzilla – Attachment 194359 Details for
Bug 41963
OPAC list view toolbar and action buttons consume most of the screen on mobile
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 41963: (follow-up) Extend collapsible toolbar to search results
Bug-41963-follow-up-Extend-collapsible-toolbar-to-.patch (text/plain), 13.33 KB, created by
Paul Derscheid
on 2026-03-02 19:00:42 UTC
(
hide
)
Description:
Bug 41963: (follow-up) Extend collapsible toolbar to search results
Filename:
MIME Type:
Creator:
Paul Derscheid
Created:
2026-03-02 19:00:42 UTC
Size:
13.33 KB
patch
obsolete
>From 2478049d7f7b23b42a11ef096357743e2bf98d07 Mon Sep 17 00:00:00 2001 >From: Paul Derscheid <paul.derscheid@lmscloud.de> >Date: Mon, 2 Mar 2026 19:55:59 +0100 >Subject: [PATCH] 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 >--- > .../bootstrap/css/src/_responsive.scss | 43 ++++++----- > .../bootstrap/en/modules/opac-results.tt | 76 ++++++++++--------- > .../bootstrap/en/modules/opac-shelves.tt | 10 --- > koha-tmpl/opac-tmpl/bootstrap/js/global.js | 10 +++ > 4 files changed, 72 insertions(+), 67 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss >index 684391159b6..5ea72d89d11 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss >@@ -218,33 +218,34 @@ > 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%; >+ .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; >- } >+ &:hover, >+ &:focus { >+ background-color: darken( #EEEEEE, 5% ); >+ color: $gray-700; >+ text-decoration: none; > } >+ } > >- .toolbar-collapse { >- display: none; >+ .toolbar-collapse { >+ display: none; > >- &.open { >- display: block; >- } >+ &.open { >+ display: block; > } >+ } > >+ #opac-userlists, >+ #opac-lists, >+ #results { > .actions-menu .actions { > display: inline; > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt >index 4034eb9633c..e6969ed2052 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt >@@ -194,44 +194,48 @@ > [% END # IF /searchdesc %] > > <div id="floating" class="sticky"> >- <div id="toolbar" class="toolbar row align-items-center"> >- <div id="top-pages" class="col"> [% INCLUDE 'page-numbers.inc' %] </div> >- [% UNLESS tag %] >- <div class="sort_by col-sm-auto"> >- <label for="sort_by">Sort results by:</label> >- <label for="sort_by" class="sr-only">Sort by:</label> >- <select id="sort_by" class="resort form-select form-select-sm" name="sort_by"> >- [% INCLUDE 'resort_form.inc' %] >- </select> >- >- [% IF Koha.Preference('OPACnumSearchResultsDropdown') %] >- <label for="results_per_page">Results per page: </label> >- <select id="results_per_page" class="form-select" name="count"> >- [% IF Koha.Preference('OPACnumSearchResults') %] >- [% IF results_per_page == Koha.Preference('OPACnumSearchResults') %] >- <option value="[% Koha.Preference('OPACnumSearchResults') | html %]" selected="selected">[% Koha.Preference('OPACnumSearchResults') | html %] (default)</option> >- [% ELSE %] >- <option value="[% Koha.Preference('OPACnumSearchResults') | html %]">[% Koha.Preference('OPACnumSearchResults') | html %] (default)</option> >- [% END %] >- [% END %] >- [% IF results_per_page == '20' %]<option value="20" selected="selected">20</option>[% ELSE %]<option value="20">20</option>[% END %] >- [% IF results_per_page == '40' %]<option value="40" selected="selected">40</option>[% ELSE %]<option value="40">40</option>[% END %] >- [% IF results_per_page == '60' %]<option value="60" selected="selected">60</option>[% ELSE %]<option value="60">60</option>[% END %] >- [% IF results_per_page == '80' %]<option value="80" selected="selected">80</option>[% ELSE %]<option value="80">80</option>[% END %] >- [% IF results_per_page == '100' %]<option value="100" selected="selected">100</option>[% ELSE %]<option value="100">100</option>[% END %] >+ <a href="#" class="toolbar-collapse-toggle d-none" aria-expanded="false" aria-controls="toolbar-collapse-content"> <i class="fa fa-bars" aria-hidden="true"></i> Search controls </a> >+ <div class="toolbar-collapse" id="toolbar-collapse-content"> >+ <div id="toolbar" class="toolbar row align-items-center"> >+ <div id="top-pages" class="col"> [% INCLUDE 'page-numbers.inc' %] </div> >+ [% UNLESS tag %] >+ <div class="sort_by col-sm-auto"> >+ <label for="sort_by">Sort results by:</label> >+ <label for="sort_by" class="sr-only">Sort by:</label> >+ <select id="sort_by" class="resort form-select form-select-sm" name="sort_by"> >+ [% INCLUDE 'resort_form.inc' %] > </select> >- [% END # IF Koha.Preference('OPACnumSearchResultsDropdown') %] >- </div> >- <!-- /.sort_by --> >- <div id="sortsubmit" class="sort_by col-auto"> >- <input type="submit" class="btn btn-primary btn-sm clearfix" value="Go" /> >- </div> >- <!-- /.sort_by --> >- [% END # /UNLESS tag %] >- </div> >- <!-- / #toolbar --> > >- [% INCLUDE 'result-batch-controls.inc' results=1 %] >+ [% IF Koha.Preference('OPACnumSearchResultsDropdown') %] >+ <label for="results_per_page">Results per page: </label> >+ <select id="results_per_page" class="form-select" name="count"> >+ [% IF Koha.Preference('OPACnumSearchResults') %] >+ [% IF results_per_page == Koha.Preference('OPACnumSearchResults') %] >+ <option value="[% Koha.Preference('OPACnumSearchResults') | html %]" selected="selected">[% Koha.Preference('OPACnumSearchResults') | html %] (default)</option> >+ [% ELSE %] >+ <option value="[% Koha.Preference('OPACnumSearchResults') | html %]">[% Koha.Preference('OPACnumSearchResults') | html %] (default)</option> >+ [% END %] >+ [% END %] >+ [% IF results_per_page == '20' %]<option value="20" selected="selected">20</option>[% ELSE %]<option value="20">20</option>[% END %] >+ [% IF results_per_page == '40' %]<option value="40" selected="selected">40</option>[% ELSE %]<option value="40">40</option>[% END %] >+ [% IF results_per_page == '60' %]<option value="60" selected="selected">60</option>[% ELSE %]<option value="60">60</option>[% END %] >+ [% IF results_per_page == '80' %]<option value="80" selected="selected">80</option>[% ELSE %]<option value="80">80</option>[% END %] >+ [% IF results_per_page == '100' %]<option value="100" selected="selected">100</option>[% ELSE %]<option value="100">100</option>[% END %] >+ </select> >+ [% END # IF Koha.Preference('OPACnumSearchResultsDropdown') %] >+ </div> >+ <!-- /.sort_by --> >+ <div id="sortsubmit" class="sort_by col-auto"> >+ <input type="submit" class="btn btn-primary btn-sm clearfix" value="Go" /> >+ </div> >+ <!-- /.sort_by --> >+ [% END # /UNLESS tag %] >+ </div> >+ <!-- / #toolbar --> >+ >+ [% INCLUDE 'result-batch-controls.inc' results=1 %] >+ </div> >+ <!-- / .toolbar-collapse --> > </div> > <!-- /#floating --> > >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 acbe6ddcc4a..cd53f555b05 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt >@@ -1100,16 +1100,6 @@ > 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 ){ >diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js >index 2e9d20287f4..dbbd14b7ddc 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js >+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js >@@ -304,6 +304,16 @@ $(document).ready(function () { > facetMenu("hide"); > } > >+ $(".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 ? "false" : "true"); >+ $toggle.find("i").toggleClass("fa-bars fa-times"); >+ }); >+ > // clear the basket when user logs out > $("#logout").click(function () { > var nameCookie = "bib_list"; >-- >2.53.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 41963
:
194340
|
194353
|
194355
|
194356
| 194359