diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css index 9179693..48113cd 100644 --- a/src/main/resources/static/style.css +++ b/src/main/resources/static/style.css @@ -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; +} \ No newline at end of file diff --git a/src/main/resources/templates/list/alumnos.html b/src/main/resources/templates/list/alumnos.html index e054e90..8c4c469 100644 --- a/src/main/resources/templates/list/alumnos.html +++ b/src/main/resources/templates/list/alumnos.html @@ -10,13 +10,6 @@
@@ -115,8 +108,10 @@ | ||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-
-
+
+
+
+
[[${alumno.nombre}]]
|
@@ -130,13 +125,13 @@
[[${alumno.correo2}]] | [[${alumno.nacionalidad}]] |
-
+
[[${alumno.keywords}]]
|
[[${alumno.ciclo.nombre}]] |
-
+ |
@@ -316,7 +311,7 @@
${alumno.correo2} | ${alumno.nacionalidad} |
-
+
${alumno.keywords}
|
@@ -324,7 +319,7 @@
${alumno.ciclo.nombre}
-
+
${alumno.skills.map(skill => skill.nombre).join(', ')}
|
diff --git a/src/main/resources/templates/list/ciclos.html b/src/main/resources/templates/list/ciclos.html
index 03eecbc..e1d3062 100644
--- a/src/main/resources/templates/list/ciclos.html
+++ b/src/main/resources/templates/list/ciclos.html
@@ -35,7 +35,7 @@
@@ -57,8 +57,10 @@ | |||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-
-
+
+
+
+
[[${ciclo.nombre}]]
|
[[${ciclo.codigo}]] | diff --git a/src/main/resources/templates/list/contactos.html b/src/main/resources/templates/list/contactos.html index 052afe0..6b78665 100644 --- a/src/main/resources/templates/list/contactos.html +++ b/src/main/resources/templates/list/contactos.html @@ -36,7 +36,7 @@
@@ -74,8 +74,10 @@ | ||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-
-
+
+
+
+
[[${contacto.nombre}]]
|
[[${contacto.apellido}]] | diff --git a/src/main/resources/templates/list/empresas.html b/src/main/resources/templates/list/empresas.html index 321c210..bba9556 100644 --- a/src/main/resources/templates/list/empresas.html +++ b/src/main/resources/templates/list/empresas.html @@ -2,7 +2,7 @@ - + @@ -10,10 +10,9 @@
@@ -78,20 +77,22 @@ | |||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-
-
+
+
+
+
[[${empresa.nombre}]]
|
[[${empresa.cif}]] | [[${empresa.correo}]] | [[${empresa.telefono}]] |
-
- [[${empresa.keywords}]]
+
+
|
-
+
[[${empresa.sector.nombre}]]
|
@@ -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 @@
${empresa.correo} | ${empresa.telefono} |
-
+
${empresa.keywords}
|
-
+
${empresa.sector.nombre}
|
diff --git a/src/main/resources/templates/list/familias.html b/src/main/resources/templates/list/familias.html
index 3d17238..6aaae77 100644
--- a/src/main/resources/templates/list/familias.html
+++ b/src/main/resources/templates/list/familias.html
@@ -34,7 +34,7 @@
@@ -47,8 +47,12 @@ | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-
-
+
+
+
+
+
[[${familia.nombre}]]
|
@@ -75,20 +72,22 @@ | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-
-
+
+
+
+
[[${oferta.nombre}]]
|
[[${oferta.fecha}]] | [[${oferta.descripcion}]] | [[${oferta.sucursal.nombre}]] |
-
+
[[${oferta.ciclo.nombre}]]
|
-
+ |
@@ -265,12 +264,12 @@
${oferta.descripcion} | ${oferta.sucursal.nombre} |
-
+
${oferta.ciclo.nombre} |
-
+
${oferta.skills.map(skill => skill.nombre).join(', ')}
|
diff --git a/src/main/resources/templates/list/sectores.html b/src/main/resources/templates/list/sectores.html
index 74e1ab4..94ad97c 100644
--- a/src/main/resources/templates/list/sectores.html
+++ b/src/main/resources/templates/list/sectores.html
@@ -36,7 +36,7 @@
@@ -48,8 +48,10 @@ | |
---|---|
-
-
+
+
+
+
[[${sector.nombre}]]
|
@@ -47,8 +47,10 @@ | |
---|---|
-
-
+
+
+
+
[[${skill.nombre}]]
|
@@ -68,8 +68,10 @@ | |
---|---|
-
-
+
+
+
+
[[${sucursal.nombre}]]
|
[[${sucursal.localidad}]] |