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(); ?> +
+
+ +
+