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 {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 20px;
}
.container {
width: 80%;
max-width: 800px;
border: 1px solid #ccc;
padding: 10px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f4f4f4;
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: #ddd;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
}
.footer {
padding: 10px;
background-color: #f4f4f4;
text-align: right;
}
.id-column {
width: 50px; /* Columna ID más estrecha */
}
.email-column {
width: 250px; /* Columna Email más ancha */
}
.table-container {
height: 400px; /* Altura fija del contenedor */
overflow-y: auto; /* Scroll vertical */
border: 1px solid #ddd; /* Borde opcional */
}
.action-buttons {
display: flex;
justify-content: center;
gap: 10px; /* Espacio entre botones */
}
background: linear-gradient(45deg, #49a09d, #5f2c82);
font-family: sans-serif;
font-weight: 100;
}
h2{
color: #f0f0f0;
}
.contenido {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.table-container {
height: 400px; /* Altura fija del contenedor */
overflow-y: auto; /* Scroll vertical */
/*border: 1px solid #ddd; !* Borde opcional *!*/
}
table {
width: 800px;
border-collapse: collapse;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
th, td {
padding: 15px;
background-color: rgba(255,255,255,0.2);
color: #fff;
}
th {
text-align: left;
}
thead {
th {
background-color: #55608f;
}
}
tbody {
tr {
&:hover {
background-color: rgba(255,255,255,0.3);
}
}
td {
position: relative;
&:hover {
&:before {
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">
<head>
<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>
<body>
<h2>Gestión de Usuarios</h2>
<hr>
<table border="1px">
<thead>
<tr>
<th>ID</th>
<th>NOMBRE</th>
<th>ROL</th>
<th>EMAIL</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.nombre}"></td>
<td th:text="${user.role}"></td>
<td th:text="${user.mail}"></td>
</tr>
</tbody>
</table>
<div class="contenido">
<h2>Gestión de Usuarios</h2>
<div class="table-container">
<table>
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Rol</th>
<th>Email</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.nombre}"></td>
<td th:text="${user.role}"></td>
<td th:text="${user.mail}"></td>
<td class="celda-acciones"><button>✏️</button> <button>🗑️</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>