Attachment 92440 Details for Bug 23492 – Bug 23492: OPAC search facet header should not be a link at larger browser widths

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

Bug-23492-OPAC-search-facet-header-should-not-be-a.patch (text/plain), 4.36 KB, created by Owen Leonard on 2019-08-22 16:48:51 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2019-08-22 16:48:51 UTC

Size: 4.36 KB

patch

obsolete

>From 94bef3fd6a16b75032ce566375d3996e7469b36f 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.
>---
> .../opac-tmpl/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 52105991169..4e387a29ad7 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 93f9c8e6de0..a331f696160 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.11.0

Actions: View | Diff | Splinter Review

Attachments on bug 23492: 92440 | 92442 | 92447