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

Add search form and filter options to list.html; enhance table styling in table_style.css

This commit is contained in:
jon ander 2025-04-29 20:02:57 +02:00
parent 138ba899f3
commit e7eeb45db1
2 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,9 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
tr{
text-align: left;
}
tbody tr:hover { tbody tr:hover {
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
} }
@ -42,6 +44,7 @@ td {
table { table {
border-collapse: collapse; border-collapse: collapse;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
width: 100%;
} }
.table-container { .table-container {
@ -50,16 +53,19 @@ table {
border-radius: 10px; border-radius: 10px;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
min-width: 500px;
} }
.table1 thead { .table1 thead {
position: sticky; position: sticky;
top: 0%; top: 0;
} }
.celda-acciones { .celda-acciones {
display: flex; display: flex ;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
} }
.celda-acciones button { .celda-acciones button {
@ -68,7 +74,7 @@ table {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
margin: 1px auto; margin: 1px 0;
} }
.celda-acciones button:hover { .celda-acciones button:hover {
@ -78,11 +84,11 @@ table {
.botones { .botones {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-evenly;
width: 100%; width: 100%;
gap: 10px;
} }
a{ a{
width: 100%; width: 220px;
} }
.botones button { .botones button {
margin: 10px 0; margin: 10px 0;

33
src/main/resources/templates/list.html
View File

@ -7,6 +7,21 @@
<body> <body>
<div class="contenido"> <div class="contenido">
<h2 th:text="${title}"></h2> <h2 th:text="${title}"></h2>
<!-- Formulario de búsqueda -->
<form th:action="@{/search}" method="get" class="search-form">
<input type="text" name="query" placeholder="Buscar..." required>
<button type="submit">Buscar</button>
</form>
<label for="headers">Filtro:</label>
<select id="headers" name="">
<option value="">-- Sin filtro --</option>
<option th:each="headers : ${headers}"
th:value="${headers}"
th:text="${headers}">
</option>
</select>
<div class="table-container"> <div class="table-container">
<table class="table1"> <table class="table1">
<thead> <thead>
@ -17,14 +32,16 @@
<tbody> <tbody>
<tr th:each="item : ${items}"> <tr th:each="item : ${items}">
<td th:each="value : ${item.values}" th:text="${value}"></td> <td th:each="value : ${item.values}" th:text="${value}"></td>
<td class="celda-acciones"> <td>
<button th:if="${actionsUrl.edit}" th:href="${actionsUrl.edit} + '/' + ${item.id}" th:title="Editar">✏️</button> <div class="celda-acciones">
<form th:if="${actionsUrl.delete}" th:action="@{/delete_user}" method="post" style="display:inline;"> <button th:if="${actionsUrl.edit}" th:href="${actionsUrl.edit} + '/' + ${item.id}" th:title="Editar">✏️</button>
<input type="hidden" name="id" th:value="${item.id}" /> <form th:if="${actionsUrl.delete}" th:action="@{/delete_user}" method="post" style="display:inline;">
<button type="submit" th:title="Borrar" onclick="return confirm('¿Estás seguro de que deseas borrar este elemento?');"> <input type="hidden" name="id" th:value="${item.id}" />
🗑️ <button type="submit" th:title="Borrar" onclick="return confirm('¿Estás seguro de que deseas borrar este elemento?');">
</button> 🗑️
</form> </button>
</form>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>