From 681b8432468056c75f86edb6e6179a7b04f87b57 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Joonas=20Kylm=C3=A4l=C3=A4?= <joonas.kylmala@iki.fi>
Date: Tue, 21 Sep 2021 16:32:00 +0000
Subject: [PATCH] Bug 28934: Make the OPAC registration form design consistent

The gender/sex and GDPR inputs were slightly misaligned (by
1.5em). Now they are aligned with the other inputs which have a width
of 10em (9em width + margin 1em). The label assignments and required
attributes for input elements are made also consistent.

To test:
 1) Enable GDPR_Policy syspref
 2) Apply patch, run "yarn build --view opac", restart plack
 3) Go to /cgi-bin/koha/opac-memberentry.pl
 4) Check that the GDPR input box shows the required text now in red
    color
 5) Check that the alignment of sex/gender and GDPR input matches with
    the other inputs perfectly.

Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
---
 .../opac-tmpl/bootstrap/css/src/opac.scss     | 23 +++++++++++++++++--
 .../bootstrap/en/modules/opac-memberentry.tt  | 13 ++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 96d6677f0b..aaab5a7cf0 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -699,6 +699,13 @@ fieldset {
             font-weight: bold;
         }
 
+        div.label {
+            display: inline-block;
+            width: 9rem;
+            margin-right: 1rem;
+            float: none;
+        }
+
         label,
         .label {
             float: left;
@@ -708,10 +715,19 @@ fieldset {
             width: 9rem;
         }
 
+        label.checkbox-label {
+            float: none;
+            margin-right: 0;
+            font-weight: normal;
+            text-align: left;
+            width: auto;
+        }
+
         label {
             &.error {
                 color: #C00;
                 float: none;
+                display: inline;
                 font-style: italic;
                 font-weight: normal;
                 margin-left: 1rem;
@@ -749,6 +765,7 @@ fieldset {
             }
         }
 
+
         li {
             clear: left;
             float: left;
@@ -757,14 +774,16 @@ fieldset {
             width: 100%;
 
             &.lradio {
-                padding-left: 8.5em;
                 width: auto;
 
                 label {
                     float: none;
-                    margin: 0 0 0 1em;
+                    margin: 0;
                     width: auto;
                 }
+                input {
+                    margin-right: 1rem;
+                }
             }
         }
 
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 65f2ee6108..b279717860 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt
@@ -373,6 +373,7 @@
 
                                         [% UNLESS hidden.defined('sex') %]
                                             <li class="lradio">
+                                                <div class="label"></div>
                                                 <label for="sex-female" class="radio inline"><span class="patronsex-female">Female:</span></label>
                                                 [% IF borrower.sex == 'F' %]
                                                     <input type="radio" name="borrower_sex" id="sex-female" value="F" checked="checked" />
@@ -814,11 +815,11 @@
                                     </div>
 
                                     <ol>
-                                        <li><label for="borrower_password" class="[% required.password | html %]">Password</label>
+                                        <li><label for="password" class="[% required.password | html %]">Password:</label>
                                             <input type="password" name="borrower_password" id="password" class="[% required.password | html %]" />
                                             <div class="required_label [% required.password | html %]">Required</div>
                                         </li>
-                                        <li><label for="borrower_password2" class="[% required.password | html %]">Confirm password</label>
+                                        <li><label for="password2" class="[% required.password | html %]">Confirm password:</label>
                                             <input type="password" name="borrower_password2" id="password2" />
                                             <div class="required_label [% required.password | html %]">Required</div>
                                         </li>
@@ -901,7 +902,13 @@
                                     <legend>GDPR consent</legend>
                                     <ol>
                                     <li>
-                                        <label></label><span><input type="checkbox" name="borrower_gdpr_proc_consent" value="agreed"> I agree with your processing of my personal data as outlined in the <a target="_blank" href="[% Koha.Preference('PrivacyPolicyURL') | url %]">privacy policy</a>. <div class="required">Required</div></span>
+                                        <div class="label"></div>
+                                        <label class="checkbox-label" for="borrower_gdpr_proc_consent">
+                                            <input type="checkbox" name="borrower_gdpr_proc_consent" id="borrower_gdpr_proc_consent" class="required" value="agreed">
+                                            I agree with your processing of my personal data as outlined in the <a target="_blank" href="[% Koha.Preference('PrivacyPolicyURL') | url %]">privacy policy</a>.
+                                        </label>
+                                        <label class="error" for="borrower_gdpr_proc_consent" style="display: none;"></label>
+                                        <div class="required_label required">Required</div>
                                     </li>
                                     </ol>
                                 </fieldset>
-- 
2.20.1