Attachment 130578 Details for Bug 29603 – Bug 29603: Fix responsive behavior of facets menu in OPAC search results

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

Bug-29603-Fix-responsive-behavior-of-facets-menu-i.patch (text/plain), 5.47 KB, created by Katrin Fischer on 2022-02-14 21:26:17 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Katrin Fischer

Created: 2022-02-14 21:26:17 UTC

Size: 5.47 KB

patch

obsolete

>From d39e3d5d73099a6662dff2d70abaec2e2c379c46 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: 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        | 76 +++++++++++--------
> .../bootstrap/en/modules/opac-results.tt      | 14 +---
> koha-tmpl/opac-tmpl/bootstrap/js/global.js    |  4 +-
> 3 files changed, 51 insertions(+), 43 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>index ad2013e717..0e5f462fbf 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>@@ -381,10 +381,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;
>@@ -393,6 +423,13 @@
>                 border-bottom: 0;
>                 font-weight: normal;
>                 padding: .7em .2em;
>+
>+                &::before {
>+                    content: "\f0da";
>+                    display: inline-block;
>+                    font-family: FontAwesome;
>+                    width: 1em;
>+                }
>             }
>         }
> 
>@@ -400,7 +437,7 @@
>             padding: .4em;
>         }
> 
>-        h5 {
>+        h3 {
>             margin: .2em;
>         }
> 
>@@ -409,36 +446,15 @@
>         }
>     }
> 
>-    #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;
>-    }
>-
>-    #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;
>+        &::before {
>+            content: "\f0d7";
>+            display: inline-block;
>+            font-family: FontAwesome;
>+            width: 1em;
>         }
>     }
> }
>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 28b4bdef6c..98106fdcd7 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
>@@ -100,18 +100,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/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
>index 1d46a3f271..37fbabe88a 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
>+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
>@@ -160,7 +160,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" );
>     },
>@@ -194,7 +194,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