Enhance bib tool navigation and detail functionality, update version code to 4.72.766

This commit refines the bib tool navigation layout by implementing a grid-based structure and adding a detail panel for tool descriptions. New CSS styles improve the visual presentation and responsiveness of the tool buttons. Additionally, JavaScript functions are introduced to manage tool detail titles and keyboard interactions, enhancing user experience. The version code is incremented to 4.72.766 to reflect these updates.
2026-07-08 14:46:25 -04:00
parent 74700fcc19
commit 545cbe5dd4
4 changed files with 145 additions and 68 deletions
--- a/css/style.css
+++ b/css/style.css
@ -1074,143 +1074,179 @@ ul.ms1-menu-compte li a:hover, ul.ms1-menu-compte li a:active {
 }

 /* MSIN-4440 — Grille boutons outils bib v4 (3+2) + panneau de détail unique. */
-.bib-tool-nav{
-    display:flex;
-    flex-direction:column;
-    gap:6px;
+#module-bib .bib-tool-hub{
    margin-top:10px;
 }

-.bib-tool-nav__row{
+#module-bib .bib-tool-nav{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
-    gap:6px;
+    gap:8px;
 }

-.bib-tool-nav__row--2{
-    grid-template-columns:repeat(2, minmax(0, 1fr));
-    max-width:calc(66.666% + 3px);
+#module-bib .bib-tool-btn:nth-child(4){
+    grid-column:1;
 }

-.bib-tool-btn{
+#module-bib .bib-tool-btn:nth-child(5){
+    grid-column:2;
+}
+
+#module-bib .bib-tool-btn{
    display:flex;
    align-items:stretch;
    width:100%;
-    min-height:64px;
-    padding:10px 12px;
+    min-height:56px;
+    padding:8px 10px;
    border:2px solid transparent;
    border-radius:8px;
    background:#2f5fd0;
    color:#fff;
-    font-size:14px;
+    font-size:12px;
    font-weight:700;
-    line-height:1.35;
+    line-height:1.3;
    text-align:left;
    cursor:pointer;
+    user-select:none;
    transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
 }

-.bib-tool-btn:hover,
-.bib-tool-btn:focus{
+#module-bib .bib-tool-btn:hover,
+#module-bib .bib-tool-btn:focus{
    background:#2852b8;
    color:#fff;
    outline:none;
 }

-.bib-tool-btn.is-active{
+#module-bib .bib-tool-btn.is-active{
    border-color:#fff;
-    box-shadow:0 0 0 2px #2f5fd0;
+    box-shadow:0 0 0 2px #2f5fd0, 0 4px 12px rgba(47,95,208,.25);
 }

-.bib-tool-btn--alt{
+#module-bib .bib-tool-btn--alt{
    background:#f4f8fc;
    color:#212529;
    border-color:#c8d6e5;
    font-weight:600;
 }

-.bib-tool-btn--alt:hover,
-.bib-tool-btn--alt:focus{
+#module-bib .bib-tool-btn--alt:hover,
+#module-bib .bib-tool-btn--alt:focus{
    background:#e8f0f8;
    color:#212529;
 }

-.bib-tool-btn--alt.is-active{
+#module-bib .bib-tool-btn--alt.is-active{
    border-color:#2f5fd0;
-    box-shadow:0 0 0 2px rgba(47,95,208,.35);
+    box-shadow:0 0 0 2px rgba(47,95,208,.35), 0 4px 12px rgba(47,95,208,.12);
 }

-.bib-tool-btn__main{
+#module-bib .bib-tool-btn__main{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
-    gap:6px;
+    gap:4px;
    width:100%;
    min-width:0;
 }

-.bib-tool-btn__label{
-    display:inline-flex;
-    align-items:center;
-    flex-wrap:wrap;
-    gap:6px;
+#module-bib .bib-tool-btn__label{
+    position:relative;
+    display:block;
+    width:100%;
    min-width:0;
+    padding-right:26px;
 }

-.bib-tool-btn__badges{
+#module-bib .bib-tool-btn__label-text{
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    -webkit-box-orient:vertical;
+    overflow:hidden;
+}
+
+#module-bib .bib-tool-btn__actions{
+    position:absolute;
+    top:0;
+    right:0;
+    display:inline-flex;
+    align-items:center;
+    gap:2px;
+}
+
+#module-bib .bib-tool-btn__badges{
    display:inline-flex;
    flex-wrap:wrap;
    align-items:center;
-    gap:6px;
+    gap:4px;
+    max-width:100%;
 }

-.bib-tool-btn .epr-header-summary{
-    font-size:11px;
+#module-bib .bib-tool-btn .epr-header-summary{
+    font-size:10px;
+    padding:1px 6px;
 }

