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

fix: convert detail panel from col-lg-5 inline to fixed drawer overlay

Browse Source 
Table now uses full col-12 width — no more horizontal scroll.
Detail panel slides in from right as a fixed overlay with backdrop.
Also renames stats card from "Importados RIPS" to "Importados Lab".

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-09 12:06:01 -05:00
co-authored by Claude Sonnet 4.6
parent 912798fbcc
commit 3bf70f48d0
1 changed files with 43 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lab_pacientes.php
+43 -18
View File
@@ -56,7 +56,28 @@ $brandDark = sprintf('#%02x%02x%02x',
color: #64748b;
}
.hist-badge { font-size: .72rem; }
#detail-panel { display: none; }
/* Drawer de detalle (fixed overlay) */
#detail-backdrop {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.25);
z-index: 1049;
}
#detail-panel {
position: fixed;
top: 0; right: 0;
height: 100vh;
width: 420px;
z-index: 1050;
background: #fff;
box-shadow: -4px 0 24px rgba(0,0,0,.18);
transform: translateX(110%);
transition: transform .25s cubic-bezier(.4,0,.2,1);
display: flex; flex-direction: column;
}
#detail-panel.open { transform: translateX(0); }
@media (max-width: 480px) { #detail-panel { width: 100vw; } }
#detail-body { flex: 1; overflow-y: auto; padding: 1rem; }
/* ── Modal header ──────────────────────────────── */
.modal-header-brand {
@@ -125,9 +146,10 @@ $brandDark = sprintf('#%02x%02x%02x',
/* ── Panel detalle ─────────────────────────────── */
.detail-header-band {
background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
color: #fff; border-radius: .5rem .5rem 0 0;
color: #fff;
padding: .75rem 1rem;
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.detail-header-band .btn-close { filter: invert(1) brightness(2); }
@@ -165,9 +187,9 @@ require_once __DIR__ . '/shared/components/sidebar.php';
</div>
</div>
<div class="col-6 col-md-3">
<div class="card border-0 shadow-sm rounded-3 text-center py-2" style="cursor:pointer" onclick="filtrarOrigen('rips')">
<div class="card border-0 shadow-sm rounded-3 text-center py-2" style="cursor:pointer" onclick="filtrarOrigen('lab')">
<div class="fw-bold fs-4 text-primary" id="stat-rips">—</div>
<div class="text-muted small"><i class="fas fa-database me-1 text-primary"></i>Importados RIPS</div>
<div class="text-muted small"><i class="fas fa-flask me-1 text-primary"></i>Importados Lab</div>
</div>
</div>
<div class="col-6 col-md-3">
@@ -211,7 +233,7 @@ require_once __DIR__ . '/shared/components/sidebar.php';
<div class="row g-3">
<!-- Lista -->
<div class="col-lg-7" id="lista-col">
<div class="col-12" id="lista-col">
<div class="card border-0 shadow-sm rounded-3">
<div class="card-body p-0">
<div class="table-responsive">
@@ -241,21 +263,22 @@ require_once __DIR__ . '/shared/components/sidebar.php';
</div>
</div>
</div>
<!-- Panel de detalle -->
<div class="col-lg-5" id="detail-panel">
<div class="card border-0 shadow-sm rounded-3 overflow-hidden">
<div class="detail-header-band">
<span class="fw-semibold" id="detail-nombre">Paciente</span>
<button class="btn-close" onclick="cerrarDetalle()"></button>
</div>
<div class="card-body" id="detail-body"></div>
</div>
</div>
</div>
</div>
</main>
<!-- Backdrop para el drawer de detalle -->
<div id="detail-backdrop" onclick="cerrarDetalle()"></div>
<!-- Drawer de detalle (fixed overlay) -->
<div id="detail-panel">
<div class="detail-header-band">
<span class="fw-semibold" id="detail-nombre">Paciente</span>
<button class="btn-close" onclick="cerrarDetalle()"></button>
</div>
<div id="detail-body"></div>
</div>
<!-- Modal Formulario Paciente -->
<div class="modal fade" id="modalPaciente" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
@@ -505,7 +528,8 @@ async function cargarLista(pag = 1) {
// ── Detalle ────────────────────────────────────────────────────────────────
async function verDetalle(id) {
const panel = document.getElementById('detail-panel');
panel.style.display = 'block';
panel.classList.add('open');
document.getElementById('detail-backdrop').style.display = 'block';
document.getElementById('detail-body').innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin fa-lg text-muted"></i></div>';
const r = await fetch(`api/lab/get_pacientes.php?id=${id}`);
@@ -555,7 +579,8 @@ async function verDetalle(id) {
}
function cerrarDetalle() {
document.getElementById('detail-panel').style.display = 'none';
document.getElementById('detail-panel').classList.remove('open');
document.getElementById('detail-backdrop').style.display = 'none';
}
// ── Formulario ─────────────────────────────────────────────────────────────