pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Changes to the list views - now using tabulator with filtering and sorting, client-side pagination, ...

Browse Source 
- Adaptation of all list views in the app
This commit is contained in:
Josako
2025-07-14 18:58:54 +02:00
parent acad28b623
commit 000636a229
50 changed files with 2162 additions and 2174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
eveai_app/static/assets/css/eveai-tabulator.css
View File

@@ -96,9 +96,9 @@
/* Style for the table header */
.ordered-list-editor .tabulator-header {
background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match JSE gradient */
background: #e1e1e1;
border-bottom: 2px solid var(--bs-secondary); /* Secondary color for border */
color: #ffffff; /* White text for better contrast on gradient */
color: #ffffff;
}
/* Style for the headers container */
@@ -108,14 +108,14 @@
/* Style for the header cells */
.ordered-list-editor .tabulator-col {
background: transparent; /* Let the header gradient show through */
background: transparent;
padding: 8px;
font-weight: bold;
text-align: center;
display: table-cell !important; /* Force display as table cell */
box-sizing: border-box !important; /* Include padding in width calculation */
position: relative !important; /* Ensure proper positioning */
color: #ffffff; /* White text for better contrast on gradient */
color: #ffffff;
}
/* Override any inline styles that might hide column headers */
@@ -135,7 +135,7 @@
word-break: break-word; /* Break words to prevent horizontal overflow */
font-weight: bold;
font-size: 0.85rem; /* Kleinere font grootte, dezelfde als in de rijen */
color: #ffffff; /* White text for better contrast on gradient */
color: #ffffff;
}
/* Style for the table rows */
@@ -385,7 +385,7 @@
}
/* Extra specifieke override stijlen voor tabulator paginator en footer */
.tabulator .tabulator-footer .tabulator-paginator {
background: transparent !important; /* Transparante achtergrond, want de footer heeft al gradient */
background: transparent !important;
border-top: none !important;
padding: 0 !important;
}
@@ -407,14 +407,14 @@
border-radius: 4px !important;
border: 1px solid white !important;
background-color: rgba(255, 255, 255, 0.2) !important;
color: white !important;
color: #67518c !important;
font-size: 0.85rem !important;
font-family: inherit !important;
}
/* Styling voor de paginator container */
.tabulator .tabulator-footer .tabulator-paginator label {
color: white !important; /* Witte tekst voor betere leesbaarheid op donkere gradient */
color: #67518c !important;
font-size: 0.85rem !important;
font-weight: normal !important;
margin: 0 5px !important;
@@ -465,7 +465,7 @@
}
/* Styling voor de tabulator paginator -------------------------------------------------------------- */
.tabulator-paginator {
background: linear-gradient(90deg, var(--bs-secondary) 0%, var(--bs-primary) 100%) !important; /* Omgekeerde gradient van de header */
background: #e1e1e1;
padding: 10px;
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
@@ -485,13 +485,13 @@
.tabulator-paginator .tabulator-page:hover {
background-color: var(--bs-secondary);
color: white;
color: #67518c;
}
.tabulator-paginator .tabulator-page.active,
.tabulator .tabulator-footer .tabulator-page.active {
background-color: var(--bs-primary) !important;
color: white !important;
color: #67518c !important;
border-color: var(--bs-primary) !important;
}
@@ -515,7 +515,7 @@
.tabulator-footer,
.tabulator .tabulator-footer {
background: linear-gradient(90deg, var(--bs-secondary) 0%, var(--bs-primary) 100%) !important; /* Omgekeerde gradient van de header */
background: #e1e1e1;
border-top: 1px solid var(--bs-secondary) !important;
border-bottom-left-radius: 0.375rem !important;
border-bottom-right-radius: 0.375rem !important;
@@ -548,7 +548,7 @@
/* Algemene tabulator header stijlen -------------------------------------------------------------- */
.tabulator .tabulator-header {
background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
background: #e1e1e1;
border-bottom: 2px solid var(--bs-secondary);
color: #ffffff;
}
@@ -579,7 +579,7 @@
}
.tabulator .tabulator-header .tabulator-col-title {
color: #ffffff;
color: #67518c;
font-weight: bold;
}
@@ -588,7 +588,7 @@
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
color: #ffffff;
color: #67518c;
font-size: 0.85rem; /* Kleinere font grootte, dezelfde als in de rijen */
}
@@ -607,7 +607,7 @@
/* Tabulator List View paginator stijlen */
.tabulator-list-view .tabulator-footer {
background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match EveAI gradient */
background: #e1e1e1;
padding: 8px;
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
@@ -635,20 +635,20 @@
/* Stijl voor de tabel header */
.tabulator-list-view .tabulator-header {
background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match EveAI gradient */
background: #e1e1e1;
border-bottom: 2px solid var(--bs-secondary); /* Secundaire kleur voor rand */
color: #ffffff; /* Witte tekst voor beter contrast op gradient */
color: #ffffff;
}
/* Stijl voor de header cellen */
.tabulator-list-view .tabulator-col {
background: transparent; /* Laat de header gradient doorschijnen */
background: transparent;
padding: 8px;
font-weight: bold;
text-align: center;
box-sizing: border-box !important; /* Padding meenemen in breedte berekening */
position: relative !important; /* Juiste positionering verzekeren */
color: #ffffff; /* Witte tekst voor beter contrast op gradient */
color: #ffffff;
}
/* Voorkom kleurverandering bij hover over kolomkoppen */
@@ -662,7 +662,7 @@
word-break: break-word; /* Breek woorden om horizontale overflow te voorkomen */
font-weight: bold;
font-size: 0.85rem; /* Kleinere font grootte, dezelfde als in de rijen */
color: #ffffff; /* Witte tekst voor beter contrast op gradient */
color: #ffffff;
}
/* Stijl voor de tabel rijen */