-.bib-tool-btn .bib-anomalies-count{
-    font-size:11px;
+#module-bib .bib-tool-btn .bib-anomalies-count{
+    font-size:10px;
 }

-.bib-tool-btn .btn-aide-bib,
-.bib-tool-btn .btn-aide-trad,
-.bib-tool-btn .btn-doc-trigger,
-.bib-tool-btn .btn-admin-doc{
+#module-bib .bib-tool-btn .btn-aide-bib,
+#module-bib .bib-tool-btn .bib-aide-trigger,
+#module-bib .bib-tool-btn .btn-aide-trad,
+#module-bib .bib-tool-btn .btn-doc-trigger,
+#module-bib .bib-tool-btn .btn-admin-doc,
+#module-bib .bib-tool-btn .btn-trad-admin{
    color:inherit;
    opacity:.9;
+    padding:0 2px;
+    font-size:12px;
+    line-height:1;
 }

-.bib-tool-detail{
-    margin-top:6px;
+#module-bib .bib-tool-detail{
+    margin-top:8px;
    border:1px solid #ced4da;
    border-radius:8px;
    background:#fff;
    overflow:hidden;
 }

-.bib-tool-detail__body .epr-content,
-.bib-tool-detail__body .bib-global-batch__body{
+#module-bib .bib-tool-detail__header{
+    padding:8px 12px;
+    font-size:14px;
+}
+
+#module-bib .bib-tool-detail__title{
+    font-weight:700;
+}
+
+#module-bib .bib-tool-detail__body .epr-content,
+#module-bib .bib-tool-detail__body .bib-global-batch__body{
    display:block !important;
 }

-.bib-tool-detail__body .bib-event-config-content,
-.bib-tool-detail__body .bib-qty-summary-content,
-.bib-tool-detail__body .bib-anomalies-content,
-.bib-tool-detail__body .bib-dist-print-content,
-.bib-tool-detail__body .bib-global-batch__body{
+#module-bib .bib-tool-detail__body .bib-event-config-content,
+#module-bib .bib-tool-detail__body .bib-qty-summary-content,
+#module-bib .bib-tool-detail__body .bib-anomalies-content,
+#module-bib .bib-tool-detail__body .bib-dist-print-content,
+#module-bib .bib-tool-detail__body .bib-global-batch__body{
    padding:12px 14px;
 }

-.bib-tool-store{
+#module-bib .bib-tool-store{
    display:none;
 }

@media (max-width:768px){
-    .bib-tool-nav__row,
-    .bib-tool-nav__row--2{
+    #module-bib .bib-tool-nav{
        grid-template-columns:1fr;
-        max-width:none;
+    }
+
+    #module-bib .bib-tool-btn:nth-child(4),
+    #module-bib .bib-tool-btn:nth-child(5){
+        grid-column:auto;
    }
 }

--- a/js/v2/bib-assignments.js
+++ b/js/v2/bib-assignments.js
@ -411,6 +411,23 @@
                });
            }

+            function bibSetToolDetailTitle(toolId) {
+                var titleEl = document.getElementById('bib-tool-detail-title');
+                if (!titleEl) {
+                    return;
+                }
+
+                if (!toolId) {
+                    titleEl.textContent = '';
+                    return;
+                }
+
+                var btn = moduleBib.querySelector('.bib-tool-btn[data-bib-tool="' + toolId + '"]');
+                titleEl.textContent = btn
+                    ? (btn.getAttribute('data-bib-tool-label') || '')
+                    : '';
+            }
+
            function bibCloseTool() {
                if (!bibActiveTool) {
                    return;
@ -420,6 +437,7 @@
                bibInvalidateToolSlot(bibActiveTool);
                bibActiveTool = null;
                bibSetActiveToolButton(null);
+                bibSetToolDetailTitle(null);

                var detail = document.getElementById('bib-tool-detail');
                var detailBody = document.getElementById('bib-tool-detail-body');
@ -521,10 +539,12 @@

                    bibActiveTool = toolId;
                    bibSetActiveToolButton(toolId);
+                    bibSetToolDetailTitle(toolId);

                    var detail = document.getElementById('bib-tool-detail');
                    if (detail) {
                        detail.classList.remove('bib-ui-hidden');
+                        detail.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                    }

                    if (toolId === 'global_batch') {
@ -882,6 +902,18 @@
                    });
            }

