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

lab: responsive sidebar toggle en todas las páginas del módulo lab

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-03-19 11:43:01 -05:00
parent 8fb345c404
commit e89ec89c66
13 changed files with 137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/styles.css
+48
View File
@@ -991,6 +991,54 @@ body {
}
}
/* =================================
LAB SIDEBAR TOGGLE (mobile)
================================= */
/* El botón hamburguesa solo es visible en mobile/tablet */
.lab-sidebar-toggle {
display: none !important;
flex-shrink: 0;
margin-right: 8px;
}
/* content-header cuando tiene el toggle: evitar desbordamiento del título */
.content-header.has-sidebar-toggle {
gap: 8px;
flex-wrap: nowrap;
}
.content-header.has-sidebar-toggle > div:nth-child(2) {
min-width: 0;
flex: 1;
}
.content-header.has-sidebar-toggle h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
font-size: clamp(.9rem, 2.5vw, 1.4rem);
}
@media (max-width: 991.98px) {
.lab-sidebar-toggle { display: inline-flex !important; }
.content-header.has-sidebar-toggle { padding: 10px 12px; }
/* Evitar que el body haga scroll horizontal cuando el sidebar está abierto */
body.sidebar-open { overflow: hidden; }
/* Contenedores con padding excesivo en móvil */
.container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 575.98px) {
/* Cards de lab en 2 columnas en móvil pequeño */
.col-md-3, .col-xl-3, .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
/* Tablas lab: texto más pequeño */
.table th, .table td { font-size: .78rem; padding: 7px 8px; }
/* Header sub-info en móvil */
.content-header small { font-size: .7rem; }
/* Botón Nuevo en header: ocultar texto, solo icono */
.content-header .btn-primary .me-1 ~ * { display: none; }
}
/* =================================
CHAT STYLES
================================= */
assets/js/lab-sidebar.js
+78
View File
@@ -0,0 +1,78 @@
/**
* lab-sidebar.js — Toggle responsivo del sidebar para todas las páginas del Módulo Lab.
* Se auto-inyecta en el header y maneja el overlay.
*/
(function () {
'use strict';
// ── 1. Overlay ──────────────────────────────────────────────────────────
var overlay = document.createElement('div');
overlay.className = 'sidebar-overlay';
document.body.appendChild(overlay);
// ── 2. Botón hamburguesa ────────────────────────────────────────────────
var btn = document.createElement('button');
btn.id = 'sidebar-toggle';
btn.className = 'btn btn-light btn-sm lab-sidebar-toggle';
btn.title = 'Abrir menú';
btn.innerHTML = '<i class="fas fa-bars"></i>';
// Inyectar como primer hijo del content-header
var header = document.querySelector('.content-header');
if (header) {
header.insertBefore(btn, header.firstChild);
header.classList.add('has-sidebar-toggle');
}
// ── 3. Toggle logic ──────────────────────────────────────────────────────
var sidebar = document.querySelector('.sidebar');
function openSidebar() {
if (!sidebar) return;
sidebar.classList.add('open');
overlay.style.display = 'block';
document.body.classList.add('sidebar-open');
}
function closeSidebar() {
if (!sidebar) return;
sidebar.classList.remove('open');
overlay.style.display = 'none';
document.body.classList.remove('sidebar-open');
}
btn.addEventListener('click', function (e) {
e.stopPropagation();
if (sidebar && sidebar.classList.contains('open')) {
closeSidebar();
} else {
openSidebar();
}
});
// Cerrar al hacer clic en el overlay
overlay.addEventListener('click', closeSidebar);
// Cerrar con Escape
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') closeSidebar();
});
// Cerrar al navegar (móvil: clic en enlace del sidebar)
if (sidebar) {
sidebar.querySelectorAll('.nav-link').forEach(function (link) {
link.addEventListener('click', function () {
if (window.innerWidth < 992) closeSidebar();
});
});
}
// ── 4. Visibility control ────────────────────────────────────────────────
// El CSS ya maneja display vía media queries; solo necesitamos que el botón
// sea display:none en desktop y visible en mobile. Lo hacemos por CSS inline
// inicial y dejamos que styles.css lo maneje vía #sidebar-toggle.
// Aplicamos clase específica para que el CSS pueda targetarla:
// .lab-sidebar-toggle { display: none } en >=992px lo hace styles.css
// via #sidebar-toggle { display: none !important }
})();
lab_configuracion.php
+1
View File
@@ -328,5 +328,6 @@ async function guardar() {
}
}
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_dashboard.php
+1
View File
@@ -306,5 +306,6 @@ const formatFecha = s => s ? new Date(s).toLocaleString('es-CO', {day:'2-digit',
cargarStats();
setInterval(cargarStats, 60000);
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_domicilios.php
+1
View File
@@ -1155,5 +1155,6 @@ function verRespuestaFF(envioId) {
_modalRespForm.show();
}
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_enfermeras.php
+1
View File
@@ -425,5 +425,6 @@ async function guardarAcceso() {
cargarEnfermeras();
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_formulario_builder.php
+1
View File
@@ -1168,5 +1168,6 @@ document.addEventListener('DOMContentLoaded', async () => {
}
});
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_formularios.php
+1
View File
@@ -821,5 +821,6 @@ document.addEventListener('DOMContentLoaded', async () => {
cargarFormularios();
});
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_ordenes.php
+1
View File
@@ -451,5 +451,6 @@ function mostrarToast(msg, tipo='success') {
cargarLista();
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_pacientes.php
+1
View File
@@ -372,5 +372,6 @@ function mostrarToast(msg, tipo = 'success') {
// Init
cargarLista();
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_reportes.php
+1
View File
@@ -347,5 +347,6 @@ const formatFecha = s => s ? new Date(s).toLocaleString('es-CO', {day:'2-digit',
cargarTodo();
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_terminos.php
+1
View File
@@ -267,5 +267,6 @@ try {
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>
lab_usuarios.php
+1
View File
@@ -568,5 +568,6 @@ document.getElementById('r_slug').addEventListener('input', function() {
}
})();
</script>
<script src="assets/js/lab-sidebar.js"></script>
</body>
</html>