From 1254e508137d3c9753040298495041ab02a6ebc5 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> --- .../prog/css/src/staff-global.scss | 20 ++++ .../prog/en/includes/patron-search.inc | 102 ++++++++---------- 2 files changed, 66 insertions(+), 56 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 bde56089180..a023ec054dc 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -2407,6 +2407,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; @@ -4831,3 +4842,12 @@ div .suggestion_note { border-bottom-right-radius: 5px; } } + + +@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 c481838b213..0b729d02acc 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 %] @@ -55,42 +53,34 @@ <option value="[% l.branchcode | html %]">[% l.branchname | html %]</option> [% 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 %] <option value="[% category.categorycode | html %]">[% category.description | html %]</option> [% 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> @@ -100,17 +90,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: %] @@ -924,7 +914,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"> @@ -934,7 +924,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.44.0