From 24ee72bf29301d88ea8eaba0c3315936f5bff9b4 Mon Sep 17 00:00:00 2001 From: Owen Leonard 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 Signed-off-by: Nick Clemens Signed-off-by: Martin Renvoize --- .../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