responsive: breakpoints unificados, header mobile, sidebar toggle, tablas scroll
This commit is contained in:
Lizandro Guarnizo
+134
-75
@@ -162,56 +162,7 @@ body {
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
/* Responsive behavior: collapse sidebar on small screens */
|
||||
@media (max-width: 991.98px) {
|
||||
.sidebar {
|
||||
transform: translateX(-100%);
|
||||
width: 220px;
|
||||
left: 0;
|
||||
transition: transform 0.25s ease;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
box-shadow: 2px 0 20px rgba(0,0,0,0.2);
|
||||
z-index: 1200;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Overlay used to block background when sidebar open */
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.35);
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Make header actions wrap to avoid overflow */
|
||||
.content-header {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* hide status badge on small screens (desktop-only) */
|
||||
.status-badge { display: none !important; }
|
||||
}
|
||||
|
||||
/* Desktop: ensure sidebar visible */
|
||||
@media (min-width: 992px) {
|
||||
.sidebar { transform: translateX(0); }
|
||||
}
|
||||
/* Responsive: ver bloque unificado al final del archivo */
|
||||
.content-header {
|
||||
background: white;
|
||||
padding: 20px 30px;
|
||||
@@ -494,10 +445,6 @@ body {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
padding: 15px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 15px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
@@ -759,34 +706,146 @@ body {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar.show,
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
box-shadow: 2px 0 20px rgba(0,0,0,0.2);
|
||||
z-index: 1200;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════
|
||||
RESPONSIVE — breakpoints unificados
|
||||
═══════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Móvil (< 576px) ───────────────────────────────── */
|
||||
@media (max-width: 575.98px) {
|
||||
.content-header {
|
||||
padding: 15px 20px;
|
||||
padding: 10px 12px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.content-header h1 {
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100vw - 80px);
|
||||
}
|
||||
.content-header small {
|
||||
font-size: .72rem;
|
||||
}
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.header-actions .btn {
|
||||
padding: 6px 10px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 20px 15px;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 12px;
|
||||
}
|
||||
.card-stat-number {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
/* Tablas: scroll horizontal */
|
||||
.table-responsive {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 8px 10px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
/* Ocultar columnas secundarias de tabla en móvil muy pequeño */
|
||||
.table .d-xs-none { display: none !important; }
|
||||
/* Botones de acción en tablas: solo iconos */
|
||||
.table td .btn-sm {
|
||||
padding: 4px 6px;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.table td .btn-sm span,
|
||||
.table td .btn-sm .btn-text { display: none; }
|
||||
/* Cards de estadísticas: 2 por fila */
|
||||
.row > [class*='col-xl-3'] {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
/* Modales: full width */
|
||||
.modal-dialog {
|
||||
margin: 0.5rem;
|
||||
max-width: calc(100% - 1rem);
|
||||
}
|
||||
/* Sidebar toggle: siempre visible */
|
||||
#sidebar-toggle { display: inline-flex !important; }
|
||||
}
|
||||
|
||||
/* ── Tablet (576px – 991px) ────────────────────────── */
|
||||
@media (min-width: 576px) and (max-width: 991.98px) {
|
||||
.content-header {
|
||||
padding: 12px 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.content-header h1 {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
.header-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
.tab-content {
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
.card-stat-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
#sidebar-toggle { display: inline-flex !important; }
|
||||
}
|
||||
|
||||
/* ── Móvil + Tablet: sidebar oculto / overlay ──────── */
|
||||
@media (max-width: 991.98px) {
|
||||
.sidebar {
|
||||
transform: translateX(-100%);
|
||||
width: 240px;
|
||||
transition: transform 0.25s ease;
|
||||
box-shadow: none;
|
||||
}
|
||||
.sidebar.open,
|
||||
.sidebar.show {
|
||||
transform: translateX(0);
|
||||
box-shadow: 2px 0 24px rgba(0,0,0,.25);
|
||||
z-index: 1200;
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
/* Overlay semitransparente detrás del sidebar */
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,.38);
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
}
|
||||
/* Ocultar badge de estado (sin espacio en mobile) */
|
||||
.status-badge { display: none !important; }
|
||||
/* Botón «Cerrar Sesión» del header: solo icono en mobile */
|
||||
.header-actions .btn-outline-danger .fa-sign-out-alt ~ * { }
|
||||
}
|
||||
|
||||
/* ── Desktop (>= 992px) ────────────────────────────── */
|
||||
@media (min-width: 992px) {
|
||||
.sidebar {
|
||||
transform: translateX(0) !important;
|
||||
width: 280px;
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
}
|
||||
/* Ocultar botón hamburguesa en desktop */
|
||||
#sidebar-toggle { display: none !important; }
|
||||
}
|
||||
|
||||
/* Dark Mode Support */
|
||||
|
||||
@@ -81,33 +81,29 @@ try {
|
||||
|
||||
<!-- Header -->
|
||||
<header class="content-header">
|
||||
<div>
|
||||
<h1><i class="fas fa-robot"></i> Sistema de Gestión WhatsApp Bot</h1>
|
||||
<small class="text-muted">
|
||||
<div style="min-width:0;flex:1">
|
||||
<h1><i class="fas fa-robot d-none d-sm-inline"></i> <span class="d-none d-sm-inline">Sistema de Gestión</span> WhatsApp Bot</h1>
|
||||
<small class="text-muted d-none d-md-block">
|
||||
<i class="fas fa-user"></i> Conectado como <strong><?= htmlspecialchars(
|
||||
|
||||
// Preferir nombre completo del admin si existe
|
||||
|
||||
(
|
||||
$_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['username'] ?? ADMIN_USERNAME
|
||||
)
|
||||
$_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['username'] ?? ADMIN_USERNAME
|
||||
) ?></strong>
|
||||
| <i class="fas fa-clock"></i> Sesión desde: <?= date('H:i:s', $_SESSION['login_time'] ?? time()) ?>
|
||||
</small>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<!-- Sidebar toggle (visible en pantallas pequeñas) -->
|
||||
<button id="sidebar-toggle" class="btn btn-light d-md-none me-2" title="Abrir menú">
|
||||
<button id="sidebar-toggle" class="btn btn-light me-1" title="Abrir menú" style="display:none">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="status-badge">
|
||||
<span class="status-dot status-online"></span>
|
||||
<span class="status-text">En línea</span>
|
||||
</div> <button class="btn btn-primary me-2" onclick="refreshData()">
|
||||
<i class="fas fa-sync-alt"></i> Actualizar
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm d-none d-sm-inline-flex align-items-center gap-1" onclick="refreshData()">
|
||||
<i class="fas fa-sync-alt"></i> <span class="d-none d-lg-inline">Actualizar</span>
|
||||
</button>
|
||||
<a href="logout.php" class="btn btn-outline-danger" onclick="return confirm('¿Está seguro que desea cerrar sesión?')">
|
||||
<i class="fas fa-sign-out-alt"></i> Cerrar Sesión
|
||||
<a href="logout.php" class="btn btn-outline-danger btn-sm d-none d-sm-inline-flex align-items-center gap-1" onclick="return confirm('¿Está seguro que desea cerrar sesión?')">
|
||||
<i class="fas fa-sign-out-alt"></i> <span class="d-none d-lg-inline">Cerrar Sesión</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user