Attachment 135368 Details for Bug 29603 – Bug 29603: [20.11.x] Fix responsive behavior of facets menu in OPAC search results

[patch] Bug 29603: [20.11.x] Fix responsive behavior of facets menu in OPAC search results

Bug-29603-2011x-Fix-responsive-behavior-of-facets-.patch (text/plain), 4.89 KB, created by Owen Leonard on 2022-05-26 11:34:27 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2022-05-26 11:34:27 UTC

Size: 4.89 KB

patch

obsolete

>From 3282aba30a36c4a518c3b95f8952aff89cddb106 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: [20.11.x] 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>
>---
> .../bootstrap/css/src/_responsive.scss        | 45 +++++++++++++++++--
> .../bootstrap/en/modules/opac-results.tt      | 14 ++----
> koha-tmpl/opac-tmpl/bootstrap/js/script.js    |  4 +-
> 3 files changed, 46 insertions(+), 17 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>index aadfecc77a..bd2ae15726 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>@@ -358,10 +358,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;
>@@ -370,6 +400,13 @@
>                 border-bottom: 0;
>                 font-weight: normal;
>                 padding: .7em .2em;
>+
>+                &::before {
>+                    content: "\f0da";
>+                    display: inline-block;
>+                    font-family: FontAwesome;
>+                    width: 1em;
>+                }
>             }
>         }
> 
>@@ -377,7 +414,7 @@
>             padding: .4em;
>         }
> 
>-        h5 {
>+        h3 {
>             margin: .2em;
>         }
> 
>@@ -386,8 +423,8 @@
>         }
>     }
> 
>-    #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;
>     }
> 
>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 ce0cef56bc..2bab701c4c 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
>@@ -99,18 +99,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/script.js b/koha-tmpl/opac-tmpl/bootstrap/js/script.js
>index 512f4609fb..81b6725323 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/js/script.js
>+++ b/koha-tmpl/opac-tmpl/bootstrap/js/script.js
>@@ -11,7 +11,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" );
>     },
>@@ -44,7 +44,7 @@ $(document).ready(function(){
>     $(".js-show").show();
>     $(".js-hide").hide();
> 
>-    if( $(window).width() < 768 ){
>+    if( $(window).width() < 991 ){
>         facetMenu("hide");
>     }
> 
>-- 
>2.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 29603: 128110 | 129900 | 129967 | 130578 | 135367 | 135368