From 545cbe5dd49529b802a2c57bd4fbff53be6cc484 Mon Sep 17 00:00:00 2001 From: stephan Date: Wed, 8 Jul 2026 14:46:25 -0400 Subject: [PATCH] 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. --- css/style.css | 142 ++++++++++++++++++++++++--------------- js/v2/bib-assignments.js | 32 +++++++++ php/inc_fx_promoteur.php | 37 ++++++---- php/inc_settings.php | 2 +- 4 files changed, 145 insertions(+), 68 deletions(-) diff --git a/css/style.css b/css/style.css index bc762b1..98cbd71 100644 --- 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; } } diff --git a/js/v2/bib-assignments.js b/js/v2/bib-assignments.js index 17b9c8b..7c5a0e2 100644 --- 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)) { diff --git a/php/inc_fx_promoteur.php b/php/inc_fx_promoteur.php index d47ebfb..06de3bc 100644 --- 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 = ''; + $html .= ''; return $html; } @@ -4464,22 +4472,23 @@ function renderBibToolNav($int_eve_id, $tabEpreuves, $strLangue = 'fr') { ob_start(); ?> +
+
+ +
+