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)
Pill-Switch statt quadratischer Checkbox — Styles in sa-components.css.
Label links, Switch rechts: .sa-switch-row.
Datum mit «Ganztägig»-Option: .sa-datetime-field (Referenz: Aufgaben-Wizard Schritt 3).
Immer role="switch" und aria-checked am Input setzen.
Einzelner Switch
Datum + «Ganztägig fällig» (mit optionalem Uhrzeit-Feld)
Konkrete Abgabezeit am gewählten Tag.
<div class="sa-switch-row">
<label class="sa-switch-row__label" for="…-toggle">Ganztägig fällig</label>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="…-toggle" role="switch" aria-checked="true" checked>
</div>
</div>
<div class="sa-datetime-field"> … Datum … <div class="sa-switch-row"> … </div> </div>
Tom Select mit sa-tomselect.css — Pills, Chevron, Dropdown-Suche und Checkboxen.
Einzelauswahl (Schüler/in, Fach, …): nur Text in der Liste, ohne Icons.
Initialisierung über SaModalTomSelect (Seiten und Modals).
Mehrfachauswahl · Einzelauswahl mit Suche
Wähle eine oder mehrere Klassen aus.
Einzelauswahl mit Suchfeld im Dropdown (ohne Checkboxen).
<select id="…" class="form-select" multiple data-placeholder="Klassen suchen oder auswählen">…</select>
SaModalTomSelect.init("#…", {
namespace: "…",
searchPlaceholder: "Klassen suchen…",
tomSelect: { closeAfterSelect: false },
});
CSS: base_app/vendor/tom-select/tom-select.min.css + base_app/css/sa-tomselect.css JS: base_app/vendor/tom-select/tom-select.complete.min.js + base_app/js/sa-modal-tomselect.js
Priorität · farbiger Punkt (SaPrioritySelect)
Immer über SaPrioritySelect — nicht als natives Select.
<select id="…" class="form-select" data-sa-priority-select="1">
<option value="low">Niedrig</option>
<option value="normal">Mittel</option>
<option value="high">Hoch</option>
</select>
SaPrioritySelect.init("#…", { namespace: "…" });
/* JS: base_app/js/sa-priority-select.js (nach sa-modal-tomselect.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.