From 518b3aa4a3631b8ec7c6a700e3df1f9076d00213 Mon Sep 17 00:00:00 2001
From: Lucas Gass <lucas@bywatersolutions.com>
Date: Wed, 6 Mar 2024 23:44:08 +0000
Subject: [PATCH] Bug 35862: Display modal search results to the right of form
 above 1200px

To test:
1. Apply patch
2. Rebuild CSS ( yarn build )
3. Look at some of the places where there is a modal patron search.
    -suggestion/suggestion.pl: Set to patron
    -members/memberentry.pl: Add guarantor

4. Make sure the modal looks good before and after you have searched for a patron.
5. Play with many different screen sizes, ensuring everything looks good and makes sense.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
---
 .../prog/css/src/staff-global.scss            |  21 +++-
 .../prog/en/includes/patron-search.inc        | 102 ++++++++----------
 2 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 183e5d65bb..28beabafc7 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -2412,6 +2412,17 @@ td.bundle {
     pointer-events: auto;
 }
 
+.patron_search_modal {
+    .modal-body {
+        display: flex;
+        column-gap: 2em;
+    }
+
+    .search_results_block {
+        flex-grow: 1;
+    }
+}
+
 #cartDetails {
     background-color: #352C2E;
     box-shadow: 1px 1px 3px 0 #666;
@@ -4863,4 +4874,12 @@ div .suggestion_note {
     bottom: 40px;
     right: 40px;
     z-index: 1000;
-}
\ No newline at end of file
+}
+
+@media only screen and ( max-width: 1200px ) {
+    .patron_search_modal {
+        .modal-body {
+            display: block;
+        }
+    }
+}
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
index 6d4b6e0cf0..2c934936d3 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
@@ -29,23 +29,21 @@
 [%# - search_type: select 'contains' or 'starts with' %]
 [%- searchtype = searchtype || Koha.Preference('DefaultPatronSearchMethod') -%]
 [% BLOCK patron_search_filters %]
-    <form method="get" class="patron_search_form">
-        <fieldset class="brief">
-            <h3>Search for patron</h3>
-            <ol>
-                <li>
-                    <label>
-                        Search:
+    <aside>
+        <form method="get" class="patron_search_form">
+            <fieldset class="brief">
+                <h3>Search for patron</h3>
+                <ol>
+                    <li>
+                        <label>Search:</label>
                         <input type="text" class="search_patron_filter" value="[% search_filter | html %]" class="focus" />
-                    </label>
-                </li>
-
-                [% FOR f IN filters %]
-                    [% SWITCH f %]
-                    [% CASE 'branch' %]
-                        <li>
-                            <label>
-                                Library:
+                    </li>
+
+                    [% FOR f IN filters %]
+                        [% SWITCH f %]
+                        [% CASE 'branch' %]
+                            <li>
+                                <label>Library:</label>
                                 <select class="branchcode_filter">
                                     [% SET libraries = Branches.all( only_from_group => 1 ) %]
                                     [% IF libraries.size != 1 %]
@@ -59,12 +57,10 @@
                                         [% END %]
                                     [% END %]
                                 </select>
-                            </label>
-                        </li>
-                    [% CASE 'category' %]
-                        <li>
-                            <label>
-                                Category:
+                            </li>
+                        [% CASE 'category' %]
+                            <li>
+                                <label>Category:</label>
                                 <select class="categorycode_filter">
                                     <option value="">Any</option>
                                     [% FOREACH category IN Categories.limited.unblessed %]
@@ -75,30 +71,24 @@
                                         [% END %]
                                     [% END %]
                                 </select>
-                            </label>
-                        </li>
-                    [% CASE 'sort1' %]
-                        <li>
-                            <label>
-                                Sort 1:
+                            </li>
+                        [% CASE 'sort1' %]
+                            <li>
+                                <label>Sort 1:</label>
                                 [% PROCESS 'av-build-dropbox.inc' no_id => 1, name="sort1_filter", category="Bsort1", empty=1, size = 20 %]
-                            </label>
-                        </li>
-                    [% CASE 'sort2' %]
-                        <li>
-                            <label>
-                                Sort 2:
-                                [% PROCESS 'av-build-dropbox.inc' no_id => 1, name="sort2_filter", category="Bsort2", empty=1, size = 20 %]
-                            </label>
-                        </li>
-                    [% CASE 'search_field' %]
-                        <li>
-                            [% INCLUDE patron_fields_dropdown %]
-                        </li>
-                    [% CASE 'search_type' %]
-                        <li>
-                            <label>
-                                Search type:
+                            </li>
+                        [% CASE 'sort2' %]
+                            <li>
+                                <label>Sort 2:</label>
+                                    [% PROCESS 'av-build-dropbox.inc' no_id => 1, name="sort2_filter", category="Bsort2", empty=1, size = 20 %]
+                            </li>
+                        [% CASE 'search_field' %]
+                            <li>
+                                [% INCLUDE patron_fields_dropdown %]
+                            </li>
+                        [% CASE 'search_type' %]
+                            <li>
+                                <label>Search type:</label>
                                 <select name="searchtype" class="searchtype_filter">
                                     [% IF searchtype == "starts_with" %]
                                         <option value='starts_with' selected="selected">Starts with</option>
@@ -108,17 +98,17 @@
                                         <option value="contains" selected="selected">Contains</option>
                                     [% END %]
                                 </select>
-                            </label>
-                        </li>
+                            </li>
+                        [% END %]
                     [% END %]
-                [% END %]
-            </ol>
-            <fieldset class="action">
-                <input type="submit" class="btn btn-primary" value="Search" />
-                <input type="button" value="Clear" class="btn btn-default clear_search" />
+                </ol>
+                <fieldset class="action">
+                    <input type="submit" class="btn btn-primary" value="Search" />
+                    <input type="button" value="Clear" class="btn btn-default clear_search" />
+                </fieldset>
             </fieldset>
-        </fieldset>
-    </form>
+        </form>
+    </aside>
 [% END %]
 
 [%# Display the table with: %]
@@ -928,7 +918,7 @@
 
     [% search_results_block_id = patron_search_modal_id _ '_searchresults' %]
 
-    <div id="[% patron_search_modal_id | html %]" class="modal modal-full" tabindex="-1" role="dialog" aria-labelledby="patronSearchLabel" aria-hidden="true" data-backdrop="">
+    <div id="[% patron_search_modal_id | html %]" class="modal modal-full patron_search_modal" tabindex="-1" role="dialog" aria-labelledby="patronSearchLabel" aria-hidden="true" data-backdrop="">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
@@ -938,7 +928,7 @@
                 <div class="modal-body">
                     [% PROCESS patron_search_filters filters => ['branch','category','sort1','sort2'] %]
 
-                    <div id="[% search_results_block_id | html %]"> <!-- FIXME removed style from #searchresults, is that bad? -->
+                    <div id="[% search_results_block_id | html %]" class="search_results_block"> <!-- FIXME removed style from #searchresults, is that bad? -->
                         [% IF columns.grep('checkbox').size %]
                             <div class="searchheader fh-fixedHeader" style="display:none;">
                                 <div>
-- 
2.39.5