From 26ad6cd6509e250ae2c1c9df503b19b1118d55ac Mon Sep 17 00:00:00 2001 From: Sam Geyskens Date: Fri, 6 Mar 2026 12:11:20 +0100 Subject: [PATCH] fix: update age range in filters for consistency across templates --- backend/templates/directeur.html | 46 +++++++++++++++++++++---------- backend/templates/leerkracht.html | 2 +- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/backend/templates/directeur.html b/backend/templates/directeur.html index a1bc5b8..6fdbee1 100644 --- a/backend/templates/directeur.html +++ b/backend/templates/directeur.html @@ -65,16 +65,25 @@ .lft-cb:has(input:checked) { background: var(--primary); border-color: var(--primary); color: white; } .lft-cb input { display: none; } .table-wrap { overflow-x: auto; } - table { width: 100%; border-collapse: collapse; font-size: .83rem; } - thead { background: var(--gray-50); position: sticky; top: 0; z-index: 5; } - th { padding: .65rem .6rem; text-align: center; font-weight: 600; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); white-space: nowrap; } - th.goal-col { text-align: left; min-width: 240px; } - th.klas-col { min-width: 75px; font-size: .75rem; } - td { padding: .45rem .6rem; border-bottom: 1px solid var(--gray-100); text-align: center; } - td.goal-cell { text-align: left; } - tr:hover { background: var(--gray-50); } + table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .83rem; } + thead { position: sticky; top: 0; z-index: 10; } + th { padding: .6rem .5rem; text-align: center; font-weight: 600; color: var(--gray-600); + border-bottom: 2px solid var(--gray-200); white-space: nowrap; + background: var(--gray-50); } + th.goal-col { text-align: left; min-width: 220px; max-width: 280px; + position: sticky; left: 0; z-index: 11; + background: var(--gray-50); box-shadow: 2px 0 4px rgba(0,0,0,.06); } + th.klas-col { min-width: 64px; max-width: 90px; font-size: .72rem; + overflow: hidden; text-overflow: ellipsis; } + th.sum-col { min-width: 56px; } + td { padding: .4rem .5rem; border-bottom: 1px solid var(--gray-100); text-align: center; } + td.goal-cell { text-align: left; position: sticky; left: 0; z-index: 1; + background: white; box-shadow: 2px 0 4px rgba(0,0,0,.06); } + tr:hover td { background: var(--gray-50); } + tr:hover td.goal-cell { background: var(--gray-50); } .goal-nr { font-weight: 600; font-size: .82rem; } - .goal-desc { font-size: .77rem; color: var(--gray-500); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .goal-desc { font-size: .77rem; color: var(--gray-500); max-width: 220px; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lft-badges { display: flex; flex-wrap: wrap; gap: .2rem; } .lft-badge { font-size: .68rem; padding: .1rem .3rem; background: var(--gray-200); border-radius: 3px; color: var(--gray-600); } .si { width: 26px; height: 26px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; } @@ -119,6 +128,9 @@ th,thead { background:#1e293b!important;color:#94a3b8!important;border-color:#334155!important; } td { border-color:#1e293b!important; } tr:hover { background:#263548!important; } + td.goal-cell { background:#0f172a!important; } + tr:hover td.goal-cell { background:#263548!important; } + th.goal-col { background:#1e293b!important;box-shadow:2px 0 4px rgba(0,0,0,.3)!important; } select,input { background:#0f172a!important;color:#e2e8f0!important;border-color:#334155!important; } .vak-card,.klas-chip { background:#162032!important;border-color:#334155!important; } .lft-badge { background:#334155!important;color:#94a3b8!important; } @@ -320,7 +332,7 @@ let currentUser = null; // ── Init ─────────────────────────────────────────────────────────────────────── document.addEventListener('DOMContentLoaded', async () => { // Leeftijd checkboxes dynamisch aanmaken (vermijdt Jinja in inline handlers) - const ages = ['2,5-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12']; + const ages = ['3-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12']; const cbContainer = document.getElementById('leeftijdCbs'); ages.forEach(age => { const lbl = document.createElement('label'); @@ -642,9 +654,12 @@ function applyFilters() { function renderTable(rows, klassen) { const thead = document.getElementById('tblHead'); const tbody = document.getElementById('tblBody'); - let hdr = 'DoelLeeftijden'; - klassen.forEach(k => hdr += `${k.name}`); - hdr += 'Samenvatting'; + let hdr = 'DoelLeeftijden'; + klassen.forEach(k => { + const label = k.name.length > 6 ? k.name.substring(0,6) + '…' : k.name; + hdr += `${label}`; + }); + hdr += '∑'; thead.innerHTML = hdr; if (!rows.length) { tbody.innerHTML = `Geen doelen gevonden met huidige filters`; @@ -703,7 +718,10 @@ function renderVergelijk() { const goals = allGoals[vakId] || []; if (!goals.length) { el.innerHTML = '
Vak nog niet geladen of geen doelen
'; return; } let html = `
- `; + + + + `; goals.forEach(goal => { const sA = goalsA[goal.id]||'', sB = goalsB[goal.id]||''; const symA = sA==='groen'?'✓':sA==='oranje'?'~':sA==='roze'?'!':'○'; diff --git a/backend/templates/leerkracht.html b/backend/templates/leerkracht.html index d283cdb..4f6c6e3 100644 --- a/backend/templates/leerkracht.html +++ b/backend/templates/leerkracht.html @@ -267,7 +267,7 @@
- {% for age in ['2,5-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'] %} + {% for age in ['3-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'] %} {% endfor %}
Doel${klasA?.name||'A'}${klasB?.name||'B'}
Doel${(klasA?.name||'A').substring(0,8)}${(klasB?.name||'B').substring(0,8)}