From 2256e2017f06492c4036080aa29a6adb85e6b2ba Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 7 Nov 2023 19:06:13 +0000
Subject: [PATCH] Bug 35144: Update style of 'Required' label for OPAC patron
 attributes

This patch makes some changes to style and markup of the part of the
OPAC patron entry form which displays patron attribute entry fields.

To test, apply the patch and rebuild the OPAC CSS.

- Create at least two patron attributes which have both "Display in
  OPAC" and "Editable in OPAC" checked: One which is linked to an
  authorized value, one which isn't. At least one attribute should be
  mandatory. At least one attribute should be repeatable.
- Test the form using either patron self-registration or by logging in
  to the OPAC and clicking the "Personal details" link in the sidebar.
- Check the appearance of required fields in the form, including the
  mandatory patron attributes.
- Confirm that the "Clear" and "New" controls look good and work
  correctly, including fields cloned with the "New" button.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
(cherry picked from commit dd70e43b66fc2a887c5a5d6afc165ebf20469354)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
(cherry picked from commit e1dc14bb68d1a27447f6c09979dd75b184ff467a)
Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
---
 .../opac-tmpl/bootstrap/css/src/opac.scss     | 29 ++++++++++++-------
 .../bootstrap/en/modules/opac-memberentry.tt  | 21 ++++++++------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 19bfa7b472..06460cb399 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -774,19 +774,28 @@ th {
     padding: 3px 4px;
 }
 
-div {
-    &.required_label {
-        display: none;
+.required_label {
+    display: none;
 
-        &.required {
-            color: #C00;
-            display: block;
-            font-size: 95%;
-            margin-left: 10rem;
-            margin-top: 3px;
-        }
+    &.required {
+        color: #C00;
+        display: block;
+        font-size: 95%;
+        margin-left: 10rem;
+        margin-top: 3px;
     }
+}
 
+.attr-control {
+    margin-left: 9.5rem;
+
+    .required {
+        display: inline-block;
+        margin-left: 0;
+    }
+}
+
+div {
     &.rows {
         clear: left;
         float: left;
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt
index 86890eeccc..af9690eeab 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt
@@ -960,13 +960,15 @@
                                                             [% ELSE %]
                                                                 <textarea rows="2" cols="30" id="[% form_id | html %]" name="patron_attribute_value">[% pa_value | html %]</textarea>
                                                             [% END %]
-                                                            [% IF pa.type.mandatory %]
-                                                                <div class="required">Required</div>
-                                                            [% END %]
-                                                            <a href="#" class="clear-attribute">Clear</a>
-                                                            [% IF ( pa.type.repeatable ) %]
-                                                            <a href="#" class="clone-attribute">New</a>
-                                                            [% END %]
+                                                            <div class="attr-control">
+                                                                <a href="#" class="btn btn-sm btn-link clear-attribute"><i class="fa fa-remove" aria-hidden="true"></i> Clear</a>
+                                                                [% IF ( pa.type.repeatable ) %]
+                                                                    <a href="#" class="btn btn-sm btn-link clone-attribute"><i class="fa fa-plus" aria-hidden="true"></i> New</a>
+                                                                [% END %]
+                                                                [% IF pa.type.mandatory %]
+                                                                    <span class="required_label required">Required</span>
+                                                                [% END %]
+                                                            </div>
                                                         [% ELSE %]
                                                             [% IF ( pa.type.authorised_value_category ) %]
                                                                 [% AuthorisedValues.GetByCode( pa.type.authorised_value_category, pa_value, 1 ) | html_line_break %]
@@ -1185,13 +1187,14 @@
 
             $(".patron-attributes").on( 'click', '.clear-attribute', function(e) {
                 e.preventDefault();
-                $(this).parent()
+                $(this).closest("li")
                     .find('textarea').val("").end()
                     .find('select').val("").end();
             } );
 
             $(".patron-attributes").on( 'click', '.clone-attribute', function() {
-                var clone = $(this).parent().clone().insertAfter( $(this).parent() );
+                let li = $(this).closest("li");
+                var clone = li.clone().insertAfter( li );
 
                 var newId = 50 + parseInt(Math.random() * 100000);
                 $('input[type!="hidden"],select,textarea', clone).attr('id', 'patron-attr-' + newId).attr('value', '');
-- 
2.39.5