Implement responsive grid layout for the inscription management form, enhancing mobile and tablet views. Update form fields for better structure and accessibility, including multi-status filters and action buttons. Increment version code to 4.72.807 to reflect these changes.

2026-07-13 17:23:25 -04:00
parent d3bb32eb97
commit 0ea8a48591
3 changed files with 124 additions and 29 deletions
--- a/css/style.css
+++ b/css/style.css
@ -3568,6 +3568,78 @@ a.ms1-trad-link.btn-aide-trad{
    margin-top:0;
 }

+/* MSIN-4401 — Recherche : 1 col mobile, 2 cols tablette, 3 cols bureau. */
+.inscr-gestion-form-grid{
+    display:grid;
+    grid-template-columns:1fr;
+    gap:4px 14px;
+    align-items:start;
+}
+
+.inscr-gestion-form-field{
+    min-width:0;
+}
+
+.inscr-gestion-form-field > .inscr-gestion-label:first-child{
+    margin-top:0;
+}
+
+.inscr-gestion-form-field--checks{
+    display:flex;
+    flex-direction:column;
+    gap:2px;
+    padding-top:4px;
+}
+
+.inscr-gestion-form-field--checks .inscr-gestion-check{
+    margin-top:6px;
+}
+
+.inscr-gestion-form-field--actions{
+    padding-top:4px;
+}
+
+.inscr-gestion-form-field--actions .inscr-gestion-form-actions{
+    margin-top:4px;
+}
+
+@media (min-width:768px){
+    .inscr-gestion-form-grid{
+        grid-template-columns:1fr 1fr;
+    }
+
+    .inscr-gestion-form-field--checks,
+    .inscr-gestion-form-field--actions{
+        grid-column:1 / -1;
+    }
+
+    .inscr-gestion-form-field--checks{
+        flex-direction:row;
+        flex-wrap:wrap;
+        gap:8px 20px;
+        align-items:center;
+        padding-top:8px;
+        border-top:1px solid #eef2f7;
+        margin-top:4px;
+    }
+
+    .inscr-gestion-form-field--checks .inscr-gestion-check{
+        margin-top:0;
+    }
+}
+
+@media (min-width:992px){
+    .inscr-gestion-form-grid{
+        grid-template-columns:repeat(3, minmax(0, 1fr));
+    }
+
+    /* 3 cols égales : prénom/nom/commande puis dossard/épreuve/statut. */
+    .inscr-gestion-form-field--bib,
+    .inscr-gestion-form-field--statut{
+        grid-column:auto;
+    }
+}
+
 .inscr-gestion-check{
    display:flex;
    align-items:center;
--- a/php/inc_fx_inscriptions_gestion.php
+++ b/php/inc_fx_inscriptions_gestion.php
@ -1751,31 +1751,43 @@ function fxInscrGestionRenderList($intEveId, $strLangue, $strBaseUrl, $arrReq) {
    echo '<div class="inscr-gestion-panel__body">';
    echo '<form action="' . fxInscrGestionEsc($strBaseUrl) . '" method="get" class="inscr-gestion-form">';
    echo '<input type="hidden" name="promoteur_eve_id" value="' . fxInscrGestionEsc(base64_encode((string)$intEveId)) . '">';
+    // MSIN-4401 — Grille responsive (1 col mobile, 2–3 cols bureau) comme la fiche Détails.
+    echo '<div class="inscr-gestion-form-grid">';

-    $arrFields = array(
-        'rech_prenom' => 'rech_prenom',
-        'rech_nom' => 'rech_nom',
-        'rech_no_commande' => 'rech_no_commande',
-        'rech_nom_equipe' => 'inscr_gestion_rech_bib_equipe',
-    );
-    foreach ($arrFields as $strKey => $strLbl) {
-        echo '<label class="inscr-gestion-label" for="' . $strKey . '">' . fxInscrGestionEsc(fxInscrGestionT($strLbl)) . '</label>';
-        if ($strKey === 'rech_nom_equipe') {
-            echo '<div class="inscr-gestion-field-block inscr-gestion-field-block--search-bib" data-inscr-field="bib">';
-            fxInscrGestionRenderBibScanBlock($strKey, $strLangue);
-            echo '<div class="inscr-gestion-bib-row">';
-            echo '<input class="form-control form-control-sm rounded-0" type="text" id="' . $strKey . '" name="' . $strKey . '" value="' . fxInscrGestionEsc($arrReq[$strKey]) . '">';
-            echo '<button class="btn btn-secondary btn-sm rounded-0 inscr-gestion-bib-scan-toggle" type="button" aria-expanded="false"'
-                . ' title="' . fxInscrGestionEsc(fxInscrGestionT('inscr_gestion_bib_scan_btn')) . '"'
-                . ' aria-label="' . fxInscrGestionEsc(fxInscrGestionT('inscr_gestion_bib_scan_btn')) . '">';
-            echo '<i class="fa fa-camera" aria-hidden="true"></i>';
-            echo '</button>';
-            echo '</div></div>';
-            continue;
-        }
-        echo '<input class="form-control form-control-sm rounded-0" type="text" id="' . $strKey . '" name="' . $strKey . '" value="' . fxInscrGestionEsc($arrReq[$strKey]) . '">';
-    }
+    echo '<div class="inscr-gestion-form-field">';
+    echo '<label class="inscr-gestion-label" for="rech_prenom">' . fxInscrGestionEsc(fxInscrGestionT('rech_prenom')) . '</label>';
+    echo '<input class="form-control form-control-sm rounded-0" type="text" id="rech_prenom" name="rech_prenom" value="'
+        . fxInscrGestionEsc($arrReq['rech_prenom']) . '">';
+    echo '</div>';

+    echo '<div class="inscr-gestion-form-field">';
+    echo '<label class="inscr-gestion-label" for="rech_nom">' . fxInscrGestionEsc(fxInscrGestionT('rech_nom')) . '</label>';
+    echo '<input class="form-control form-control-sm rounded-0" type="text" id="rech_nom" name="rech_nom" value="'
+        . fxInscrGestionEsc($arrReq['rech_nom']) . '">';
+    echo '</div>';
+
+    echo '<div class="inscr-gestion-form-field">';
+    echo '<label class="inscr-gestion-label" for="rech_no_commande">' . fxInscrGestionEsc(fxInscrGestionT('rech_no_commande')) . '</label>';
+    echo '<input class="form-control form-control-sm rounded-0" type="text" id="rech_no_commande" name="rech_no_commande" value="'
+        . fxInscrGestionEsc($arrReq['rech_no_commande']) . '">';
+    echo '</div>';
+
+    echo '<div class="inscr-gestion-form-field inscr-gestion-form-field--bib">';
+    echo '<label class="inscr-gestion-label" for="rech_nom_equipe">'
+        . fxInscrGestionEsc(fxInscrGestionT('inscr_gestion_rech_bib_equipe')) . '</label>';
+    echo '<div class="inscr-gestion-field-block inscr-gestion-field-block--search-bib" data-inscr-field="bib">';
+    fxInscrGestionRenderBibScanBlock('rech_nom_equipe', $strLangue);
+    echo '<div class="inscr-gestion-bib-row">';
+    echo '<input class="form-control form-control-sm rounded-0" type="text" id="rech_nom_equipe" name="rech_nom_equipe" value="'
+        . fxInscrGestionEsc($arrReq['rech_nom_equipe']) . '">';
+    echo '<button class="btn btn-secondary btn-sm rounded-0 inscr-gestion-bib-scan-toggle" type="button" aria-expanded="false"'
+        . ' title="' . fxInscrGestionEsc(fxInscrGestionT('inscr_gestion_bib_scan_btn')) . '"'
+        . ' aria-label="' . fxInscrGestionEsc(fxInscrGestionT('inscr_gestion_bib_scan_btn')) . '">';
+    echo '<i class="fa fa-camera" aria-hidden="true"></i>';
+    echo '</button>';
+    echo '</div></div></div>';
+
+    echo '<div class="inscr-gestion-form-field">';
    echo '<label class="inscr-gestion-label" for="sel_rech_epreuve">' . fxInscrGestionEsc(fxInscrGestionT('sel_rech_epreuve')) . '</label>';
    echo '<select class="form-control form-control-sm rounded-0" id="sel_rech_epreuve" name="sel_rech_epreuve">';
    echo '<option value="">—</option>';
@ -1785,18 +1797,29 @@ function fxInscrGestionRenderList($intEveId, $strLangue, $strBaseUrl, $arrReq) {
        $strVal = base64_encode((string)$tabEpreuves[$i]['epr_id']);
        echo '<option value="' . fxInscrGestionEsc($strVal) . '"' . $strSel . '>' . fxInscrGestionEsc($strOpt) . '</option>';
    }
-    echo '</select>';
+    echo '</select></div>';

+    echo '<div class="inscr-gestion-form-field inscr-gestion-form-field--statut">';
    // MSIN-4401 — Filtre multi statut de course (tous si aucune sélection).
    fxInscrGestionRenderStatutFilter($arrReq, $strLangue);
+    echo '</div>';

-    echo '<label class="inscr-gestion-check mt-2"><input type="checkbox" name="chk_bib" value="1"' . ($arrReq['chk_bib'] ? ' checked' : '') . '> ' . fxInscrGestionEsc(fxInscrGestionT('chk_bib')) . '</label>';
-    echo '<label class="inscr-gestion-check"><input type="checkbox" name="chk_cancelled" value="1"' . ($arrReq['chk_cancelled'] ? ' checked' : '') . '> ' . fxInscrGestionEsc(fxInscrGestionT('inscr_gestion_chk_cancelled')) . '</label>';
+    echo '<div class="inscr-gestion-form-field inscr-gestion-form-field--checks">';
+    echo '<label class="inscr-gestion-check"><input type="checkbox" name="chk_bib" value="1"'
+        . ($arrReq['chk_bib'] ? ' checked' : '') . '> ' . fxInscrGestionEsc(fxInscrGestionT('chk_bib')) . '</label>';
+    echo '<label class="inscr-gestion-check"><input type="checkbox" name="chk_cancelled" value="1"'
+        . ($arrReq['chk_cancelled'] ? ' checked' : '') . '> '
+        . fxInscrGestionEsc(fxInscrGestionT('inscr_gestion_chk_cancelled')) . '</label>';
+    echo '</div>';

-    echo '<div class="inscr-gestion-form-actions mt-2">';
+    echo '<div class="inscr-gestion-form-field inscr-gestion-form-field--actions">';
+    echo '<div class="inscr-gestion-form-actions">';
    echo '<a class="btn btn-secondary btn-sm rounded-0" href="' . fxInscrGestionEsc(fxInscrGestionSearchResetUrl($strBaseUrl, $intEveId)) . '">'
        . fxInscrGestionEsc(fxInscrGestionT('inscr_gestion_reset_search')) . '</a>';
-    echo '<button class="btn btn-primary btn-sm rounded-0" type="submit" name="btn_recherche" value="1">' . fxInscrGestionEsc(fxInscrGestionT('txt_recherche')) . '</button>';
+    echo '<button class="btn btn-primary btn-sm rounded-0" type="submit" name="btn_recherche" value="1">'
+        . fxInscrGestionEsc(fxInscrGestionT('txt_recherche')) . '</button>';
+    echo '</div></div>';
+
    echo '</div></form></div></details>';

    echo '<div id="inscr-gestion-list" class="inscr-gestion-list-anchor">';
--- a/php/inc_settings.php
+++ b/php/inc_settings.php
@ -7,7 +7,7 @@
 * Constantes *
 *
 **************/
-define('_VERSION_CODE', '4.72.806');
+define('_VERSION_CODE', '4.72.807');
 define('_DATE_CODE', '2026-07-13');
 //MSIN-4290
 define('QR_SECRET_KEY', 'ms1_qr_2026_cle_secrete_longue_et_fixe');