From 915815ddae7a69e549e0114eddd2be6a44f1486b Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
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 <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
---
 .../bootstrap/css/src/_responsive.scss        | 76 +++++++++++--------
 .../bootstrap/en/modules/opac-results.tt      | 14 +---
 koha-tmpl/opac-tmpl/bootstrap/js/global.js    |  4 +-
 3 files changed, 51 insertions(+), 43 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 28b4bdef6c..98106fdcd7 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
@@ -100,18 +100,10 @@
                     </div>
                 [% END %]
 
-                [% IF ( total ) %]
-                    [% IF ( opacfacets ) %]
-                        <div class="col-lg-10 order-first order-md-first order-lg-2 maincontent">
-                    [% ELSE %]
-                        <div class="col order-first order-md-first order-lg-2 maincontent">
-                   [% END %]
+                [% IF ( opacfacets ) %]
+                    <div class="col-lg-10 maincontent">
                 [% ELSE %]
-                    [% IF ( opacfacets ) %]
-                        <div class="col-lg-10 order-first order-md-first order-lg-2">
-                    [% ELSE %]
-                        <div class="col order-first order-md-first order-lg-2">
-                    [% END %]
+                    <div class="col maincontent">
                 [% END %]
 
                 [% IF ( searchdesc ) %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
index 1d46a3f271..37fbabe88a 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
@@ -160,7 +160,7 @@ enquire.register("screen and (max-width:608px)", {
     }
 });
 
-enquire.register("screen and (min-width:768px)", {
+enquire.register("screen and (min-width:992px)", {
     match : function() {
         facetMenu( "show" );
     },
@@ -194,7 +194,7 @@ $(document).ready(function(){
     $(".js-show").show();
     $(".js-hide").hide();
 
-    if( $(window).width() < 768 ){
+    if( $(window).width() < 991 ){
         facetMenu("hide");
     }
 
-- 
2.39.5