Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 23492: OPAC search facet header should not be a link at larger browser widths

Browse source 
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>
This commit is contained in:
Owen Leonard 2019-08-22 14:57:20 +00:00 committed by Martin Renvoize
parent 3640130d1f
commit 24ee72bf29
Signed by: martin.renvoize
GPG key ID: 422B469130441A0F
2 changed files with 39 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
View file

@ -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 ) {

30
koha-tmpl/opac-tmpl/bootstrap/js/script.js
View file

@ -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");