From 3a3ebec2bf18fb6337ba312185ebb8d0eacfcc6d Mon Sep 17 00:00:00 2001
From: stephan <stephan@progiweb.ca>
Date: Fri, 19 Jun 2026 10:03:01 -0400
Subject: [PATCH] Enhance mobile registration interface by introducing
 key-value list rendering functions and updating CSS for improved layout. This
 commit adds new functions to render participant profile details in a
 structured format, enhancing readability and organization. The CSS is updated
 to support the new layout, including adjustments to padding and grid
 structure. The version code is incremented to 4.72.680 to reflect these
 changes, further improving the user experience in mobile registrations.

---
 css/style.css                      |  52 ++++++++++++---
 php/inc_fx_inscriptions_mobile.php | 103 +++++++++++++++++++----------
 php/inc_settings.php               |   2 +-
 3 files changed, 112 insertions(+), 45 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6ac0aca..91b13a5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2730,6 +2730,43 @@ a.ms1-trad-link.btn-aide-trad{
     padding:12px;
 }
 
+.inscr-mobile-kv-list{
+    padding:4px 12px 8px;
+}
+
+.inscr-mobile-kv-row{
+    display:grid;
+    grid-template-columns:minmax(120px, 34%) 1fr;
+    gap:6px 16px;
+    align-items:baseline;
+    padding:4px 0;
+    border-bottom:1px solid #f1f3f5;
+    font-size:13px;
+    line-height:1.35;
+}
+
+.inscr-mobile-kv-row:last-child{
+    border-bottom:none;
+}
+
+.inscr-mobile-kv-row--profile{
+    border-top:1px solid #e9ecef;
+    margin-top:2px;
+    padding-top:6px;
+}
+
+.inscr-mobile-kv-row__label{
+    font-weight:600;
+    color:#6c757d;
+    font-size:12px;
+}
+
+.inscr-mobile-kv-row__value{
+    color:#212529;
+    min-width:0;
+    word-break:break-word;
+}
+
 .inscr-mobile-dl dt{
     font-size:12px;
     font-weight:600;
@@ -2746,15 +2783,6 @@ a.ms1-trad-link.btn-aide-trad{
     font-size:14px;
 }
 
-.inscr-mobile-fiche-profile{
-    border-top:1px solid #eee;
-    margin-top:4px;
-}
-
-.inscr-mobile-dl--profile{
-    padding-top:8px;
-}
-
 .inscr-mobile-bib-row{
     display:flex;
     gap:8px;
@@ -2819,4 +2847,10 @@ a.ms1-trad-link.btn-aide-trad{
         margin-left:0;
         text-align:left;
     }
+
+    .inscr-mobile-kv-row{
+        grid-template-columns:1fr;
+        gap:2px;
+        padding:6px 0;
+    }
 }
diff --git a/php/inc_fx_inscriptions_mobile.php b/php/inc_fx_inscriptions_mobile.php
index 8cbb287..f6d2535 100644
--- a/php/inc_fx_inscriptions_mobile.php
+++ b/php/inc_fx_inscriptions_mobile.php
@@ -209,6 +209,35 @@ function fxInscrMobileBibDisplay($arrRow) {
     return fxShowBibNumber($arrRow['no_bib'], $arrRow['epr_id'], 'participant');
 }
 
+function fxInscrMobileRenderKvListOpen() {
+    echo '<div class="inscr-mobile-kv-list">';
+}
+
+function fxInscrMobileRenderKvListClose() {
+    echo '</div>';
+}
+
+function fxInscrMobileRenderKvRow($strLabel, $strValue, $blnHtml = false, $strExtraClass = '') {
+    if (!$blnHtml && trim((string)$strValue) === '') {
+        return;
+    }
+
+    $strClass = 'inscr-mobile-kv-row';
+    if ($strExtraClass !== '') {
+        $strClass .= ' ' . $strExtraClass;
+    }
+
+    echo '<div class="' . fxInscrMobileEsc($strClass) . '">';
+    echo '<div class="inscr-mobile-kv-row__label">' . fxInscrMobileEsc($strLabel) . '</div>';
+    echo '<div class="inscr-mobile-kv-row__value">';
+    if ($blnHtml) {
+        echo $strValue;
+    } else {
+        echo fxInscrMobileEsc($strValue);
+    }
+    echo '</div></div>';
+}
+
 function fxInscrMobileFetchFicheProfile($arrRow, $strLangue) {
     global $objDatabase;
 
@@ -293,42 +322,49 @@ function fxInscrMobileFetchFicheProfile($arrRow, $strLangue) {
     );
 }
 
-function fxInscrMobileRenderFicheProfileDetails($arrRow, $strLangue) {
+function fxInscrMobileRenderFicheProfileKvRows($arrRow, $strLangue) {
     $tabProfile = fxInscrMobileFetchFicheProfile($arrRow, $strLangue);
+    $blnFirstProfile = true;
 
-    $blnHasRole = ($tabProfile['role'] !== '' && $tabProfile['name'] !== '');
-    $blnHasEmail = ($tabProfile['email'] !== '');
-    $blnHasBirth = ($tabProfile['birth_gender'] !== '');
-    $blnHasQuestions = (count($tabProfile['questions']) > 0);
-
-    if (!$blnHasRole && !$blnHasEmail && !$blnHasBirth && !$blnHasQuestions) {
-        return;
+    if ($tabProfile['role'] !== '' && $tabProfile['name'] !== '') {
+        fxInscrMobileRenderKvRow(
+            $tabProfile['role'],
+            $tabProfile['name'],
+            false,
+            $blnFirstProfile ? 'inscr-mobile-kv-row--profile' : ''
+        );
+        $blnFirstProfile = false;
     }
 
-    echo '<div class="inscr-mobile-fiche-profile">';
-    echo '<dl class="inscr-mobile-dl inscr-mobile-dl--profile">';
-
-    if ($blnHasRole) {
-        echo '<dt>' . fxInscrMobileEsc($tabProfile['role']) . '</dt>';
-        echo '<dd>' . fxInscrMobileEsc($tabProfile['name']) . '</dd>';
+    if ($tabProfile['email'] !== '') {
+        fxInscrMobileRenderKvRow(
+            fxInscrMobileT('inscr_mobile_email'),
+            $tabProfile['email'],
+            false,
+            $blnFirstProfile ? 'inscr-mobile-kv-row--profile' : ''
+        );
+        $blnFirstProfile = false;
     }
 
-    if ($blnHasEmail) {
-        echo '<dt>' . fxInscrMobileEsc(fxInscrMobileT('inscr_mobile_email')) . '</dt>';
-        echo '<dd>' . fxInscrMobileEsc($tabProfile['email']) . '</dd>';
-    }
-
-    if ($blnHasBirth) {
-        echo '<dt>' . fxInscrMobileEsc(fxInscrMobileT('inscr_mobile_birthdate')) . '</dt>';
-        echo '<dd>' . fxInscrMobileEsc($tabProfile['birth_gender']) . '</dd>';
+    if ($tabProfile['birth_gender'] !== '') {
+        fxInscrMobileRenderKvRow(
+            fxInscrMobileT('inscr_mobile_birthdate'),
+            $tabProfile['birth_gender'],
+            false,
+            $blnFirstProfile ? 'inscr-mobile-kv-row--profile' : ''
+        );
+        $blnFirstProfile = false;
     }
 
     foreach ($tabProfile['questions'] as $tabQuestion) {
-        echo '<dt>' . fxInscrMobileEsc($tabQuestion['label']) . '</dt>';
-        echo '<dd>' . fxInscrMobileEsc($tabQuestion['value']) . '</dd>';
+        fxInscrMobileRenderKvRow(
+            $tabQuestion['label'],
+            $tabQuestion['value'],
+            false,
+            $blnFirstProfile ? 'inscr-mobile-kv-row--profile' : ''
+        );
+        $blnFirstProfile = false;
     }
-
-    echo '</dl></div>';
 }
 
 /** Code statut course par défaut (Confirmé). */
@@ -819,15 +855,12 @@ function fxInscrMobileRenderFiche($intEveId, $strLangue, $strBaseUrl, $arrReq, $
 
     echo '<div class="inscr-mobile-fiche-section inscr-mobile-fiche-section--details">';
     fxInscrMobileRenderSectionTitle(fxInscrMobileT('inscr_mobile_details'), 'fa-info-circle');
-    echo '<dl class="inscr-mobile-dl">';
-    echo '<dt>' . fxInscrMobileEsc(fxInscrMobileT('inscr_mobile_epreuve')) . '</dt>';
-    echo '<dd>' . fxInscrMobileEsc(fxInscrMobileEpreuveLabel($arrRow['epr_id'], $strLangue)) . '</dd>';
-    echo '<dt>' . fxInscrMobileEsc(fxInscrMobileT('inscr_mobile_type')) . '</dt>';
-    echo '<dd>' . fxInscrMobileEsc($strDetailsType) . '</dd>';
-    echo '<dt>' . fxInscrMobileEsc(fxInscrMobileT('inscr_mobile_modified')) . '</dt>';
-    echo '<dd>' . fxCheckMAJ($arrRow['pec_id_original'], $intParId, $strLangue) . '</dd>';
-    echo '</dl>';
-    fxInscrMobileRenderFicheProfileDetails($arrRow, $strLangue);
+    fxInscrMobileRenderKvListOpen();
+    fxInscrMobileRenderKvRow(fxInscrMobileT('inscr_mobile_epreuve'), fxInscrMobileEpreuveLabel($arrRow['epr_id'], $strLangue));
+    fxInscrMobileRenderKvRow(fxInscrMobileT('inscr_mobile_type'), $strDetailsType);
+    fxInscrMobileRenderKvRow(fxInscrMobileT('inscr_mobile_modified'), fxCheckMAJ($arrRow['pec_id_original'], $intParId, $strLangue), true);
+    fxInscrMobileRenderFicheProfileKvRows($arrRow, $strLangue);
+    fxInscrMobileRenderKvListClose();
     echo '</div>';
 
     $strStyleEdit = $strStyleCancel = '';
diff --git a/php/inc_settings.php b/php/inc_settings.php
index 35e3625..fbfddf8 100644
--- a/php/inc_settings.php
+++ b/php/inc_settings.php
@@ -7,7 +7,7 @@
  * Constantes *
  *
  **************/
-define('_VERSION_CODE', '4.72.679');
+define('_VERSION_CODE', '4.72.680');
 define('_DATE_CODE', '2026-06-18');
 //MSIN-4290
 define('QR_SECRET_KEY', 'ms1_qr_2026_cle_secrete_longue_et_fixe');