Arreglar errores de estética 1
This commit is contained in:
TioSam77
+4
-4
@@ -19,10 +19,10 @@ const App = () => {
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path='*' element={<Directorio/>}></Route>
|
||||
<Route path='/d2' element={<Directorio2/>}></Route>
|
||||
<Route path='/login' element={<Login/>}></Route>
|
||||
<Route path='/MDU' element={<MDUser/>}></Route>
|
||||
<Route path='/CU' element={<CrearUsuario/>}></Route>
|
||||
<Route path='/Formulario' element={<Directorio2/>}></Route>
|
||||
<Route path='/Acceso' element={<Login/>}></Route>
|
||||
<Route path='/Modificacion y Borrado de Usuario' element={<MDUser/>}></Route>
|
||||
<Route path='/Creacion de Usuario' element={<CrearUsuario/>}></Route>
|
||||
</Routes>
|
||||
<Footer />
|
||||
</Router>
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
.crear-usuario-container {
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding: 1.5em;
|
||||
background: #f0f0f0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
select {
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
margin: 8px auto;
|
||||
padding: 1.5em;
|
||||
background: #f0f0f0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 1em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0.6em;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border: none;
|
||||
border-radius: 12px !important; /* Redondear un poco más el botón */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.crear-usuario-container {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 1em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0.6em;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.crear-usuario-container {
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.formulario-container {
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
margin: 20px auto;
|
||||
padding: 1.5em;
|
||||
background: white;
|
||||
box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
+72
-72
@@ -1,75 +1,75 @@
|
||||
.md-user-container {
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding: 1.5em;
|
||||
background: #f0f0f0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
select {
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
margin: 10px auto;
|
||||
padding: 1.5em;
|
||||
background: #f0f0f0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 1em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.modificar-button,
|
||||
.borrar-button {
|
||||
padding: 0.6em;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.modificar-button {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.modificar-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.borrar-button {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.borrar-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.md-user-container {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 1em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.modificar-button,
|
||||
.borrar-button {
|
||||
padding: 0.6em;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modificar-button {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.modificar-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.borrar-button {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.borrar-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.md-user-container {
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
.required {
|
||||
color: red;
|
||||
margin-left: 5px; /* Ajusta el margen a tu preferencia */
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@ const MDUser = ({ usuario }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="md-user-container">
|
||||
<div className="md-user-container" style={{ backgroundColor: '#d59f0f' }}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="nombreCompleto">Nombre completo:<span className="required">*</span></label>
|
||||
<input
|
||||
|
||||
+24
-4
@@ -52,6 +52,26 @@ const Mapeo = ({ filters }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const getPageNumbers = () => {
|
||||
const maxPagesToShow = 6;
|
||||
const halfRange = Math.floor(maxPagesToShow / 2);
|
||||
let start = Math.max(1, currentPage - halfRange);
|
||||
let end = Math.min(totalPages, currentPage + halfRange);
|
||||
|
||||
if (currentPage - halfRange < 1) {
|
||||
end = Math.min(totalPages, end + (halfRange - currentPage + 1));
|
||||
}
|
||||
if (currentPage + halfRange > totalPages) {
|
||||
start = Math.max(1, start - (currentPage + halfRange - totalPages));
|
||||
}
|
||||
|
||||
const pages = [];
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
return pages;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
{profesores.map(profesor => {
|
||||
@@ -69,10 +89,10 @@ const Mapeo = ({ filters }) => {
|
||||
Anterior
|
||||
</a>
|
||||
</li>
|
||||
{Array.from({ length: totalPages }, (_, index) => (
|
||||
<li key={index + 1} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => setCurrentPage(index + 1)}>
|
||||
{index + 1}
|
||||
{getPageNumbers().map(page => (
|
||||
<li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => setCurrentPage(page)}>
|
||||
{page}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@ import MDUser from '../components/MDUser';
|
||||
|
||||
const Directorio = () => {
|
||||
return (
|
||||
<div className=" ">
|
||||
<div className="Modificar y Borrar Usuario">
|
||||
<MDUser/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user