From d49f04237f9dd9fbce401ff1d48984f5e822a11b Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 27 Jan 2022 15:29:32 +0000 Subject: [PATCH] Bug 29603: Fix responsive behavior of facets menu in OPAC search results The OPAC was originally featured a search results facets box that would collapse at narrower browser widths and show a "Refine your search" link under the breadcrumbs menu. At some point this broke, with the "Refine your search" link appearing at the bottom instead. This patch revises the page to restore the previous behavior. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Perform catalog search in the OPAC which will return multiple results. - View the page at various browser widths. At narrower widths the facets menu should appear as a "collapsed" box with a "Refine your search" link. - Clicking the link should toggle the facets menu visibility. Signed-off-by: David Nind Signed-off-by: Katrin Fischer Signed-off-by: Fridolin Somers (cherry picked from commit 915815ddae7a69e549e0114eddd2be6a44f1486b) Signed-off-by: Arthur Suzuki (cherry picked from commit 2e72aae7e40baddc8927d6c2a0e7fdafaa17c981) Signed-off-by: Victor Grousset/tuxayo --- .../bootstrap/css/src/_responsive.scss | 76 ++++++++++------- .../bootstrap/en/modules/opac-results.tt | 14 +--- koha-tmpl/opac-tmpl/bootstrap/js/global.js | 82 +++++++++++++++++-- 3 files changed, 123 insertions(+), 49 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index ad2013e717..0e5f462fbf 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -381,10 +381,40 @@ display: none; } + #wrapper { + padding: 0; + } + + .table_controls { + display: block; + + label { + display: block; + } + } +} + +@media only screen and ( max-width: 800px ) { + /* Screens below 800 pixels wide */ + .cartlabel, + .listslabel, + .langlabel, + .userlabel { + display: none; + } + + .navbar { + .divider-vertical { + margin: 0 2px; + } + } +} + +@media only screen and ( max-width: 991px ) { #search-facets { margin-bottom: .5em; - h4 { + h2 { display: block; margin: 0; padding: 0; @@ -393,6 +423,13 @@ border-bottom: 0; font-weight: normal; padding: .7em .2em; + + &::before { + content: "\f0da"; + display: inline-block; + font-family: FontAwesome; + width: 1em; + } } } @@ -400,7 +437,7 @@ padding: .4em; } - h5 { + h3 { margin: .2em; } @@ -409,36 +446,15 @@ } } - #menu h4 a.menu-open, - #search-facets h4 a.menu-open { + #menu h2 a.menu-open, + #search-facets h2 a.menu-open { border-bottom: 1px solid #D8D8D8; - } - - #wrapper { - padding: 0; - } - .table_controls { - display: block; - - label { - display: block; - } - } -} - -@media only screen and ( max-width: 800px ) { - /* Screens below 800 pixels wide */ - .cartlabel, - .listslabel, - .langlabel, - .userlabel { - display: none; - } - - .navbar { - .divider-vertical { - margin: 0 2px; + &::before { + content: "\f0d7"; + display: inline-block; + font-family: FontAwesome; + width: 1em; } } } 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 b2d144d8d6..2e91a04d45 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt @@ -102,18 +102,10 @@ [% END %] - [% IF ( total ) %] - [% IF ( opacfacets ) %] -
- [% ELSE %] -
- [% END %] + [% IF ( opacfacets ) %] +
[% ELSE %] - [% IF ( opacfacets ) %] -
- [% ELSE %] -
- [% END %] +
[% END %] [% IF ( searchdesc ) %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js index 27f2874502..17d2447abb 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js @@ -151,13 +151,79 @@ function confirmModal(message, title, yes_label, no_label, callback) { }); })(jQuery); -$("#scrolltocontent").click(function() { - var content = $(".maincontent"); - if (content.length > 0) { - $('html,body').animate({ - scrollTop: content.first().offset().top - }, - 'slow'); - content.first().find(':focusable').eq(0).focus(); +enquire.register("screen and (max-width:608px)", { + match : function() { + if($("body.scrollto").length > 0){ + window.scrollTo( 0, $(".maincontent").offset().top ); + } + } +}); + +enquire.register("screen and (min-width:992px)", { + match : function() { + facetMenu( "show" ); + }, + unmatch : function() { + facetMenu( "hide" ); + } +}); + +function facetMenu( action ){ + if( action == "show" ){ + $(".menu-collapse-toggle").off("click", facetHandler ); + $(".menu-collapse").show(); + } else { + $(".menu-collapse-toggle").on("click", facetHandler ).removeClass("menu-open"); + $(".menu-collapse").hide(); } +} + +var facetHandler = function(e){ + e.preventDefault(); + $(this).toggleClass("menu-open"); + $(".menu-collapse").toggle(); +}; + +$(document).ready(function(){ + $("html").removeClass("no-js").addClass("js"); + $(".close").click(function(){ + window.close(); + }); + $(".focus").focus(); + $(".js-show").show(); + $(".js-hide").hide(); + + if( $(window).width() < 991 ){ + facetMenu("hide"); + } + + // clear the basket when user logs out + $("#logout").click(function(){ + var nameCookie = "bib_list"; + var valCookie = readCookie(nameCookie); + if (valCookie) { // basket has contents + updateBasket(0,null); + delCookie(nameCookie); + return true; + } else { + return true; + } + }); + + $(".loginModal-trigger").on("click",function(e){ + e.preventDefault(); + $("#loginModal").modal("show"); + }); + $("#loginModal").on("shown.bs.modal", function(){ + $("#muserid").focus(); + }); + + $("#scrolltocontent").click(function() { + var content = $(".maincontent"); + if (content.length > 0) { + $('html,body').animate({ scrollTop: content.first().offset().top }, + 'slow'); + content.first().find(':focusable').eq(0).focus(); + } + }); }); -- 2.39.5