From 651156c01aabc9ddb5985c05b483374f6e509c4b 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>
(cherry picked from commit cd6ccd828a0578b0d1558e2d79916d2823a9a926)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
---
 .../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 f8159086fd..b9545e1106 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -192,6 +192,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 ada84161e9..d6767598b5 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
@@ -113,7 +113,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