From 439853757e1499e04b7821af81c0a933dd7aea41 Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Date: Mon, 4 Mar 2024 14:18:21 +0000
Subject: [PATCH] Bug 36221: OPAC Styling

Test plan, dont apply patches yet:
1) Enable ILLModule
2) Create a new OPAC ILL request, visit:
<opac_url>/cgi-bin/koha/opac-illrequests.pl?method=create&backend=Standard
3) Notice the style. Apply patches. Repeat

Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Victor Grousset/tuxayo <victor@tuxayo.net>
---
 Koha/ILL/Backend/opac-includes/create.inc        |  1 +
 .../Backend/shared-includes/custom_fields.inc    | 16 +++++++++++++++-
 .../shared-includes/form_input_helpers.inc       | 12 ++++++++++--
 Koha/ILL/Backend/shared-includes/shared.js       |  8 ++++++--
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/Koha/ILL/Backend/opac-includes/create.inc b/Koha/ILL/Backend/opac-includes/create.inc
index a00ab33185..906f1cc821 100644
--- a/Koha/ILL/Backend/opac-includes/create.inc
+++ b/Koha/ILL/Backend/opac-includes/create.inc
@@ -16,6 +16,7 @@
 <p>Unhandled error</p>
 [% END %]
 [% END %]
+[% SET opac = whole.value.other.opac %]
 
 [% IF whole.stage == "form" %]
 <h2>Create a manual ILL request</h2>
diff --git a/Koha/ILL/Backend/shared-includes/custom_fields.inc b/Koha/ILL/Backend/shared-includes/custom_fields.inc
index cfd3fec65b..0ab4a51c6b 100644
--- a/Koha/ILL/Backend/shared-includes/custom_fields.inc
+++ b/Koha/ILL/Backend/shared-includes/custom_fields.inc
@@ -6,7 +6,13 @@
         [% i = 0 %]
         [% FOREACH key IN keys %]
             <li class="form-horizontal">
-                <input type="text" class="custom-name" name="custom_key" value="[% key | html %]"><input type="text" name="custom_value" id="custom-value" value="[% values.$i | html %]">
+                [% IF opac %]
+                    <input type="text" placeholder="key" class="form-control input-fluid custom-field-input custom-name" name="custom_key" value="[% key | html %]">
+                    <input type="text" placeholder="value" class="form-control input-fluid custom-field-input" name="custom_value" id="custom-value" value="[% values.$i | html %]">
+                [% ELSE %]
+                    <input type="text" class="custom-name" name="custom_key" value="[% key | html %]">
+                    <input type="text" name="custom_value" id="custom-value" value="[% values.$i | html %]">
+                [% END %]
                 <button value="[% i | html %]" name="custom_delete" type="submit" class="btn btn-danger btn-sm delete-new-field">
                     <span class="fa fa-delete"></span>Delete
                 </button></li>
@@ -20,3 +26,11 @@
         Add new field
     </button>
 </fieldset>
+
+<style>
+.custom-field-input {
+    width: 25%;
+    display: inline-block;
+    margin-left: 0.5em;
+}
+</style>
diff --git a/Koha/ILL/Backend/shared-includes/form_input_helpers.inc b/Koha/ILL/Backend/shared-includes/form_input_helpers.inc
index 1ae8006bbd..8928f791e6 100644
--- a/Koha/ILL/Backend/shared-includes/form_input_helpers.inc
+++ b/Koha/ILL/Backend/shared-includes/form_input_helpers.inc
@@ -1,14 +1,22 @@
 [% BLOCK ill_text_input_field %]
     <li>
       <label for="[% id | html %]">[% label | html %][% IF required %]*[% END %]</label>
-      <input type="[% type | html %]" name="[% id | html %]" id="[% id | html%]" value="[% value | html %]" />
+      [% IF opac %]
+        <input class="form-control input-fluid" type="[% type | html %]" name="[% id | html %]" id="[% id | html%]" value="[% value | html %]" />
+      [% ELSE %]
+        <input type="[% type | html %]" name="[% id | html %]" id="[% id | html%]" value="[% value | html %]" />
+      [% END %]
     </li>
     [% SET required = 0 %]
 [% END %]
 
 [% BLOCK ill_select_field %]
       <label for="[% id | html %]">[% label | html %][% IF required %]*[% END %]</label>
-      <select name="[% id | html %]" id="[% id | html %]">
+      [% IF opac %]
+        <select class="form-control input-fluid" name="[% id | html %]" id="[% id | html %]">
+      [% ELSE %]
+        <select name="[% id | html %]" id="[% id | html %]">
+      [% END %]
         [% content | $raw %]
       </select>
       [% SET required = 0 %]
diff --git a/Koha/ILL/Backend/shared-includes/shared.js b/Koha/ILL/Backend/shared-includes/shared.js
index ab6e885b2c..eb4b361c78 100644
--- a/Koha/ILL/Backend/shared-includes/shared.js
+++ b/Koha/ILL/Backend/shared-includes/shared.js
@@ -1,10 +1,14 @@
 var core = [ [% whole.core %] ];
+var opac = [ [% opac %] ];
 document.addEventListener('DOMContentLoaded', function() {
     $('#add-new-fields').click(function(e) {
         e.preventDefault();
         var row = '<li class="form-horizontal">' +
-            '<input type="text" class="custom-name" name="custom_key">' +
-            '<input type="text" id="custom-value" name="custom_value"> '+
+            '<input type="text" class="custom-name ' +
+            ( opac ? 'form-control input-fluid custom-field-input' : '') +
+            '" name="custom_key" placeholder="key">' +
+            '<input type="text" id="custom-value" name="custom_value" class="' +
+            ( opac ? 'form-control input-fluid custom-field-input' : '') +'" placeholder="value"> ' +
             '<button type="button" class="btn btn-danger btn-sm ' +
             'delete-new-field">' +
             '<span class="fa fa-delete">' +
-- 
2.47.0