Referenz für Schüler- und Lehrerbereich. Neue UI nur aus diesen Bausteinen (`sa-*` in
sa-components.css). Tailwind nur für Layout, nicht für neue Button- oder Form-Stile.
Farben und Flächen aus sa-design-tokens.css — Basis für konsistentes Hell/Dunkel.
Seiten-CTAs und Modal-Aktionen. In Tabellen: .sa-table__actions mit sa-btn--sm.
Seiten-Buttons
Klein · mit Icon
<button type="button" class="sa-btn sa-btn--primary">Speichern</button>
Inline-Status, Banner und Django Messages.
Hinweis-Banner für wichtige Informationen auf der Seite.
Container für Listen, Tabellen und Dashboard-KPIs.
Offen
12
Heute
3
Überfällig
1
Info-Karte für Hinweise in der Seitenleiste oder im Panel.
Django Forms + Crispy in Modals und Panels. Immer mit Placeholder.
{% include "base_app/includes/sa_search_field.html" with field_id="class-search-input" placeholder="Klassenname" aria_label="Klassenname suchen" %}
.sa-search-wrap · .sa-search-input (in .sa-panel__header)
{% include "base_app/includes/sa_file_upload.html" with field_id="…" field_name="…" label="Schülerliste (Excel)" accept=".xlsx" cta_text="Excel-Datei (.xlsx) wählen" filename_id="…-filename" %}
.sa-file-upload · .sa-file-upload__dropzone · .is-selected (via sa-file-upload.js)
Mehrstufige Formulare für Onboarding, Einwilligung und Profil. Pro Schritt ein Django-Formular oder ein Panel mit Validierung.
.sa-step-form · .sa-onboarding-progress · .sa-step-form__step-head · .sa-onboarding-option
Listen im Lehrerbereich — mit Icon-Aktionen in .sa-table__actions.
| Name | Klasse | Aktionen |
|---|---|---|
| Lara Meier | Taube |
Dialoge via sa-modal.js — Trigger mit data-bs-toggle="modal".
Gleiche Pills auf Schüler- und Lehrer-Kalender.