From 32fc22ef9bbb2e5e5faab0d9a1528984cab6774f Mon Sep 17 00:00:00 2001
From: Lucas Gass <lucas@bywatersolutions.com>
Date: Fri, 19 May 2023 15:28:22 +0000
Subject: [PATCH] Bug 33785: Some UI fixes to the orderreceive.tt modal

To test:
1. Apply patch
2. Follow the steps in Bug 8179 to generate the modal on orderreceive.tt
3. Check that the following issues have been corrected:
    -The select2 dropdown for #bookfund is splitting onto multiple lines in the modal.
    -The modal header has a green line extending through it.
    -At smaller screen sizes the modal close button ( upper right corner of modal ) drops down below the h4. It should stay on the same line as the h4.
    -The modal is not centered on the screen.
    -The toogle inactive/active checkbox can become it's own list element.
    -The #current-fund can become a hint

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/en/modules/acqui/orderreceive.tt     | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/orderreceive.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/orderreceive.tt
index b2ab673a260..a2281a6fa53 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/orderreceive.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/orderreceive.tt
@@ -12,7 +12,7 @@
 [% INCLUDE 'doc-head-close.inc' %]
     <style>
         @media (min-width: 1200px) {
-            #receive-modal, #receive-modal .modal-content {
+            #receive-modal, #receive-modal {
                 width: 98%;
             }
         }
@@ -51,6 +51,17 @@
         .modal-body textarea {
             vertical-align: text-top;
         }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .modal-header::before,
+        .modal-header::after {
+            content: none;
+        }
+
     </style>
 </head>
 
@@ -112,9 +123,9 @@
 
     <div class="modal fade" id="order_edit" tabindex="-1" role="dialog" aria-labelledby="Order edit">
         <div id="receive-modal" class="modal-dialog modal-lg" role="document">
-            <div class="modal-content modal-lg">
-                <div class="modal-header row">
-                    <h4 class="col-md-11 modal-title"></h4>
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="col-md-10 modal-title"></h4>
                     <button type="button" class="close col-md-1" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 </div>
                 <div class="modal-body">
@@ -300,12 +311,14 @@
                                         [% END %]
                                         </select>
                                         <span class="required">Required</span>
-                                        <label for="showallbudgets" style="float:none;">&nbsp;Show inactive:</label>
-                                        <input type="checkbox" id="showallbudgets" />
                                     </li>
                                     <li>
                                         <label>&nbsp;</label>
-                                        <span id="current-fund"></span>
+                                        <span id="current-fund" class="hint"></span>
+                                    </li>
+                                    <li>
+                                        <label for="showallbudgets">&nbsp;Show inactive:</label>
+                                        <input type="checkbox" id="showallbudgets" />
                                     </li>
                                     <li>
                                         <label for="creator">Ordered by: </label>
@@ -1122,7 +1135,7 @@
                 if (row.fund_id != row.fund.fund_id) {
                     $("#bookfund").val(row.fund_id);
                 }
-                $("#bookfund").select2({ width: '100%' });
+                $("#bookfund").select2({ width: '50%' });
                 $("#current-fund").html(FUNC_CUR.format(row.fund.budget.budget_period_description, row.fund.name));
                 $("#creator").html([row.creator.surname, row.creator.firstname].filter(function(name){return name}).join(', ')+" ("+row.creator.patron_id+')')
                 $("#quantity_to_receive").val(row.quantity).prop('readonly', !row.subscription_id);
-- 
2.40.1