From 8a9369bbaf6f1bae68c62c444cadf9a326b6a028 Mon Sep 17 00:00:00 2001 From: stephan Date: Mon, 13 Jul 2026 13:38:20 -0400 Subject: [PATCH] Update styles for mobile scanning interface and enhance user guidance. Adjust button dimensions and positioning for better visibility. Improve hint messages for scanning instructions and update version code to 4.72.789, aligning with MSIN-4401 requirements for enhanced event management functionality. --- css/style.css | 34 +++++++++++++++++++---------- js/v2/inscr-gestion.js | 6 +++++ php/inc_fx_inscriptions_gestion.php | 29 ++++++++++++++---------- php/inc_settings.php | 2 +- 4 files changed, 47 insertions(+), 24 deletions(-) diff --git a/css/style.css b/css/style.css index 99f0e6e..776e71e 100644 --- a/css/style.css +++ b/css/style.css @@ -3422,13 +3422,14 @@ a.ms1-trad-link.btn-aide-trad{ overflow:hidden; border-radius:6px; background:#111; - /* Mode carre, comme le lecteur QR. */ + /* Mode carre, borne pour rester visible au centre du telephone. */ aspect-ratio:1 / 1; - width:100%; - max-width:360px; + width:min(100%, 360px, 72vw); + max-height:min(360px, 52vh); margin:0 auto; cursor:pointer; outline:none; + scroll-margin:12px; } .inscr-gestion-bib-scan-capture.is-ready{ @@ -3468,21 +3469,24 @@ a.ms1-trad-link.btn-aide-trad{ pointer-events:none; } +/* Pastille courte en bas — ne doit pas masquer le cadre central. */ .inscr-gestion-bib-scan-capture-label{ position:absolute; left:50%; - bottom:8px; + bottom:6px; transform:translateX(-50%); - max-width:92%; - padding:5px 12px; - border-radius:10px; - background:rgba(0,0,0,.7); + max-width:88%; + padding:4px 10px; + border-radius:999px; + background:rgba(0,0,0,.72); color:#fff; - font-size:12px; + font-size:11px; font-weight:600; - line-height:1.3; + line-height:1.2; text-align:center; - white-space:normal; + white-space:nowrap; + overflow:hidden; + text-overflow:ellipsis; pointer-events:none; } @@ -3490,9 +3494,17 @@ a.ms1-trad-link.btn-aide-trad{ margin-bottom:10px; } +.inscr-gestion-bib-scan-hint{ + text-align:center; + max-width:360px; + margin-left:auto; + margin-right:auto; +} + .inscr-gestion-bib-scan-status{ color:#6f42c1; font-weight:600; + text-align:center; } .inscr-gestion-bib-scan-status.is-active::before{ diff --git a/js/v2/inscr-gestion.js b/js/v2/inscr-gestion.js index e960fb1..a533114 100644 --- a/js/v2/inscr-gestion.js +++ b/js/v2/inscr-gestion.js @@ -750,6 +750,12 @@ self.toggleBtn.setAttribute('aria-expanded', 'true'); self.toggleBtn.classList.add('is-active'); } + // MSIN-4401 — Amener le viseur au centre du viewport (mobile). + try { + self.panel.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'}); + } catch (eScroll) { + self.panel.scrollIntoView(true); + } self.setStatus(scanMsg(self.panel, 'data-msg-loading', 'Initialisation (1re fois)...', 'Initializing (first time)...'), true); var cameraPromise = navigator.mediaDevices.getUserMedia({ diff --git a/php/inc_fx_inscriptions_gestion.php b/php/inc_fx_inscriptions_gestion.php index 843c370..3e4e81e 100644 --- a/php/inc_fx_inscriptions_gestion.php +++ b/php/inc_fx_inscriptions_gestion.php @@ -342,11 +342,13 @@ function fxInscrGestionFallbackTexte($strClef, $strLangue) { 'inscr_gestion_qr_wrong_event' => $blnFr ? 'Ce code QR appartient à un autre événement : %s' : 'This QR code belongs to another event: %s', 'inscr_gestion_qr_camera_error' => $blnFr ? 'Impossible d\'accéder à la caméra.' : 'Unable to access the camera.', 'inscr_gestion_bib_scan_btn' => $blnFr ? 'Scanner le numéro' : 'Scan number', - 'inscr_gestion_bib_scan_hint' => $blnFr ? 'Ouvrez la caméra, cadrez le numéro, puis touchez l\'image pour lire.' : 'Open the camera, frame the number, then tap the image to read.', - 'inscr_gestion_bib_scan_ready' => $blnFr ? 'Cadrez le numéro, puis touchez l\'image' : 'Frame the number, then tap the image', + 'inscr_gestion_bib_scan_hint' => $blnFr + ? 'Cadrez le numéro dans le cadre, puis touchez l\'image.' + : 'Frame the number in the box, then tap the image.', + 'inscr_gestion_bib_scan_ready' => $blnFr ? 'Touchez l\'image pour lire' : 'Tap the image to read', 'inscr_gestion_bib_scan_tap' => $blnFr - ? 'Centrez les numéros que vous voulez considérer comme numéro de dossard avant de cliquer.' - : 'Center the numbers you want to use as the bib number before tapping.', + ? 'Touchez pour lire' + : 'Tap to read', 'inscr_gestion_bib_scan_scanning' => $blnFr ? 'Lecture en cours...' : 'Reading...', 'inscr_gestion_bib_scan_loading' => $blnFr ? 'Initialisation (1re fois)...' : 'Initializing (first time)...', 'inscr_gestion_bib_scan_found' => $blnFr ? 'Numéro %s détecté — validez avec OK.' : 'Number %s detected — press OK.', @@ -1468,20 +1470,23 @@ function fxInscrGestionRenderQrPanel($intEveId, $strLangue) { function fxInscrGestionRenderBibScanBlock($strBibInputId, $strLangue) { echo '
'; - echo '

' . fxInscrGestionEsc(fxInscrGestionScanLabel('inscr_gestion_bib_scan_hint')) . '

'; + echo ' data-msg-scanning="' . fxInscrGestionEsc(fxInscrGestionFallbackTexte('inscr_gestion_bib_scan_scanning', $strLangue)) . '"'; + echo ' data-msg-loading="' . fxInscrGestionEsc(fxInscrGestionFallbackTexte('inscr_gestion_bib_scan_loading', $strLangue)) . '"'; + echo ' data-msg-ready="' . fxInscrGestionEsc(fxInscrGestionFallbackTexte('inscr_gestion_bib_scan_ready', $strLangue)) . '"'; + echo ' data-msg-found="' . fxInscrGestionEsc(fxInscrGestionFallbackTexte('inscr_gestion_bib_scan_found', $strLangue)) . '"'; + echo ' data-msg-invalid="' . fxInscrGestionEsc(fxInscrGestionFallbackTexte('inscr_gestion_bib_scan_invalid', $strLangue)) . '"'; + echo ' data-msg-camera="' . fxInscrGestionEsc(fxInscrGestionFallbackTexte('inscr_gestion_qr_camera_error', $strLangue)) . '">'; + echo '

' + . fxInscrGestionEsc(fxInscrGestionFallbackTexte('inscr_gestion_bib_scan_hint', $strLangue)) . '

'; echo '
'; echo '
'; echo '
'; // Zone-cible centrale (eclaircie) : aligne le repere visuel sur la region // reellement lue par l'OCR (captureCenterFrame : ~55% largeur x 30% hauteur). echo ''; - echo '' . fxInscrGestionEsc(fxInscrGestionScanLabel('inscr_gestion_bib_scan_tap')) . ''; + // Pastille courte (fallback integre) — evite un long texte info qui masque le viseur. + echo '' + . fxInscrGestionEsc(fxInscrGestionFallbackTexte('inscr_gestion_bib_scan_tap', $strLangue)) . ''; echo '
'; echo '
'; } diff --git a/php/inc_settings.php b/php/inc_settings.php index de79b7c..e4d0d4d 100644 --- a/php/inc_settings.php +++ b/php/inc_settings.php @@ -7,7 +7,7 @@ * Constantes * * **************/ -define('_VERSION_CODE', '4.72.788'); +define('_VERSION_CODE', '4.72.789'); define('_DATE_CODE', '2026-07-13'); //MSIN-4290 define('QR_SECRET_KEY', 'ms1_qr_2026_cle_secrete_longue_et_fixe');