usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(kiosko): corregir touch en Edge kiosk mode

Browse Source 
- touch-action: manipulation directo en cada botón e input (no solo en body)
- -ms-touch-action para compatibilidad Edge legacy
- position: relative en .kiosko-wrap para contener screens absolutas
- inset: 0 en .screen.hidden para que no se salga del contenedor

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-22 22:12:19 -05:00
co-authored by Claude Sonnet 4.6
parent 868263fe6f
commit 728d78f606
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/turnero/views/kiosko.php
+14 -1
View File
@@ -96,6 +96,7 @@ unset($p);
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
position: relative;
} }
/* ── Header con logo ── */ /* ── Header con logo ── */
@@ -150,6 +151,8 @@ unset($p);
transition: background .15s; transition: background .15s;
flex-shrink: 0; flex-shrink: 0;
line-height: 1; line-height: 1;
touch-action: manipulation;
-ms-touch-action: manipulation;
} }
.btn-fullscreen:hover { background: rgba(255,255,255,.28); } .btn-fullscreen:hover { background: rgba(255,255,255,.28); }
@@ -164,7 +167,7 @@ unset($p);
transition: opacity .3s ease, transform .3s ease; transition: opacity .3s ease, transform .3s ease;
overflow: hidden; overflow: hidden;
} }
.screen.hidden { opacity: 0; pointer-events: none; transform: scale(.98); position: absolute; } .screen.hidden { opacity: 0; pointer-events: none; transform: scale(.98); position: absolute; inset: 0; }
.screen.visible { opacity: 1; pointer-events: all; transform: scale(1); position: relative; } .screen.visible { opacity: 1; pointer-events: all; transform: scale(1); position: relative; }
/* ── Instrucción central ── */ /* ── Instrucción central ── */
@@ -203,6 +206,8 @@ unset($p);
box-shadow: 0 2px 12px rgba(0,0,0,.10); box-shadow: 0 2px 12px rgba(0,0,0,.10);
-webkit-user-select: none; user-select: none; -webkit-user-select: none; user-select: none;
background: #fff; background: #fff;
touch-action: manipulation;
-ms-touch-action: manipulation;
} }
.btn-prioridad:active { transform: scale(.95); filter: brightness(.93); } .btn-prioridad:active { transform: scale(.95); filter: brightness(.93); }
.btn-prioridad:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.13); } .btn-prioridad:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.13); }
@@ -236,6 +241,8 @@ unset($p);
font-size: 1.2rem; font-size: 1.2rem;
box-shadow: 0 1px 4px rgba(0,0,0,.05); box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: border-color .2s, box-shadow .2s; transition: border-color .2s, box-shadow .2s;
touch-action: manipulation;
-ms-touch-action: manipulation;
} }
.form-kiosko .form-control:focus { .form-kiosko .form-control:focus {
border-color: var(--brand); border-color: var(--brand);
@@ -251,6 +258,8 @@ unset($p);
box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 40%, transparent);
transition: transform .12s, box-shadow .12s, filter .12s; transition: transform .12s, box-shadow .12s, filter .12s;
width: 100%; margin-top: 1rem; width: 100%; margin-top: 1rem;
touch-action: manipulation;
-ms-touch-action: manipulation;
} }
.btn-kiosko-main:active { transform: scale(.97); filter: brightness(.9); } .btn-kiosko-main:active { transform: scale(.97); filter: brightness(.9); }
.btn-kiosko-back { .btn-kiosko-back {
@@ -259,6 +268,8 @@ unset($p);
color: #94a3b8; border-radius: 12px; padding: .7rem 1.5rem; color: #94a3b8; border-radius: 12px; padding: .7rem 1.5rem;
font-size: 1.07rem; cursor: pointer; margin-top: .6rem; width: 100%; font-size: 1.07rem; cursor: pointer; margin-top: .6rem; width: 100%;
transition: background .12s, border-color .12s; transition: background .12s, border-color .12s;
touch-action: manipulation;
-ms-touch-action: manipulation;
} }
.btn-kiosko-back:hover { background: var(--brand-mid); border-color: var(--brand); color: var(--brand-dark); } .btn-kiosko-back:hover { background: var(--brand-mid); border-color: var(--brand); color: var(--brand-dark); }
@@ -328,6 +339,8 @@ unset($p);
font-size: 1.1rem; font-weight: 600; cursor: pointer; font-size: 1.1rem; font-weight: 600; cursor: pointer;
color: var(--brand-dark); background: #fff; color: var(--brand-dark); background: #fff;
transition: background .15s, border-color .15s; transition: background .15s, border-color .15s;
touch-action: manipulation;
-ms-touch-action: manipulation;
} }
.btn-nuevo:hover { background: var(--brand-light); border-color: var(--brand); } .btn-nuevo:hover { background: var(--brand-light); border-color: var(--brand); }