fix(chat): sesión persistente entre recargas + responsive móvil/desktop
- mount(): restaura userId y convId desde sesión Laravel al recargar página - abrirChat(): guarda chat_user_id y chat_conv_id en sesión - cerrarSesion(): limpia la sesión correctamente - Desktop: chat centrado como frame (420px, bordes redondeados, sombra) - Móvil: pantalla completa sin restricción de ancho - teclado virtual: ajuste de altura solo en móvil Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
4ddfdaeecc
commit
d27bd1c0d7
@@ -2,11 +2,9 @@
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
{{-- viewport-fit=cover expone las safe areas del notch/Dynamic Island --}}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta name="color-scheme" content="dark">
|
||||
{{-- Apple PWA / standalone --}}
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Chat">
|
||||
@@ -14,43 +12,71 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* ── Reset iOS/Safari ───────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
/* Altura real del viewport incluyendo safe areas */
|
||||
height: -webkit-fill-available;
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
/* Móvil: pantalla completa */
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #111b21;
|
||||
/* Evita el scroll del body — solo scrollea el área de mensajes */
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
/* Altura: dvh con fallback para Safari < 15.4 */
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
height: -webkit-fill-available;
|
||||
/* Elimina el tap highlight azul en iOS */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Evita el zoom Safari en inputs < 16px */
|
||||
input, textarea, select {
|
||||
font-size: 16px !important;
|
||||
/* Desktop: fondo con gradiente + chat centrado como frame */
|
||||
@media (min-width: 640px) {
|
||||
body {
|
||||
background: #0d1117;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scroll suave tipo nativo en iOS */
|
||||
/* El contenedor del chat */
|
||||
#chat-root {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
height: -webkit-fill-available;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #111b21;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
#chat-root {
|
||||
width: 420px;
|
||||
height: 90vh;
|
||||
height: 90dvh;
|
||||
max-height: 820px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Evita zoom en inputs iOS */
|
||||
input, textarea, select { font-size: 16px !important; }
|
||||
|
||||
/* Scroll suave nativo */
|
||||
.ios-scroll {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
/* Deshabilitar appearance por defecto en iOS */
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
textarea {
|
||||
/* Elimina appearance por defecto iOS */
|
||||
input[type="tel"], input[type="text"],
|
||||
input[type="email"], textarea {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 12px;
|
||||
@@ -62,7 +88,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Safe area — rellena el notch arriba y el home indicator abajo */
|
||||
/* Safe areas (solo afectan en iOS con viewport-fit=cover) */
|
||||
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
|
||||
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
|
||||
.safe-left { padding-left: env(safe-area-inset-left, 0px); }
|
||||
@@ -78,18 +104,16 @@
|
||||
@livewireScripts
|
||||
|
||||
<script>
|
||||
/**
|
||||
* visualViewport API: cuando el teclado iOS aparece, el viewport se reduce.
|
||||
* Ajustamos la altura del chat dinámicamente para que el input quede visible.
|
||||
*/
|
||||
/* Ajusta altura del chat cuando aparece el teclado en móvil */
|
||||
function initViewportFix() {
|
||||
const root = document.getElementById('chat-root');
|
||||
if (!root || !window.visualViewport) return;
|
||||
|
||||
const isMobile = window.innerWidth < 640;
|
||||
if (!isMobile) return; // En desktop no necesitamos ajustar
|
||||
|
||||
const update = () => {
|
||||
const h = window.visualViewport.height;
|
||||
root.style.height = h + 'px';
|
||||
// Scroll al último mensaje al aparecer teclado
|
||||
root.style.height = window.visualViewport.height + 'px';
|
||||
const msgs = document.getElementById('pub-messages');
|
||||
if (msgs) setTimeout(() => { msgs.scrollTop = msgs.scrollHeight; }, 50);
|
||||
};
|
||||
@@ -100,7 +124,7 @@
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initViewportFix);
|
||||
document.addEventListener('livewire:load', initViewportFix);
|
||||
document.addEventListener('livewire:load', initViewportFix);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<div id="chat-root"
|
||||
class="w-full flex flex-col bg-[#111b21]"
|
||||
style="height: 100vh; height: 100dvh; height: -webkit-fill-available; max-width: 480px; margin: 0 auto;">
|
||||
<div id="chat-root">
|
||||
|
||||
{{-- ══ PASO 1: Ingreso de correo ══ --}}
|
||||
@if ($paso === 'email')
|
||||
|
||||
Reference in New Issue
Block a user