@ -8,6 +8,13 @@
< meta charset = "UTF-8" >
< title > Lista: Alumnos< / title >
< style >
.table td.scrollable-cell .skill-cell {
width: 150px;
min-height: 50px;
}
.nombre-cell{
width: 200px;
}
< / style >
< / head >
< body >
@ -56,7 +63,7 @@
< / th >
< th class = "table-header" >
< a th:href = "@{'/buscador/alumnos/page/' + ${currentPage} + '?sortField=dni&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}" >
Numero de documento
Num Doc
< / a >
< / th >
< th class = "table-header" >
@ -92,10 +99,12 @@
< / thead >
< tbody >
< tr class = "cell" th:each = "alumno :${alumnos}" th:data-id = "${alumno.id}" >
< td class = "nombre-cell" >
< i class = "edit-icon fas fa-pen-square" > < / i >
< i class = "delete-icon fas fa-ban hide-icon" > < / i >
[[${alumno.nombre}]]
< td >
< div class = "nombre-cell" >
< i class = "edit-icon fas fa-pen-square" > < / i >
< i class = "delete-icon fas fa-ban hide-icon" > < / i >
[[${alumno.nombre}]]
< / div >
< / td >
< td > [[${alumno.apellido}]]< / td >
< td > [[${alumno.apellido2}]]< / td >
@ -106,10 +115,20 @@
< td > [[${alumno.correo}]]< / td >
< td > [[${alumno.correo2}]]< / td >
< td > [[${alumno.nacionalidad}]]< / td >
< td class = "keywords-cell" > [[${alumno.keywords}]]< / td >
< td > [[${alumno.ciclo.nombre}]]< / td >
< td class = "keywords-cell" >
< td class = "keywords-cell" >
< div class = "scrollable-content" >
[[${alumno.keywords}]]
< / div >
< / td >
< td class = "scrollable-cell" >
< div class = "scrollable-content skill-cell" >
[[${alumno.ciclo.nombre}]]
< / div >
< / td >
< td class = "scrollable-cell" >
< div class = "scrollable-content skill-cell" >
< span th:each = "skill : ${alumno.skills}" th:text = "${skill.nombre} + ' '" > < / span >
< / div >
< / td >
< / tr >
@ -283,10 +302,16 @@
< td > ${alumno.correo}< / td >
< td > ${alumno.correo2}< / td >
< td > ${alumno.nacionalidad}< / td >
< td class = "keywords-cell" > ${alumno.keywords}< / td >
< td > ${alumno.ciclo.nombre}< / td >
< td class = "keywords-cell" >
< div class = "scrollable-content" >
${alumno.keywords}
< / div >
< / td >
< td > ${alumno.ciclo.nombre}< / td >
< td class = "keywords-cell" >
< div class = "scrollable-content" >
${alumno.skills.map(skill => skill.nombre).join(', ')}
< / div >
< / td >
`;
tableBody.appendChild(row);
@ -346,19 +371,6 @@
}
});
});
/////////////////MOUSE SROLL FOR KEYWORD AND SKILLS//////////////////////
// Select all elements with the 'keywords-cell' class
const cells = document.querySelectorAll('.keywords-cell');
// Add a 'wheel' event listener to each cell
cells.forEach(cell => {
cell.addEventListener('wheel', function(e) {
// Prevent the default behavior (vertical scroll)
e.preventDefault();
// Scroll horizontally instead
this.scrollLeft += e.deltaY;
}, { passive: false }); // Use passive: false to make preventDefault() work
});
< / script >
< / body >
< / html >
vicsash
6 months ago