Ajustes al controladores de operaciones crud que usa el administrador

master
vicsash 3 months ago
parent fb30b05a8a
commit 86da3b9865

@ -1,173 +1,461 @@
.header {
font-size: 2em;
display: flex;
background-color: blue;
color: white;
justify-content: space-between;
align-items: center;
position: relative;
}
.header::before,
.header::after {
content: '';
flex: 1;
}
.header::before {
order: -1;
}
.logout-button {
position: fixed;
top: 0px;
right: 0px;
background-color: red;
order: 2;
}
.logout-button{
color: white;
border: none;
text-decoration: none;
font-size: 20px;
padding: 0px;
margin: 0px;
border-radius: 0;
background-color: #ed4040;
font-size: 1.5em;
margin: auto;
}
/* TOOLBABR-INPUT-PDF*/
.toolbar {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
justify-content: space-between;
padding: 0.2vw;
box-sizing: border-box;
}
th {
background-color: #f2f2f2;
color: black;
padding: 10px;
border: 2px solid #ddd;
.toolbar .button-group{
display: flex;
justify-content: right;
}
h1 {
.pdfButton {
font-size: 0.5em; /* Adjust as needed */
padding: 1em;
margin : 0.25em;
width: auto;
white-space: normal;
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 3vw;
color: white;
margin: 0 0 50px;
padding-top: 0;
padding-left: 0;
padding-right: 0;
width: 100%;
position: relative;
}
/*--TABLE --*/
.table {
width: 100%;
table-layout: auto!important;
table-layout: fixed;
border: black 2px;
}
.table thead th {
position: sticky;
top: 0;
background: #fff;
z-index: 10;
width: 300px !important; /* Set a specific width */
.scrollable-cell {
overflow: auto;
white-space: normal;
}
.table td{
border: 2px solid #ddd;
.table td, .table th {
overflow: auto;
white-space: normal;
}
.table td.scrollable-cell .scrollable-content {
overflow-y: auto !important; /* Enables vertical scrollbar if content exceeds cell height */
white-space: normal; /* Allows text to wrap to next line */
max-height: 25px !important; /* Set a specific height */
.table-container{
display: block;
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.table .td.scrollable-cell .keyword-cell {
min-width: 300px !important;
.table td, .table th {
font-size: 1em; /* Adjust as needed */
padding: 10px;
}
.table tr td:first-child {
min-width: 150px !important;
.table td.scrollable-cell .scrollable-content {
white-space: normal;
max-height: 70px;
overflow-x: hidden;
}
@media screen and (max-width: 600px) {
.table {
/* TALBE SIZES */
@media screen and (min-width: 1900px) {
.header h1 {
font-size: 3.5em;
}
.logout-button {
font-size: 3em;
}
.toolbar h1 {
font-size: 1.2em;
}
}
@media screen and (max-width: 600px) {
.pdfButton {
font-size: 1.2em;
}
#create-icon{
font-size: 2.5em;
}
input{
font-size: 2.5em;
}
.table td, .table th {
font-size: 14px;
padding: 5px;
font-size: 2.2em;
}
#edit-icon, #delete-icon {
min-width: 16px;
.table td.scrollable-cell .scrollable-content {
max-height: 140px;
}
.edit-icon {
font-size: 2.5em;
}
.delete-icon {
font-size: 2.5em;
}
}
@media screen and (max-width: 400px) {
.table td, .table th {
font-size: 12px;
padding: 2px;
@media screen and (min-width: 1500px) {
.header h1 {
font-size: 3em;
}
.logout-button {
font-size: 2.5em;
}
.toolbar h1 {
font-size: 1em;
}
#edit-icon, #delete-icon {
min-width: 12px;
.pdfButton {
font-size: 1em;
}
#create-icon{
font-size: 2em;
}
input{
font-size: 2em;
}
.table td, .table th {
font-size: 1.8em;
}
.table td.scrollable-cell .scrollable-content {
max-height: 120px;
}
.edit-icon {
font-size: 2em;
}
.delete-icon {
font-size: 2em;
}
}
.table tr {
height: 10%;
}
body {
margin: 0;
padding: 0;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #007BFF;
padding: 0.2vw;
box-sizing: border-box;
}
@media screen and (min-width: 1000px) {
.header h1 {
font-size: 2.5em;
}
.logout-button {
font-size: 2em;
}
.toolbar h1 {
font-size: 0.75em;
}
.pdfButton {
font-size: 0.5em;
padding: 1em;
margin : 0.25em;
width: auto;
white-space: normal;
text-align: center;
}
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
}
i.fas.fa-arrow-left {
z-index: 1;
pointer-events: auto;
}
.button-group {
display: flex;
flex-direction: row;
align-items: center;
z-index: 1;
.pdfButton {
font-size: 0.75em;
}
#create-icon{
font-size: 1.75em;
}
input{
font-size: 1.75em;
}
.table td, .table th {
font-size: 1.5em;
}
.table td.scrollable-cell .scrollable-content {
max-height: 100px;
}
.edit-icon {
font-size: 1.25em;
}
.delete-icon {
font-size: 1.25em;
}
}
.header button {
margin-right: auto;
@media screen and (max-width: 800px) {
.header h1 {
font-size: 1em;
}
.logout-button {
font-size: 0.8em;
}
.toolbar h1 {
font-size: 0.3em;
}
.pdfButton {
font-size: 0.3em;
}
#create-icon{
font-size: 0.7em;
}
input{
font-size: 0.7em;
}
.table td, .table th {
font-size: 0.7em;
}
.table td.scrollable-cell .scrollable-content {
max-height: 30px;
}
.edit-icon {
font-size: 0.75em;
}
.delete-icon {
font-size: 0.75em;
}
.table td, .table th{
width: 90%;
}
}
.logout-button {
position: relative;
@media screen and (max-width: 700px) {
.header h1 {
font-size: 0.9em;
}
.logout-button {
font-size: 0.6em;
}
.toolbar h1 {
font-size: 0.3em;
}
.pdfButton {
font-size: 0.3em;
}
#create-icon{
font-size: 0.6em;
}
input{
font-size: 0.6em;
}
.table td, .table th {
font-size: 0.6em;
}
.table td.scrollable-cell .scrollable-content {
max-height: 25px;
}
.edit-icon {
font-size: 0.5em;
}
.delete-icon {
font-size: 0.5em;
}
.table td, .table th{
width: 80%;
}
}
.logout-button {
position: relative;
@media screen and (max-width: 600px) {
.header h1 {
font-size: 0.8em;
}
.logout-button {
font-size: 0.5em;
}
.toolbar h1 {
font-size: 0.2em;
}
.pdfButton {
font-size: 0.2em;
}
#create-icon{
font-size: 0.5em;
}
input{
font-size: 0.5em;
}
.table td, .table th {
font-size: 0.5em;
}
.table td.scrollable-cell .scrollable-content {
max-height: 18px;
}
.edit-icon {
font-size: 0.25em;
}
.delete-icon {
font-size: 0.25em;
}
.table td, .table th{
width: 70%;
}
}
html, body {
margin: 0;
padding: 0;
@media screen and (max-width: 500px) {
.header h1 {
font-size: 0.7em;
}
.logout-button {
font-size: 0.4em;
}
.toolbar h1 {
font-size: 0.18em;
}
.pdfButton {
font-size: 0.18em;
}
#create-icon{
font-size: 0.4em;
}
input{
font-size: 0.4em;
}
.table td, .table th {
font-size: 0.4em;
}
.table td.scrollable-cell .scrollable-content {
max-height: 17px;
}
.edit-icon {
font-size: 0.225em;
}
.delete-icon {
font-size: 0.225em;
}
.table td, .table th{
width: 60%;
}
}
.page{
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
@media screen and (max-width: 400px) {
.header h1 {
font-size: 0.6em;
}
.logout-button {
font-size: 0.35em;
}
.toolbar h1 {
font-size: 0.15em;
}
.pdfButton {
font-size: 0.15em;
}
#create-icon{
font-size: 0.35em;
}
input{
font-size: 0.35em;
}
.table td, .table th {
font-size: 0.35em;
}
.table td.scrollable-cell .scrollable-content {
max-height: 20px;
}
.edit-icon {
font-size: 0.2em;
}
.delete-icon {
font-size: 0.2em;
}
.table td, .table th{
width: 30%;
}
}
.page a{
padding:10px;
@media screen and (max-width: 300px) {
.header h1 {
font-size: 0.5em;
}
.logout-button {
font-size: 0.3em;
}
.toolbar h1 {
font-size: 0.13em;
}
.pdfButton {
font-size: 0.13em;
}
#create-icon{
font-size: 0.3em;
}
input{
font-size: 0.3em;
}
.table td, .table th {
font-size: 0.3em;
}
.table td.scrollable-cell .scrollable-content {
max-height: 20px;
}
.edit-icon {
font-size: 0.175em;
}
.delete-icon {
font-size: 0.175em;
}
.table td, .table th{
width: 30%;
}
}
.edit-icon, #delete-icon {
min-width: 24px;
@media screen and (max-width: 200px) {
.header h1 {
font-size: 0.4em;
}
.logout-button {
font-size: 0.25em;
}
.toolbar h1 {
font-size: 0.1em;
}
.pdfButton {
font-size: 0.1em;
}
#create-icon{
font-size: 0.25em;
}
input{
font-size: 0.25em;
}
.table td, .table th {
font-size: 0.25em;
}
.table td.scrollable-cell .scrollable-content {
max-height: 15px;
}
.edit-icon {
font-size: 0.15em;
}
.delete-icon {
font-size: 0.15em;
}
.table td, .table th{
width: 20%;
}
}
.edit-icon {
color: #ffa600;
margin-right: 2px;
margin-left: 2px;
font-size: 20px;
font-size: 1em;
}
.delete-icon {
color: red;
margin-left: 2px;
font-size: 20px;
font-size: 1em;
}
#create-icon {
color: green;
font-size: 20px;
font-size: 1em;
}
.inactive {
pointer-events: none;
@ -230,13 +518,12 @@ html, body {
.modal p{
font-size: 20px;
}
.scrollable-table {
overflow-x: auto;
}
.hide-icon {
display: none;
.page{
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.page a{
padding:10px;
}

@ -10,13 +10,6 @@
<meta charset="UTF-8">
<title>Lista: Alumnos</title>
<style>
.nombre-cell{
width: 200px;
}
.table td.scrollable-cell .skill-cell {
width: 150px;
min-height: 50px;
}
</style>
</head>
<body>
@ -42,7 +35,7 @@
</div>
<div class="scrollable-table">
<table class="table" id="table">
<table class="table table-hover table-bordered" id="table">
<thead class="thread-light">
<tr>
<th class="table-header">
@ -115,8 +108,10 @@
<tr class="cell" th:each="alumno :${alumnos}" th:data-id="${alumno.id}">
<td>
<div class ="nombre-cell">
<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>
<div class="icon-content">
<i class="edit-icon fas fa-pen-square"></i>
<i class="delete-icon fas fa-ban"></i>
</div>
[[${alumno.nombre}]]
</div>
</td>
@ -130,13 +125,13 @@
<td>[[${alumno.correo2}]]</td>
<td>[[${alumno.nacionalidad}]]</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content" th:utext="${#strings.replace(alumno.keywords, ',', ',&lt;br&gt;')}">
[[${alumno.keywords}]]
</div>
</td>
<td>[[${alumno.ciclo.nombre}]]</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content">
<span th:each="skill : ${alumno.skills}" th:text="${skill.nombre} + ' '"></span>
</div>
</td>
@ -316,7 +311,7 @@
<td>${alumno.correo2}</td>
<td>${alumno.nacionalidad}</td>
<td class="scrollable-cell keyword">
<div class="scrollable-content skill-cell">
<div class="scrollable-content">
${alumno.keywords}
</div>
</td>
@ -324,7 +319,7 @@
${alumno.ciclo.nombre}
</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content">
${alumno.skills.map(skill => skill.nombre).join(', ')}
</div>
</td>

@ -35,7 +35,7 @@
</div>
</div>
<div class="table-container">
<table class="table" id="table">
<table class="table table-hover table-bordered" id="table">
<thead class="thread-light">
<tr>
<th class="table-header">
@ -57,8 +57,10 @@
<tbody>
<tr class="cell" th:each="ciclo :${ciclos}" th:data-id="${ciclo.id}">
<td>
<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>
<div class="icon-content">
<i class="edit-icon fas fa-pen-square"></i>
<i class="delete-icon fas fa-ban"></i>
</div>
[[${ciclo.nombre}]]
</td>
<td>[[${ciclo.codigo}]]</td>

@ -36,7 +36,7 @@
</div>
<div class="table-container">
<table class="table" id="table">
<table class="table table-hover table-bordered" id="table">
<thead class="thread-light">
<tr>
<th class="table-header">
@ -74,8 +74,10 @@
<tbody>
<tr class="cell" th:each="contacto :${contactos}" th:data-id="${contacto.id}">
<td>
<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>
<div class="icon-content">
<i class="edit-icon fas fa-pen-square"></i>
<i class="delete-icon fas fa-ban"></i>
</div>
[[${contacto.nombre}]]
</td>
<td>[[${contacto.apellido}]]</td>

@ -2,7 +2,7 @@
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
@ -10,10 +10,9 @@
<meta charset="UTF-8">
<title>Lista Empresas</title>
<style>
.table td.scrollable-cell .skill-cell {
width: 300px;
min-height: 50px;
}
/*-- HEADER--*/
</style>
</head>
<body>
@ -39,7 +38,7 @@
</div>
<div class="table-container">
<table class="table" id="table">
<table class="table table-hover table-bordered" id="table">
<thead class="thread-light">
<tr>
<th class="table-header">
@ -78,20 +77,22 @@
<tr class="cell" th:each="empresa :${empresas}" th:data-id="${empresa.id}">
<td>
<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>
<div class="icon-content">
<i class="edit-icon fas fa-pen-square"></i>
<i class="delete-icon fas fa-ban"></i>
</div>
[[${empresa.nombre}]]
</td>
<td>[[${empresa.cif}]]</td>
<td>[[${empresa.correo}]]</td>
<td>[[${empresa.telefono}]]</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
[[${empresa.keywords}]]
<div class="scrollable-content" th:utext="${#strings.replace(empresa.keywords, ',', ',&lt;br&gt;')}">
<!-- Keywords will be inserted here with <br> tags after each comma -->
</div>
</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content">
[[${empresa.sector.nombre}]]
</div>
</td>
@ -153,9 +154,7 @@
}
var $table = $('#table');
var $modalDelete = $('#modalDelete');
var $myInput = $('#myInput');
var $createIcon = $('#create-icon');
var isSearchBarUsed = false;
$table.on('click', '.edit-icon', function (event) {
@ -390,12 +389,12 @@
<td>${empresa.correo}</td>
<td>${empresa.telefono}</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content">
${empresa.keywords}
</div>
</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content">
${empresa.sector.nombre}
</div>
</td>

@ -34,7 +34,7 @@
</div>
<div class="table-container">
<table class="table" id="table">
<table class="table table-hover table-bordered" id="table">
<thead class="thread-light">
<tr>
<th class="table-header">
@ -47,8 +47,12 @@
<tr class="cell" th:each="familia :${items}" th:data-id="${familia.id}">
<td>
<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>
<!--<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>-->
<div class="icon-content">
<i class="edit-icon fas fa-pen-square"></i>
<i class="delete-icon fas fa-ban"></i>
</div>
[[${familia.nombre}]]
</td>
</tr>

@ -10,10 +10,7 @@
<meta charset="UTF-8">
<title>Lista Ofertas</title>
<style>
.table td.scrollable-cell .skill-cell {
width: 250px;
min-height: 50px;
}
</style>
</head>
<body>
@ -39,7 +36,7 @@
</div>
<div class="scrollable-table">
<table class="table" id="table">
<table class="table table-hover table-bordered" id="table">
<thead class="thread-light">
<tr>
<th class="table-header">
@ -75,20 +72,22 @@
<tbody>
<tr class="cell" th:each="oferta :${ofertas}" th:data-id="${oferta.id}">
<td>
<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>
<div class="icon-content">
<i class="edit-icon fas fa-pen-square"></i>
<i class="delete-icon fas fa-ban"></i>
</div>
[[${oferta.nombre}]]
</td>
<td>[[${oferta.fecha}]]</td>
<td>[[${oferta.descripcion}]]</td>
<td>[[${oferta.sucursal.nombre}]]</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content">
[[${oferta.ciclo.nombre}]]
</div>
</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content">
<span th:each="skill : ${oferta.skills}" th:text="${skill.nombre} + ' '"></span>
</div>
</td>
@ -265,12 +264,12 @@
<td>${oferta.descripcion}</td>
<td>${oferta.sucursal.nombre}</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content ">
${oferta.ciclo.nombre}</td>
</div>
</td>
<td class="scrollable-cell">
<div class="scrollable-content skill-cell">
<div class="scrollable-content">
${oferta.skills.map(skill => skill.nombre).join(', ')}
</div>
</td>

@ -36,7 +36,7 @@
</div>
<div class="table-container">
<table class="table" id="table">
<table class="table table-hover table-bordered" id="table">
<thead class="thread-light">
<tr>
<th class="table-header">
@ -48,8 +48,10 @@
<tbody>
<tr class="cell" th:each="sector :${items}" th:data-id="${sector.id}">
<td>
<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>
<div class="icon-content">
<i class="edit-icon fas fa-pen-square"></i>
<i class="delete-icon fas fa-ban"></i>
</div>
[[${sector.nombre}]]
</td>
</tr>

@ -35,7 +35,7 @@
</div>
<div class="table-container">
<table class="table" id="table">
<table class="table table-hover table-bordered" id="table">
<thead class="thread-light">
<tr>
<th class="table-header">
@ -47,8 +47,10 @@
<tbody>
<tr class="cell" th:each="skill :${items}" th:data-id="${skill.id}">
<td>
<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>
<div class="icon-content">
<i class="edit-icon fas fa-pen-square"></i>
<i class="delete-icon fas fa-ban"></i>
</div>
[[${skill.nombre}]]
</td>
</tr>

@ -35,7 +35,7 @@
</div>
<div class="table-container">
<table class="table" id="table">
<table class="table table-hover table-bordered" id="table">
<thead class="thread-light">
<tr>
<th class="table-header">
@ -68,8 +68,10 @@
<tbody>
<tr class="cell" th:each="sucursal :${sucursales}" th:data-id="${sucursal.id}">
<td>
<i class="edit-icon fas fa-pen-square hide-icon"></i>
<i class="delete-icon fas fa-ban hide-icon"></i>
<div class="icon-content">
<i class="edit-icon fas fa-pen-square"></i>
<i class="delete-icon fas fa-ban"></i>
</div>
[[${sucursal.nombre}]]
</td>
<td>[[${sucursal.localidad}]]</td>

Loading…
Cancel
Save

Powered by INFORMATICA.FP.EDU.ES.