Responsividad dashboard importadores

This commit is contained in:
2025-05-12 15:35:24 -06:00
parent 485e249dab
commit ea794dba15
18 changed files with 622 additions and 125 deletions

View File

@@ -16,7 +16,8 @@
position: fixed;
top: 0;
left: 0;
padding-top: 60px;
padding-top: 56px; /* Alineado con la altura de la navbar */
z-index: 1040; /* Asegura que esté por encima del contenido */
}
.sidebar .nav-link {
color: #ccc;
@@ -27,34 +28,43 @@
color: #fff;
}
.content {
margin-left: 220px;
margin-top: 56px; /* Ajusta debajo de navbar */
padding: 40px 20px;
position: relative;
z-index: 1;
background-color: #f4f6f9; /* Asegura fondo uniforme */
transition: margin-left 0.3s ease;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
z-index: 1050;
}
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) {
.content {
margin-left: 250px; /* Ancho del sidebar */
}
}
/* En móviles, sin margen lateral */
@media (max-width: 767.98px) {
.content {
margin-left: 0;
}
}
.card {
border-radius: 12px;
}
</style>
</head>
<?php include __DIR__ . '/../partials/sidebar_importador.php'; ?>
<body>
<br><br><br>
<div class="content">
<h4 class="mb-4">🚛 Alta de Transportista</h4>
<form action="/IMPORTADORES/transportistas/guardar" method="POST" class="card p-4 shadow-sm">

View File

@@ -20,7 +20,7 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
body {
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f4f6f9;
}
@@ -31,7 +31,8 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
position: fixed;
top: 0;
left: 0;
padding-top: 60px;
padding-top: 56px; /* Alineado con la altura de la navbar */
z-index: 1040; /* Asegura que esté por encima del contenido */
}
.sidebar .nav-link {
color: #ccc;
@@ -42,16 +43,32 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
color: #fff;
}
.content {
margin-left: 220px;
margin-top: 56px; /* Ajusta debajo de navbar */
padding: 40px 20px;
position: relative;
z-index: 1;
background-color: #f4f6f9; /* Asegura fondo uniforme */
transition: margin-left 0.3s ease;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
z-index: 1050;
}
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) {
.content {
margin-left: 250px; /* Ancho del sidebar */
}
}
/* En móviles, sin margen lateral */
@media (max-width: 767.98px) {
.content {
margin-left: 0;
}
}
.card {
border-radius: 12px;
}

View File

@@ -22,7 +22,8 @@ session_start();
position: fixed;
top: 0;
left: 0;
padding-top: 60px;
padding-top: 56px; /* Alineado con la altura de la navbar */
z-index: 1040; /* Asegura que esté por encima del contenido */
}
.sidebar .nav-link {
color: #ccc;
@@ -33,20 +34,35 @@ session_start();
color: #fff;
}
.content {
margin-left: 220px;
margin-top: 56px; /* Ajusta debajo de navbar */
padding: 40px 20px;
position: relative;
z-index: 1;
background-color: #f4f6f9; /* Asegura fondo uniforme */
transition: margin-left 0.3s ease;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
z-index: 1050;
}
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) {
.content {
margin-left: 250px; /* Ancho del sidebar */
}
}
/* En móviles, sin margen lateral */
@media (max-width: 767.98px) {
.content {
margin-left: 0;
}
}
.card {
border-radius: 12px;
}
</style>
</head>
<body>

View File

@@ -25,7 +25,8 @@
position: fixed;
top: 0;
left: 0;
padding-top: 60px;
padding-top: 56px; /* Alineado con la altura de la navbar */
z-index: 1040; /* Asegura que esté por encima del contenido */
}
.sidebar .nav-link {
color: #ccc;
@@ -36,20 +37,35 @@
color: #fff;
}
.content {
margin-left: 220px;
margin-top: 56px; /* Ajusta debajo de navbar */
padding: 40px 20px;
position: relative;
z-index: 1;
background-color: #f4f6f9; /* Asegura fondo uniforme */
transition: margin-left 0.3s ease;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
z-index: 1050;
}
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) {
.content {
margin-left: 250px; /* Ancho del sidebar */
}
}
/* En móviles, sin margen lateral */
@media (max-width: 767.98px) {
.content {
margin-left: 0;
}
}
.card {
border-radius: 12px;
}
</style>
</head>