From 24ee72bf29301d88ea8eaba0c3315936f5bff9b4 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 22 Aug 2019 14:57:20 +0000
Subject: [PATCH] Bug 23492: OPAC search facet header should not be a link at
 larger browser widths

This patch adds some JavaScript-driven "breakpoints" to the OPAC so that
on the search results page the "Refine your search" heading has
different behaviors depending on whether facets are being displayed as a
sidebar.

To test, apply the patch and regenerate the OPAC SCSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

Go to the OPAC and resize your browser to be greater than ~ 800px wide.

 - Perform a catalog search which will return several results.
 - In the left-hand sidebar of the search results page, the "Refine your
   search" heading should not be styled like a link. Hovering over it
   with the mouse should not change the cursor to the pointing-hand.
 - Narrow your browser window until the sidebar collapses.
   - The "Refine your search" heading should now be styled as a link,
     with a right-arrow icon before it.
   - Clicking it should expand the facets. The icon should change to a
     down-arrow.
 - Widen your browser window and test again.

 - Perform the same tests when starting with a narrow browser window.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../bootstrap/css/src/_responsive.scss        | 18 +++++++++--
 koha-tmpl/opac-tmpl/bootstrap/js/script.js    | 30 ++++++++++++++-----
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
index 5210599116..4e387a29ad 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
@@ -383,7 +383,6 @@
             padding: 0;
 
             a {
-                @include border-radius-all( 7px );
                 border-bottom: 0;
                 font-weight: normal;
                 padding: .7em .2em;
@@ -435,7 +434,6 @@
     #menu h4 a.menu-open,
     #search-facets h4 a.menu-open {
         border-bottom: 1px solid #D8D8D8;
-        border-radius: 7px 7px 0 0;
     }
 
     #loginModal {
@@ -506,6 +504,22 @@
             }
         }
     }
+
+    a {
+        &.menu-collapse-toggle {
+            &:link,
+            &:visited,
+            &:hover,
+            &:active {
+                color: #727272;
+                cursor: default;
+
+                &::before {
+                    display: none;
+                }
+            }
+        }
+    }
 }
 
 @media only screen and ( min-width: 768px ) and ( max-width: 984px ) {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/script.js b/koha-tmpl/opac-tmpl/bootstrap/js/script.js
index 93f9c8e6de..a331f69616 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/script.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/script.js
@@ -13,19 +13,39 @@ enquire.register("screen and (max-width:608px)", {
 
 enquire.register("screen and (min-width:768px)", {
     match : function() {
-        $(".menu-collapse").show();
+        facetMenu( "show" );
     },
     unmatch : function() {
-        $(".menu-collapse").hide();
+        facetMenu( "hide" );
     }
 });
 
+function facetMenu( action ){
+    if( action == "show" ){
+        $(".menu-collapse-toggle").unbind("click", facetHandler )
+        $(".menu-collapse").show();
+    } else {
+        $(".menu-collapse-toggle").bind("click", facetHandler ).removeClass("menu-open");
+        $(".menu-collapse").hide();
+    }
+}
+
+var facetHandler = function(e){
+    e.preventDefault();
+    $(this).toggleClass("menu-open");
+    $(".menu-collapse").toggle();
+};
+
 $(document).ready(function(){
     $(".close").click(function(){
         window.close();
     });
     $(".focus").focus();
 
+    if( $(window).width() < 768 ){
+        facetMenu("hide");
+    }
+
     // clear the basket when user logs out
     $("#logout").click(function(){
         var nameCookie = "bib_list";
@@ -46,11 +66,7 @@ $(document).ready(function(){
             mem.removeAttr("style");
         }
     });
-    $(".menu-collapse-toggle").on("click",function(e){
-        e.preventDefault();
-        $(this).toggleClass("menu-open");
-        $(".menu-collapse").toggle();
-    });
+
     $(".loginModal-trigger").on("click",function(e){
         e.preventDefault();
         $("#loginModal").modal("show");
-- 
2.39.5