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

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

@ -7,6 +7,21 @@
<body>
<div class="contenido">
<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">
<table class="table1">
<thead>
@ -17,7 +32,8 @@
<tbody>
<tr th:each="item : ${items}">
<td th:each="value : ${item.values}" th:text="${value}"></td>
<td class="celda-acciones">
<td>
<div class="celda-acciones">
<button th:if="${actionsUrl.edit}" th:href="${actionsUrl.edit} + '/' + ${item.id}" th:title="Editar">✏️</button>
<form th:if="${actionsUrl.delete}" th:action="@{/delete_user}" method="post" style="display:inline;">
<input type="hidden" name="id" th:value="${item.id}" />
@ -25,6 +41,7 @@
🗑️
</button>
</form>
</div>
</td>
</tr>
</tbody>