From cd6ccd828a0578b0d1558e2d79916d2823a9a926 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 16 Mar 2021 16:00:57 +0000
Subject: [PATCH] Bug 27889: Adjust responsive width of OPAC advanced search
 form

This patch tweaks the CSS for the advanced search form in the OPAC so
that it adjusts well at various browser widths, including preventing the
form from taking up the whole width of the page at higher browser
widths.

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).

- In the OPAC, go to the advanced search page.
- Test the appearance of the fields in the first "Search for" section,
  confirming that everything adjusts well at all widths large and small.
- Click the "More options" button and test that configuration as well.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../opac-tmpl/bootstrap/css/src/_responsive.scss      | 11 ++++++++---
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss       |  4 ++++
 .../opac-tmpl/bootstrap/en/modules/opac-advsearch.tt  |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
index e6676fd76b..aadfecc77a 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
@@ -246,6 +246,10 @@
     .no-image {
         display: none;
     }
+
+    .search-term-input {
+        margin-bottom: 5px;
+    }
 }
 
 @media only screen and ( max-width: 700px ) {
@@ -294,9 +298,6 @@
             margin: 5px 0;
         }
 
-
-    }
-    .advanced-search-terms {
         &.extended {
             .search-term-row {
                 grid-template-columns: 10% 30% 50% 10%;
@@ -504,6 +505,10 @@
         padding: 5px;
     }
 
+    #booleansearch {
+        width: unset;
+    }
+
     .pg_menu {
         li {
             a {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 37c843a918..e960e87aea 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -205,6 +205,10 @@ th {
     }
 }
 
+#booleansearch {
+    width: 80%;
+}
+
 #advsearch_limits,
 #subtypes {
     label {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
index 3242b208b5..3db62831e8 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
@@ -114,7 +114,7 @@
                                             </select> <!-- /#search-field_[% loop.index | html %] -->
                                         </div> <!-- .search-term-input -->
                                         <div class="search-term-input">
-                                            <input class="form-control" type="text" size="30" name="q" title="Enter search terms" value="" />
+                                            <input class="form-control" type="text" size="" name="q" title="Enter search terms" value="" />
                                         </div> <!-- .search-term-input -->
                                         [% IF ( expanded_options ) %]
                                             <div class="search-term-input">
-- 
2.39.5