Update CSS styles for mobile scanning interface to improve button dimensions and positioning, ensuring better visibility and user experience. Introduce a new method in JavaScript to center the capture view within the viewport, enhancing usability during scanning. Increment version code to 4.72.795 to reflect these changes.

This commit is contained in:
2026-07-13 14:07:53 -04:00
parent 8efbb4c4a7
commit 7efc81235d
3 changed files with 30 additions and 6 deletions

View File

@ -3422,13 +3422,15 @@ a.ms1-trad-link.btn-aide-trad{
overflow:hidden; overflow:hidden;
border-radius:6px; border-radius:6px;
background:#111; background:#111;
/* Mode carre, comme le lecteur QR (taille d'avant le polish qui cassait la lecture). */ /* MSIN-4401 — Plus grand carre possible dans le viewport telephone. */
aspect-ratio:1 / 1; aspect-ratio:1 / 1;
width:100%; width:min(100%, 92vw, 70vh);
max-width:360px; max-width:min(100%, 92vw, 70vh);
max-height:70vh;
margin:0 auto; margin:0 auto;
cursor:pointer; cursor:pointer;
outline:none; outline:none;
scroll-margin:20px;
} }
.inscr-gestion-bib-scan-capture.is-ready{ .inscr-gestion-bib-scan-capture.is-ready{
@ -3492,7 +3494,7 @@ a.ms1-trad-link.btn-aide-trad{
.inscr-gestion-bib-scan-hint{ .inscr-gestion-bib-scan-hint{
text-align:center; text-align:center;
max-width:360px; max-width:min(100%, 92vw, 70vh);
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
} }
@ -4070,7 +4072,8 @@ a.ms1-trad-link.btn-aide-trad{
/* Apercu camera OCR (carre) un peu plus grand sur la fiche pour viser facilement. */ /* Apercu camera OCR (carre) un peu plus grand sur la fiche pour viser facilement. */
.inscr-gestion-fiche-section--editable .inscr-gestion-bib-scan-capture{ .inscr-gestion-fiche-section--editable .inscr-gestion-bib-scan-capture{
max-width:420px; /* Meme plafond viewport que la recherche (pas un petit 420px). */
max-width:min(100%, 92vw, 70vh);
} }
@keyframes inscr-gestion-statut-shake{ @keyframes inscr-gestion-statut-shake{

View File

@ -764,6 +764,18 @@
}); });
}; };
BibScanSession.prototype.scrollCaptureIntoView = function () {
var el = this.captureEl || this.panel;
if (!el || !el.scrollIntoView) {
return;
}
try {
el.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'});
} catch (eScroll) {
el.scrollIntoView(true);
}
};
BibScanSession.prototype.start = function () { BibScanSession.prototype.start = function () {
var self = this; var self = this;
if (!self.panel || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { if (!self.panel || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@ -779,6 +791,13 @@
self.toggleBtn.setAttribute('aria-expanded', 'true'); self.toggleBtn.setAttribute('aria-expanded', 'true');
self.toggleBtn.classList.add('is-active'); self.toggleBtn.classList.add('is-active');
} }
// MSIN-4401 — Centrer le viseur dans l'ecran (evite la moitie hors viewport).
self.scrollCaptureIntoView();
window.setTimeout(function () {
if (activeScan === self) {
self.scrollCaptureIntoView();
}
}, 120);
self.setStatus(scanMsg(self.panel, 'data-msg-loading', 'Initialisation (1re fois)...', 'Initializing (first time)...'), true); self.setStatus(scanMsg(self.panel, 'data-msg-loading', 'Initialisation (1re fois)...', 'Initializing (first time)...'), true);
var cameraPromise = navigator.mediaDevices.getUserMedia({ var cameraPromise = navigator.mediaDevices.getUserMedia({
@ -808,6 +827,8 @@
} }
self.bindCapture(); self.bindCapture();
self.showReady(); self.showReady();
// Apres affichage video : recentrer (layout final).
self.scrollCaptureIntoView();
}).catch(function () { }).catch(function () {
self.setStatus(scanMsg(self.panel, 'data-msg-camera', 'Impossible d\'accéder à la caméra.', 'Unable to access the camera.'), false); self.setStatus(scanMsg(self.panel, 'data-msg-camera', 'Impossible d\'accéder à la caméra.', 'Unable to access the camera.'), false);
self.stop(); self.stop();

View File

@ -7,7 +7,7 @@
* Constantes * * Constantes *
* *
**************/ **************/
define('_VERSION_CODE', '4.72.794'); define('_VERSION_CODE', '4.72.795');
define('_DATE_CODE', '2026-07-13'); define('_DATE_CODE', '2026-07-13');
//MSIN-4290 //MSIN-4290
define('QR_SECRET_KEY', 'ms1_qr_2026_cle_secrete_longue_et_fixe'); define('QR_SECRET_KEY', 'ms1_qr_2026_cle_secrete_longue_et_fixe');