+            moduleBib.addEventListener('keydown', function (e) {
+                if (e.key !== 'Enter' && e.key !== ' ') {
+                    return;
+                }
+                var toolBtn = e.target.closest('.bib-tool-btn[role="button"]');
+                if (!toolBtn || !moduleBib.contains(toolBtn)) {
+                    return;
+                }
+                e.preventDefault();
+                bibOpenTool(toolBtn.getAttribute('data-bib-tool'));
+            });
+
            moduleBib.addEventListener('click', function (e) {
                var toolBtn = e.target.closest('.bib-tool-btn');
                if (toolBtn && moduleBib.contains(toolBtn)) {
--- a/php/inc_fx_promoteur.php
+++ b/php/inc_fx_promoteur.php
@ -4420,25 +4420,33 @@ function renderBibToolNavBtn($strTool, $strTitleClef, $strBadgesHtml = '', $blnA
        $strClass .= ' bib-tool-btn--alt';
    }

-    $html = '<button type="button" class="' . $strClass . '"'
+    $strTitle = fxBibTexte($strTitleClef, 0);
+
+    // div role=button : évite button dans button (icônes aide/doc) — HTML invalide qui casse la grille.
+    $html = '<div class="' . $strClass . '"'
+        . ' role="button"'
+        . ' tabindex="0"'
        . ' data-bib-tool="' . fxBibEsc($strTool) . '"'
+        . ' data-bib-tool-label="' . fxBibEsc($strTitle) . '"'
        . ' aria-expanded="false">';

    $html .= '<span class="bib-tool-btn__main">';
    $html .= '<span class="bib-tool-btn__label">';
-    $html .= fxBibEsc(fxBibTexte($strTitleClef, 0));
+    $html .= '<span class="bib-tool-btn__label-text">' . fxBibEsc($strTitle) . '</span>';
+    $html .= '<span class="bib-tool-btn__actions">';
    $html .= fxBibAideButton($strTitleClef);
    if ($strDocClef !== '') {
        $html .= fxDocRenderTrigger($strDocClef);
        $html .= fxAdminDocButton($strDocClef);
    }
    $html .= '</span>';
+    $html .= '</span>';

    if ($strBadgesHtml !== '') {
        $html .= '<span class="bib-tool-btn__badges">' . $strBadgesHtml . '</span>';
    }

-    $html .= '</span></button>';
+    $html .= '</span></div>';
    return $html;
 }

@ -4464,22 +4472,23 @@ function renderBibToolNav($int_eve_id, $tabEpreuves, $strLangue = 'fr') {

    ob_start();
    ?>
+    <div class="bib-tool-hub">
    <nav class="bib-tool-nav" aria-label="<?php echo fxBibEsc($strNavLabel); ?>">
-        <div class="bib-tool-nav__row">
-            <?php echo renderBibToolNavBtn('event_config', 'bib_v4_event_config_title', $strEventBadges); ?>
-            <?php echo renderBibToolNavBtn('qty_summary', 'bib_v4_qty_summary_title', $strQtyBadges); ?>
-            <?php echo renderBibToolNavBtn('anomalies', 'bib_v4_anomalies_title', $strAnomBadges); ?>
-        </div>
-        <div class="bib-tool-nav__row bib-tool-nav__row--2">
-            <?php echo renderBibToolNavBtn('dist_print', 'bib_v4_dist_print_title'); ?>
-            <?php if ($intSolo >= 2) {
-                echo renderBibToolNavBtn('global_batch', 'bib_v4_global_batch_title', '', true, 'bib_v4_global_batch_doc');
-            } ?>
-        </div>
+        <?php echo renderBibToolNavBtn('event_config', 'bib_v4_event_config_title', $strEventBadges); ?>
+        <?php echo renderBibToolNavBtn('qty_summary', 'bib_v4_qty_summary_title', $strQtyBadges); ?>
+        <?php echo renderBibToolNavBtn('anomalies', 'bib_v4_anomalies_title', $strAnomBadges); ?>
+        <?php echo renderBibToolNavBtn('dist_print', 'bib_v4_dist_print_title'); ?>
+        <?php if ($intSolo >= 2) {
+            echo renderBibToolNavBtn('global_batch', 'bib_v4_global_batch_title', '', true, 'bib_v4_global_batch_doc');
+        } ?>
    </nav>
    <div id="bib-tool-detail" class="bib-tool-detail bib-ui-hidden" aria-live="polite">
+        <div class="bib-tool-detail__header epr-header">
+            <span id="bib-tool-detail-title" class="bib-tool-detail__title"></span>
+        </div>
        <div id="bib-tool-detail-body" class="bib-tool-detail__body"></div>
    </div>
+    </div>
    <?php
    return ob_get_clean();
 }
--- a/php/inc_settings.php
+++ b/php/inc_settings.php
@ -7,7 +7,7 @@
 * Constantes *
 *
 **************/
-define('_VERSION_CODE', '4.72.765');
+define('_VERSION_CODE', '4.72.766');
 define('_DATE_CODE', '2026-07-08');
 //MSIN-4290
 define('QR_SECRET_KEY', 'ms1_qr_2026_cle_secrete_longue_et_fixe');