UI-Kit Winfo Mentoring

Designsystem

UI-Kit für den Low-Code-PoC

Diese Seite sammelt die verbindlichen Bausteine für Buttons, Formulare, Chips, Karten, Listen und Statusflächen. Neue Screens sollen diese Muster verwenden, statt eigene Sonderklassen zu bauen.

Grundlagen

Farben, Flächen und Akzentzustände.

Surface #ffffff
Text / Aktion #1a1a1a
Akzent #ccff00

Buttons

Ein Button-System für alle Seiten. Binäre Ein/Aus-Schalter nutzen button.ui-toggle mit role="switch".

Formulare

Einheitliche Felder, skalierbare Mehrzeiler, Suffixe und Validierungsfehler über .is-error + aria-invalid="true".

Einfachfelder — <input class="ui-input">

Studienmodus
Studienmodus mit Fehler
Bitte wählen Sie einen Studienmodus.

Suffix-Felder — <span class="ui-input-suffix">

Mehrzeilige Textfelder — <textarea class="ui-textarea">

Vertikal skalierbar (resize: vertical). In Formular-Rastern mit ui-field full über die volle Breite spannen.

Interessenprofil

Range-Slider mit Prozentfeld — FU-Akzentfarbe Electric Lime (#ccff00 / --ui-color-accent). Bei Validierungsfehlern erhält das gesamte Raster .is-error (roter Kartenrahmen, kein Rand am Slider selbst).

Standard

Validierungsfehler — Summe ≠ 100 %

Container .ui-pillar-grid.is-error markiert alle Karten. Prozentfeld und Slider bleiben unverändert.

Die drei Bereiche müssen zusammen exakt 100 Prozent ergeben.

Listen-Werkzeuge

Suche füllt die Zeile, Filter und Sortierung sitzen rechts in .ui-list-toolbar__controls. Dropdowns nutzen bindUiDropdown() aus portal-core.js.

Chips und Status

Statische Labels und klickbare Filter nutzen dieselbe Optik, aber unterschiedliche Elemente.

Statisch — <span class="ui-chip">

Wirtschaftsinformatik 6 LP Wintersemester Prüfung ausstehend Gespeichert Fehler Gesperrt Signatur erforderlich

Filter — <button class="ui-chip">

Studierenden-Status (Prof-Portal)

Die Chips, die in prof/dashboard.html und prof/student.html als aktueller Status erscheinen — jeweils in Listen- und Sidebar-Kontext.

Verdrahtung

  • Verdrahtet (Live) kommt aus Prof-Dashboard / agreement_submissions
  • Teilweise Mapping vorhanden, Workflow setzt den Status noch selten oder indirekt
  • Konzept / Mock nur UI und ?mock=1-Dev-Bar, noch ohne Live-Backend

Prof-Portal — StudentStatus.renderChip()

Quelle: StudentStatus.PROF_PORTAL_CHIP_STATUS_IDS und PROF_PORTAL_CHIP_WIRING in assets/js/student-status.js

    Tooltip

    Info-Icon mit Hover-Tooltip — gleicher Button-Hover wie ui-semester-card__remove.

    Markup — <button class="ui-info-tip">

    <button type="button" class="ui-info-tip" aria-label="Info zu Mentoring">
  <i data-lucide="info" aria-hidden="true"></i>
  <span class="ui-info-tip__bubble" role="tooltip">…</span>
</button>

    Vorschau — Bubble zum Stylen

    Begleitendes Mentoring-Programm. Sollte bereits im 1. Semester gebucht und begonnen werden.

    Interaktiv

    Mit der Maus über das ⓘ fahren oder per Tastatur fokussieren.

    Mentoring

    Im Modulkontext

    Operations Research

    Pflichtmodul 6 LP Wintersemester

    Semesterübersicht

    Pflichtmodule und gewählte Wahlmodule in einem konsistenten Raster.

    1. Semester

    24 LP
    • Operations Research
    • Electronic Business
    • Vertiefung Business Analytics / Simulation Dynamischer Systeme
    • Wahlmodul 1

    2. Semester

    12 LP
    • Business Intelligence
    • Service Engineering
    • Wahlmodul 1

    3. Semester

    6 LP
    • Mentoring
    • Wahlmodul 1

    4. Semester

    0 LP
    • Wahlmodul 1
    • Wahlmodul 2

    Modulzeilen

    Listen nutzen Linien statt Schatten. Aktionen bleiben rechts stabil.

    Vertiefung Business Analytics / Simulation Dynamischer Systeme

    Wirtschaftsinformatik 6 LP Wintersemester benotet

    Informationssysteme in Transport und Verkehr / Metaheuristiken

    Wirtschaftsinformatik 6 LP Sommersemester benotet

    Review und Signatur

    Statuskarte, Akkordeon und QR-Bereich für den finalen Schritt.

    Termin reserviert bis 11:20 Uhr

    Mi., 10.06.2026

    09:30 - 10:00 · Dr. D. Rößler

    Operations Research

    6 LP Pflichtmodul
    Signatur erforderlich

    Per Smartphone signieren und absenden

    Scannen Sie den QR-Code und unterschreiben Sie das Dokument auf dem Smartphone.

    Feedback States

    Toast, Erfolg und Fehler müssen eine wiederverwendbare Form bekommen.

    Termin wurde gelöscht.
    Gespeichert
    Noch keine Module Wählen Sie ein Modul aus der Liste, um den Semesterplan zu füllen.