sgr5/leerdoelen_tracker
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Activity

add legend section and update styles for clarity and consistency
All checks were successful
Build & Push / Build & Push image (push) Successful in 38s
Details

Browse Source
This commit is contained in:
Sam Geyskens
2026-03-02 22:46:22 +01:00
parent 771a742c9a
commit 8b12b52d79
2 changed files with 98 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
backend/templates/directeur.html
View File

@@ -211,6 +211,11 @@
/* Footer */
.footer { color: #64748b !important; }
/* Legend container */
.legend-container { background: #1e293b !important; }
.legend-title { color: #94a3b8 !important; }
.legend-divider { background: #334155 !important; }
.status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
.status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
/* Scrollbar (webkit) */
@@ -269,6 +274,38 @@
<!-- Tab: Doelen (bestaande view) -->
<div id="panel-doelen" class="section">
<!-- Legenda -->
<div class="legend-container">
<div class="legend-title">Legenda</div>
<div class="legend-grid">
<div class="legend-section">
<div class="legend-item">
<div class="status-selector status-groen" style="pointer-events:none;flex-shrink:0;"></div>
<span>Doen we al</span>
</div>
<div class="legend-item">
<div class="status-selector status-oranje" style="pointer-events:none;flex-shrink:0;"></div>
<span>Doen we ongeveer</span>
</div>
<div class="legend-item">
<div class="status-selector status-roze" style="pointer-events:none;flex-shrink:0;"></div>
<span>Nieuw (doen we nog niet)</span>
</div>
<div class="legend-item">
<div class="status-selector status-none" style="pointer-events:none;flex-shrink:0;"></div>
<span>Niet beoordeeld</span>
</div>
</div>
<div class="legend-divider"></div>
<div class="legend-section">
<div class="legend-item"><div style="width:10px;height:10px;border-radius:50%;background:var(--status-groen);flex-shrink:0;"></div><span>Groen = consensus</span></div>
<div class="legend-item"><div style="width:10px;height:10px;border-radius:50%;background:var(--status-oranje);flex-shrink:0;"></div><span>Oranje = gedeeltelijk</span></div>
<div class="legend-item"><div style="width:10px;height:10px;border-radius:50%;background:var(--status-roze);flex-shrink:0;"></div><span>Roze = nog te doen</span></div>
</div>
</div>
</div>
<div class="filters-bar">
<div class="filter-group">
<label>Vak</label>

62
backend/templates/leerkracht.html
View File

@@ -28,9 +28,9 @@
.btn-secondary { background: var(--gray-100); color: var(--gray-700); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-danger { background: var(--danger); color: white; }
.vak-selector { background: white; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vak-selector { background: white; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; transition: background 0.2s; }
.vak-selector label { font-weight: 600; color: var(--gray-700); font-size: 0.9rem; }
.vak-selector select { padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.95rem; min-width: 250px; cursor: pointer; }
.vak-selector select { padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.95rem; min-width: 250px; cursor: pointer; background: white; color: var(--gray-800); }
.vak-selector select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.stat-card { background: white; border-radius: 8px; padding: 0.75rem 1rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
@@ -71,6 +71,13 @@
.ebg-engageren { background: var(--kleur-engageren); color: white; }
.ebg-begrijpen { background: var(--kleur-begrijpen); color: var(--gray-800); }
.ebg-gebruiken { background: var(--kleur-gebruiken); color: white; }
.legend-container { background: white; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.legend-title { font-weight: 600; color: var(--gray-700); margin-bottom: .75rem; font-size: .9rem; }
.legend-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.legend-section { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.legend-item { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.legend-color { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.legend-divider { width: 1px; height: 24px; background: var(--gray-300); }
.leeftijden { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.leeftijd-badge { font-size: 0.7rem; padding: 0.15rem 0.35rem; background: var(--gray-200); border-radius: 3px; color: var(--gray-600); }
.beschrijving-cell { max-width: 400px; }
@@ -194,6 +201,16 @@
/* Vak indicator */
/* .vak-indicator — stijl via inline op het element */
/* Legend container */
.legend-container { background: #1e293b !important; border-color: #334155 !important; }
.legend-title { color: #94a3b8 !important; }
.legend-divider { background: #334155 !important; }
/* Vak selector balk */
.vak-selector { background: #1e293b !important; }
.vak-selector label { color: #94a3b8 !important; }
.vak-selector select { background: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; }
/* Progress bars achtergrond */
.progress-bar { background: #334155 !important; }
@@ -276,6 +293,47 @@
<div class="stat-card highlight"><div class="stat-value" id="statBeoordeeld">-</div><div class="stat-label">Beoordeeld</div></div>
</div>
<!-- Legenda -->
<div class="legend-container">
<div class="legend-title">Legenda</div>
<div class="legend-grid">
<div class="legend-section">
<div class="legend-item">
<div class="status-selector status-groen" style="width:22px;height:22px;font-size:.85rem;pointer-events:none;flex-shrink:0;"></div>
<span>Doen we al</span>
</div>
<div class="legend-item">
<div class="status-selector status-oranje" style="width:22px;height:22px;font-size:.85rem;pointer-events:none;flex-shrink:0;"></div>
<span>Doen we ongeveer</span>
</div>
<div class="legend-item">
<div class="status-selector status-roze" style="width:22px;height:22px;font-size:.85rem;pointer-events:none;flex-shrink:0;"></div>
<span>Nieuw (doen we nog niet)</span>
</div>
<div class="legend-item">
<div class="status-selector status-none" style="width:22px;height:22px;font-size:.85rem;pointer-events:none;flex-shrink:0;"></div>
<span>Nog geen status</span>
</div>
</div>
<div class="legend-divider"></div>
<div class="legend-section">
<div class="legend-item">
<div class="legend-color" style="background:var(--kleur-engageren);"></div>
<span><strong>Engageren</strong></span>
</div>
<div class="legend-item">
<div class="legend-color" style="background:var(--kleur-begrijpen);"></div>
<span><strong>Begrijpen</strong></span>
</div>
<div class="legend-item">
<div class="legend-color" style="background:var(--kleur-gebruiken);"></div>
<span><strong>Gebruiken</strong></span>
</div>
</div>
</div>
</div>
<div class="filters-container">
<div class="filters-grid">
<div class="filter-group">