MSIN-4467 — Refactor CSS for bib race summary and team mode components, enhancing layout with flexbox and improving responsiveness. Update JavaScript to handle team mode selection and display. Increment version code to 4.72.846.

2026-07-21 11:49:44 -04:00
parent 4bc61c370c
commit 9732763fc8
4 changed files with 207 additions and 68 deletions
--- a/css/style.css
+++ b/css/style.css
@ -1983,10 +1983,8 @@ ul.ms1-menu-compte li a:hover, ul.ms1-menu-compte li a:active {
 }

 .epr-row-detail{
-    display:grid;
-    grid-template-columns:minmax(148px, 178px) minmax(0, 1fr);
-    gap:12px;
-    align-items:start;
+    /* MSIN-4467 — Le détail utilise toute la largeur, sans colonne d'identité. */
+    display:block;
    padding:12px;
    border-top:1px solid #dbe4f3;
 }
@ -2019,17 +2017,59 @@ ul.ms1-menu-compte li a:hover, ul.ms1-menu-compte li a:active {
 .bib-race-summary__identity{
    display:flex;
    flex-direction:column;
-    gap:2px;
+    gap:4px;
    min-width:0;
 }

-.bib-race-summary__identity strong{
+.bib-race-summary__identity-head{
+    display:flex;
+    align-items:center;
+    gap:7px;
+    min-width:0;
+}
+
+.bib-race-summary__identity-head strong{
+    min-width:0;
+    overflow:hidden;
    color:#1e3a6e;
    font-size:14px;
    line-height:1.3;
+    text-overflow:ellipsis;
+    white-space:nowrap;
 }

-.bib-race-summary__identity span{
+.bib-race-summary__identity-head .bib-view-range-cell{
+    flex:0 0 auto;
+}
+
+.bib-race-summary-view{
+    display:inline-flex;
+    align-items:center;
+    justify-content:center;
+    min-width:26px;
+    height:24px;
+    padding:2px 6px;
+    border:1px solid #b8c9e8;
+    background:#fff;
+    color:#2f5fd0;
+}
+
+.bib-race-summary-view:hover,
+.bib-race-summary-view:focus{
+    border-color:#8fa8d8;
+    background:#e8f0fc;
+    color:#1e4fbf;
+}
+
+.bib-race-summary__metadata{
+    display:flex;
+    align-items:center;
+    flex-wrap:wrap;
+    gap:3px 6px;
+    min-width:0;
+}
+
+.bib-race-summary__metadata span{
    overflow:hidden;
    color:#6c757d;
    font-size:11px;
@ -2037,6 +2077,12 @@ ul.ms1-menu-compte li a:hover, ul.ms1-menu-compte li a:active {
    white-space:nowrap;
 }

+.bib-race-summary__metadata span + span::before{
+    content:"·";
+    margin-right:6px;
+    color:#9aa4b2;
+}
+
 .bib-race-summary__group{
    display:flex;
    flex-direction:column;
@ -2279,6 +2325,42 @@ ul.ms1-menu-compte li a:hover, ul.ms1-menu-compte li a:active {
    overflow:hidden;
 }

+.bib-team-mode-step{
+    padding:12px 14px;
+    border-bottom:1px solid #b8c9e8;
+    background:#f8fafc;
+}
+
+.bib-team-mode-step .team-mode-box{
+    margin:0;
+    padding:0;
+    border:0;
+    background:transparent;
+}
+
+.bib-team-mode-step .team-mode-title{
+    margin:0 0 8px;
+    color:#1e3a6e;
+    font-size:13px;
+    font-weight:700;
+}
+
+.bib-team-mode-options{
+    display:flex;
+    align-items:center;
+    flex-wrap:wrap;
+    gap:8px 24px;
+}
+
+.bib-team-mode-options .team-mode-option{
+    align-items:center;
+    margin:0;
+}
+
+.bib-team-mode-options .team-mode-option input[type="radio"]{
+    margin-top:0;
+}
+
 .epr-col-right .epr-block{
    border:none;
    border-radius:0;
@ -3278,6 +3360,26 @@ a.ms1-trad-link.btn-aide-trad{
    gap:10px;
 }

+.bib-assignment-step__heading{
+    flex:1 1 auto;
+    min-width:0;
+}
+
+.bib-assignment-step__actions{
+    flex:0 0 auto;
+    margin-left:auto;
+}
+
+.bib-assignment-step__actions .epr-identity-reset-all{
+    padding:0;
+    border:0;
+    background:transparent;
+}
+
+.bib-assignment-step__actions .epr-identity-reset-all .btn-reset-all-epr{
+    width:auto;
+}
+
 .bib-assignment-step__number{
    display:inline-flex;
    align-items:center;
@ -3385,7 +3487,7 @@ a.ms1-trad-link.btn-aide-trad{
 /* MOBILE */
@media (max-width:768px){
    .epr-row-detail{
-        grid-template-columns: 1fr;
+        padding:8px;
    }

    .bib-race-summary{
@ -3401,6 +3503,15 @@ a.ms1-trad-link.btn-aide-trad{
        grid-row:2;
    }

+    .bib-assignment-step__header{
+        flex-wrap:wrap;
+    }
+
+    .bib-assignment-step__actions{
+        flex:1 0 100%;
+        margin-left:36px;
+    }
+
    .bib-race-summary__group--bibs{
        grid-row:3;
    }
--- a/js/v2/bib-assignments.js
+++ b/js/v2/bib-assignments.js
@ -3686,7 +3686,22 @@
                            + '&epr_id=' + encodeURIComponent(box.dataset.eprId)
                            + '&team_mode=' + encodeURIComponent(teamRadio.value)
                            + bibAjaxLangSuffix()
-                    }, { loader: false });
+                    }, { loader: false })
+                        .then(function (res) { return res.json(); })
+                        .then(function (data) {
+                            if (!data.success) {
+                                alert(data.message || bibJs('jsErrGeneric'));
+                                return;
+                            }
+
+                            let row = teamRadio.closest('.epr-row');
+                            let summary = row ? row.querySelector('.bib-race-summary-team-mode') : null;
+                            let optionLabel = teamRadio.closest('.team-mode-option');
+                            let optionText = optionLabel ? optionLabel.querySelector('span') : null;
+                            if (summary && optionText) {
+                                summary.textContent = optionText.textContent.trim();
+                            }
+                        });

                    return;
                }
--- a/php/inc_fx_promoteur.php
+++ b/php/inc_fx_promoteur.php
@ -5551,6 +5551,23 @@ function fxShowBibTool4($str_code, $int_eve_id, $strLangue){
           $tabQuantites = fxGetQuantites((int)$tabEpreuves[$i]['epr_id']);
           $intPlacesAvailable = (int)($tabQuantites['qte_restante'] ?? 0);
           $blnRaceExpanded = ($i === 1);
+           // MSIN-4467 — L'identité complète de l'épreuve reste visible dans son résumé replié.
+           $blnTeamEpreuve = ((int)$tabEpreuves[$i]['epr_equipe'] === 1);
+           $teamMode = (int)$tabEpreuves[$i]['epr_bib_team_mode'];
+           if ($teamMode <= 0) {
+               $teamMode = 1;
+           }
+           $lockTeamMode = ((int)$infoBib['avec_bib'] > 0);
+           $strEpreuveMode = $blnTeamEpreuve
+               ? fxBibSiteOrBibTexte('promoteur_epr_equipe', 'bib_v4_summary_team')
+               : fxBibSiteOrBibTexte('promoteur_epr_solo', 'bib_v4_summary_solo');
+           $strTeamModeSummary = '';
+           if ($blnTeamEpreuve) {
+               $strTeamModeSummary = fxBibTexte(
+                   $teamMode === 3 ? 'bib_v4_team_mode_one_team' : 'bib_v4_team_mode_individual',
+                   0
+               );
+           }

            ?>

@ -5572,14 +5589,27 @@ function fxShowBibTool4($str_code, $int_eve_id, $strLangue){
                     aria-expanded="<?php echo $blnRaceExpanded ? 'true' : 'false'; ?>"
                     aria-controls="bib-race-detail-<?php echo (int)$tabEpreuves[$i]['epr_id']; ?>">
                    <div class="bib-race-summary__identity">
-                        <strong><?php echo fxBibEsc(fxBibEpreuveDisplayName($tabEpreuves[$i], $strLangue)); ?></strong>
-                        <span><?php echo fxBibEsc(trim($tabEpreuves[$i]['epr_nom_' . $strLangue] ?? '')); ?></span>
+                        <div class="bib-race-summary__identity-head">
+                            <strong><?php echo fxBibEsc(fxBibEpreuveDisplayName($tabEpreuves[$i], $strLangue)); ?></strong>
+                            <?php echo fxBibRenderViewRangeButton(
+                                (int)$tabEpreuves[$i]['epr_id'],
+                                0,
+                                'btn btn-sm btn-light bib-race-summary-view btn-view-range'
+                            ); ?>
+                        </div>
+                        <div class="bib-race-summary__metadata">
+                            <span><?php echo fxBibEsc(trim($tabEpreuves[$i]['epr_nom_' . $strLangue] ?? '')); ?></span>
+                            <span><?php echo fxBibEsc($strEpreuveMode); ?></span>
+                            <?php if ($strTeamModeSummary !== '') { ?>
+                                <span class="bib-race-summary-team-mode"><?php echo fxBibEsc($strTeamModeSummary); ?></span>
+                            <?php } ?>
+                        </div>
                    </div>
                    <section class="bib-race-summary__group bib-race-summary__group--quantities">
                        <h4><?php fxBibTexteTrad('bib_v5_group_quantities', 1); ?></h4>
                        <dl class="bib-race-summary__stats">
                            <div>
-                                <dd class="bib-race-summary-total"><?php echo (int)($infoBib['total'] ?? 0); ?></dd>
+                                <dd class="bib-race-summary-total bib-total"><?php echo (int)($infoBib['total'] ?? 0); ?></dd>
                                <dt><?php fxBibTexteTrad('bib_v5_stat_registered', 1); ?></dt>
                            </div>
                            <div>
@ -5592,7 +5622,7 @@ function fxShowBibTool4($str_code, $int_eve_id, $strLangue){
                        <h4><?php fxBibTexteTrad('bib_v5_group_bibs', 1); ?></h4>
                        <dl class="bib-race-summary__stats">
                            <div>
-                                <dd class="bib-race-summary-assigned"><?php echo (int)($infoBib['avec_bib'] ?? 0); ?></dd>
+                                <dd class="bib-race-summary-assigned bib-avec"><?php echo (int)($infoBib['avec_bib'] ?? 0); ?></dd>
                                <dt><?php fxBibTexteTrad('bib_v5_stat_assigned', 1); ?></dt>
                            </div>
                            <div>
@ -5616,60 +5646,36 @@ function fxShowBibTool4($str_code, $int_eve_id, $strLangue){
                </div>

                <div class="epr-row-detail" id="bib-race-detail-<?php echo (int)$tabEpreuves[$i]['epr_id']; ?>">
-                <!-- GAUCHE — identité épreuve (titre dans la bande bleue, cohérent avec la droite) -->
-                <div class="epr-block epr-block-identity">
-                    <?php echo renderBibEpreuveIdentityHeader($tabEpreuves[$i], $infoBib, $strLangue); ?>
-                    <?php echo renderBibEpreuveResetAllButton((int)$tabEpreuves[$i]['epr_id'], $infoBib, $blnHasLockedRanges); ?>
-<?php if ((int)$tabEpreuves[$i]['epr_equipe'] === 1) { ?>
-                    <div class="epr-content epr-content--identity">
-<?php
-
-$teamMode = (int)$tabEpreuves[$i]['epr_bib_team_mode'];
-$lockTeamMode = ((int)$infoBib['avec_bib'] > 0);
-if ($teamMode <= 0) {
-    $teamMode = 1;
-}
-
-
-
-    ?>
-
-<div class="team-mode-box"
-     data-epr-id="<?php echo (int)$tabEpreuves[$i]['epr_id']; ?>">
-
-    <div class="team-mode-title">
-        <?php fxBibTexteTrad('bib_v4_team_mode_title', 1); ?>
-    </div>
-
-<label class="team-mode-option">
-    <input type="radio"
-           name="team_mode_<?php echo (int)$tabEpreuves[$i]['epr_id']; ?>"
-           value="1"
-           <?php echo ($lockTeamMode ? 'disabled' : ''); ?>
-           <?php echo ($teamMode === 1 ? 'checked' : ''); ?>>
-
-    <span><?php fxBibTexteTrad('bib_v4_team_mode_individual', 1); ?></span>
-</label>
-
-<label class="team-mode-option">
-    <input type="radio"
-           name="team_mode_<?php echo (int)$tabEpreuves[$i]['epr_id']; ?>"
-           value="3"
-           <?php echo ($lockTeamMode ? 'disabled' : ''); ?>
-           <?php echo ($teamMode === 3 ? 'checked' : ''); ?>>
-
-    <span><?php fxBibTexteTrad('bib_v4_team_mode_one_team', 1); ?></span>
-</label>
-
-
-
-</div>
-
-                    </div>
-<?php } ?>
-                </div>
-
                <div class="epr-col-right">
+                    <?php if ($blnTeamEpreuve) { ?>
+                    <section class="bib-team-mode-step">
+                        <div class="team-mode-box"
+                             data-epr-id="<?php echo (int)$tabEpreuves[$i]['epr_id']; ?>">
+                            <div class="team-mode-title">
+                                <?php fxBibTexteTrad('bib_v4_team_mode_title', 1); ?>
+                            </div>
+                            <div class="bib-team-mode-options">
+                                <label class="team-mode-option">
+                                    <input type="radio"
+                                           name="team_mode_<?php echo (int)$tabEpreuves[$i]['epr_id']; ?>"
+                                           value="1"
+                                           <?php echo ($lockTeamMode ? 'disabled' : ''); ?>
+                                           <?php echo ($teamMode === 1 ? 'checked' : ''); ?>>
+                                    <span><?php fxBibTexteTrad('bib_v4_team_mode_individual', 1); ?></span>
+                                </label>
+                                <label class="team-mode-option">
+                                    <input type="radio"
+                                           name="team_mode_<?php echo (int)$tabEpreuves[$i]['epr_id']; ?>"
+                                           value="3"
+                                           <?php echo ($lockTeamMode ? 'disabled' : ''); ?>
+                                           <?php echo ($teamMode === 3 ? 'checked' : ''); ?>>
+                                    <span><?php fxBibTexteTrad('bib_v4_team_mode_one_team', 1); ?></span>
+                                </label>
+                            </div>
+                        </div>
+                    </section>
+                    <?php } ?>
+
                    <?php /* MSIN-4379 — Gestion des épreuves : quantités et paramètres (distinct de l'assignation de dossard). */ ?>
                    <div class="epr-block epr-block-gestion is-collapsed">
                        <div class="epr-header epr-header--collapsible">
@ -5701,10 +5707,17 @@ if ($teamMode <= 0) {
                            <section class="bib-assignment-step">
                                <div class="bib-assignment-step__header">
                                    <span class="bib-assignment-step__number" aria-hidden="true">1</span>
-                                    <div>
+                                    <div class="bib-assignment-step__heading">
                                        <h3><?php fxBibTexteTrad('bib_v5_ranges_title', 1); ?></h3>
                                        <p><?php fxBibTexteTrad('bib_v5_ranges_hint', 1); ?></p>
                                    </div>
+                                    <div class="bib-assignment-step__actions">
+                                        <?php echo renderBibEpreuveResetAllButton(
+                                            (int)$tabEpreuves[$i]['epr_id'],
+                                            $infoBib,
+                                            $blnHasLockedRanges
+                                        ); ?>
+                                    </div>
                                </div>

                    <?php if (count($tabBibStats) == 0) { ?>
--- a/php/inc_settings.php
+++ b/php/inc_settings.php
@ -7,7 +7,7 @@
 * Constantes *
 *
 **************/
-define('_VERSION_CODE', '4.72.845');
+define('_VERSION_CODE', '4.72.846');
 define('_DATE_CODE', '2026-07-21');
 //MSIN-4290
 define('QR_SECRET_KEY', 'ms1_qr_2026_cle_secrete_longue_et_fixe');