jonara
/
Gestion-inventario
mirror of https://github.com/jonander2233/Gestion-inventario
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhance user management page with improved styling, layout adjustments, and action buttons (css v1)

This commit is contained in:
jon ander 2025-04-03 17:34:00 +02:00
parent df33bcd7ae
commit 6bf730dc76
2 changed files with 108 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
src/main/resources/static/css/table_style.css
View File

@ -1,54 +1,83 @@
body { body {
font-family: Arial, sans-serif; background: linear-gradient(45deg, #49a09d, #5f2c82);
display: flex; font-family: sans-serif;
flex-direction: column; font-weight: 100;
align-items: center; }
margin: 0; h2{
padding: 20px; color: #f0f0f0;
} }
.container { .contenido {
width: 80%; position: absolute;
max-width: 800px; top: 40%;
border: 1px solid #ccc; left: 50%;
padding: 10px; transform: translate(-50%, -50%);
} }
.header { .table-container {
display: flex; height: 400px; /* Altura fija del contenedor */
justify-content: space-between; overflow-y: auto; /* Scroll vertical */
align-items: center; /*border: 1px solid #ddd; !* Borde opcional *!*/
padding: 10px; }
background-color: #f4f4f4; table {
} width: 800px;
table { border-collapse: collapse;
width: 100%; overflow: hidden;
border-collapse: collapse; box-shadow: 0 0 20px rgba(0,0,0,0.1);
} }
thead {
background-color: #ddd; th, td {
} padding: 15px;
th, td { background-color: rgba(255,255,255,0.2);
padding: 10px; color: #fff;
border: 1px solid #ccc; }
text-align: left;
} th {
.footer { text-align: left;
padding: 10px; }
background-color: #f4f4f4;
text-align: right; thead {
} th {
.id-column { background-color: #55608f;
width: 50px; /* Columna ID más estrecha */ }
} }
.email-column {
width: 250px; /* Columna Email más ancha */ tbody {
} tr {
.table-container { &:hover {
height: 400px; /* Altura fija del contenedor */ background-color: rgba(255,255,255,0.3);
overflow-y: auto; /* Scroll vertical */ }
border: 1px solid #ddd; /* Borde opcional */ }
} td {
.action-buttons { position: relative;
display: flex; &:hover {
justify-content: center; &:before {
gap: 10px; /* Espacio entre botones */ content: "";
} position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
background-color: rgba(255,255,255,0.2);
z-index: -1;
}
}
}
}
.celda-acciones{
text-align: center;
padding: 0;
}
.celda-acciones button{
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
padding: 5px;
margin: 1px/*vertical*/ 10px/*horizontal*/;
}
.celda-acciones button:hover {
background-color: #0056b3;
}

48
src/main/resources/templates/user_management.html
View File

@ -2,30 +2,34 @@
<html lang="es" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"> <html lang="es" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Gestión de Usuarios</title> <title>Gestión de Usuarios</title>
<!-- <link rel="stylesheet" th:href="@{/css/table_style.css}">--> <link rel="stylesheet" th:href="@{/css/table_style.css}">
</head> </head>
<body> <body>
<h2>Gestión de Usuarios</h2> <div class="contenido">
<hr> <h2>Gestión de Usuarios</h2>
<table border="1px"> <div class="table-container">
<thead> <table>
<tr> <thead>
<th>ID</th> <tr>
<th>NOMBRE</th> <th>ID</th>
<th>ROL</th> <th>Nombre</th>
<th>EMAIL</th> <th>Rol</th>
</tr> <th>Email</th>
</thead> <th>Acciones</th>
<tbody> </tr>
<tr th:each="user : ${users}"> </thead>
<td th:text="${user.id}"></td> <tbody>
<td th:text="${user.nombre}"></td> <tr th:each="user : ${users}">
<td th:text="${user.role}"></td> <td th:text="${user.id}"></td>
<td th:text="${user.mail}"></td> <td th:text="${user.nombre}"></td>
</tr> <td th:text="${user.role}"></td>
</tbody> <td th:text="${user.mail}"></td>
</table> <td class="celda-acciones"><button>✏️</button> <button>🗑️</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</body> </body>
</html> </html>