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

add status selector styles and implement class overview and comparison tabs
All checks were successful
Build & Push / Build & Push image (push) Successful in 39s
Details

Browse Source
This commit is contained in:
Sam Geyskens
2026-03-02 23:09:48 +01:00
parent 8b12b52d79
commit 6c4aaa446b
1 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
backend/templates/directeur.html
View File

@@ -30,6 +30,16 @@
.stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-top: 0.25rem; }
.section { background: white; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.section h2 { font-size: 1.1rem; color: var(--gray-700); margin-bottom: 1rem; }
.status-selector { width: 22px; height: 22px; border-radius: 5px; border: 2px solid var(--gray-300); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: bold; flex-shrink: 0; }
.status-selector.status-groen { background: var(--status-groen); border-color: var(--status-groen); color: white; }
.status-selector.status-groen::after { content: '\u2713'; }
.status-selector.status-oranje { background: var(--status-oranje); border-color: var(--status-oranje); color: white; }
.status-selector.status-oranje::after { content: '~'; }
.status-selector.status-roze { background: var(--status-roze); border-color: var(--status-roze); color: white; }
.status-selector.status-roze::after { content: '!'; }
.status-selector.status-none { background: white; border-color: var(--gray-300); color: var(--gray-400); }
.status-selector.status-none::after { content: '\u25cb'; }
.filters-bar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
.filter-group label { font-size: 0.75rem; font-weight: 500; color: var(--gray-500); }
@@ -365,7 +375,35 @@
</table>
</div>
</div>
</div>
</div><!-- /panel-doelen -->
<!-- Tab: Klasoverzicht -->
<div id="panel-klassen" class="section" style="display:none;">
<div id="klasOverzichtContent">
<p style="color:var(--gray-400);font-style:italic;">Laden...</p>
</div>
</div>
<!-- Tab: Klasvergelijking -->
<div id="panel-vergelijk" class="section" style="display:none;">
<div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
<div class="filter-group">
<label>Klas A</label>
<select id="vergelijkKlasA"><option value="">-- Kies klas --</option></select>
</div>
<div class="filter-group">
<label>Klas B</label>
<select id="vergelijkKlasB"><option value="">-- Kies klas --</option></select>
</div>
<div class="filter-group">
<label>Vak</label>
<select id="vergelijkVak"><option value="">Alle vakken</option></select>
</div>
</div>
<div id="vergelijkContent">
<p style="color:var(--gray-400);font-style:italic;">Selecteer twee klassen om te vergelijken.</p>
</div>
</div>
<!-- Modal: leerkracht toevoegen -->
<div class="modal-overlay" id="addTeacherModal">