Till Tomczak 2d33753b94 feat: Major updates to backend structure and security enhancements

- Removed `COMMON_ERRORS.md` file to streamline documentation.
- Added `Flask-Limiter` for rate limiting and `redis` for session management in `requirements.txt`.
- Expanded `ROADMAP.md` to include completed security features and planned enhancements for version 2.2.
- Enhanced `setup_myp.sh` for ultra-secure kiosk installation, including system hardening and security configurations.
- Updated `app.py` to integrate CSRF protection and improved logging setup.
- Refactored user model to include username and active status for better user management.
- Improved job scheduler with uptime tracking and task management features.
- Updated various templates for a more cohesive user interface and experience.

2025-05-25 20:33:38 +02:00

6.1 KiB

Raw Blame History

Tailwind CSS Konfiguration für MYP Platform

Dieses Dokument beschreibt die aktuelle Tailwind CSS Konfiguration und Build-Prozesse für die MYP Platform.

Struktur

Die CSS-Assets des Projekts sind wie folgt strukturiert:

static/
  css/
    input.css           # Tailwind Direktiven & benutzerdefinierte Styles
    components.css      # Wiederverwendbare UI-Komponenten
    tailwind.min.css    # Kompiliertes Light-Mode CSS (minimiert)
    tailwind-dark.min.css # Kompiliertes Dark-Mode CSS (minimiert)

Tailwind Konfiguration

Die Konfiguration wird durch die Datei tailwind.config.js im Hauptverzeichnis des Projekts definiert. Diese enthält:

Farbpalette mit Mercedes-Benz Farben
Erweiterungen für Schriften, Schatten und Animation
Dark-Mode-Konfiguration über die Klasse dark

Build-Befehle

Light Mode CSS (Standardtheme)

Um das Standard-Light-Mode CSS zu erstellen:

npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind.min.css --minify

Dark Mode CSS

Um das Dark-Mode CSS zu erstellen:

npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind-dark.min.css --minify --dark-mode 'class'

Verwendung im Projekt

Beide CSS-Dateien werden im <head> der Seite eingebunden:

<link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/tailwind-dark.min.css') }}" rel="stylesheet">

Dark Mode Funktionalität

Der Dark Mode wird durch JavaScript in ui-components.js gesteuert, welches:

Benutzereinstellungen in localStorage speichert
Systemeinstellungen beobachtet (via prefers-color-scheme)
Eine dark-Klasse zum <html>-Element hinzufügt/entfernt
Ein Tastaturkürzel (Strg+Shift+D) zum Umschalten bereitstellt

Entwicklung

Bei der Entwicklung neuer Komponenten:

Füge Tailwind-Klassen direkt zu HTML-Elementen hinzu
Für wiederverwendbare Komponenten, nutze die @apply-Direktive in components.css
Nach Änderungen müssen beide CSS-Dateien neu gebaut werden

Voraussetzungen

Node.js und npm müssen installiert sein
Python 3.11 und Flask müssen installiert sein

Projektstruktur

Die Tailwind-Integration besteht aus folgenden Komponenten:

app/
├─ static/
│  ├─ css/
│  │  ├─ input.css            # Quelldatei für Tailwind
│  │  ├─ tailwind-dark-consolidated.min.css  # Generierte CSS-Datei
├─ templates/                 # HTML-Templates mit Tailwind-Klassen
├─ package.json               # NPM-Konfiguration
├─ tailwind.config.js         # Tailwind-Konfiguration
├─ postcss.config.js          # PostCSS-Konfiguration

Einrichtung

Das Projekt verwendet Tailwind CSS für das Frontend-Styling. Die Einrichtung wurde bereits abgeschlossen und umfasst:

NPM-Abhängigkeiten in der package.json
Tailwind-Konfiguration in tailwind.config.js
PostCSS-Konfiguration in postcss.config.js
CSS-Eingabedatei in static/css/input.css
Generierte CSS-Datei in static/css/tailwind-dark-consolidated.min.css

Verwendung im Entwicklungsprozess

CSS-Generierung

Um an den Styles zu arbeiten, verwenden Sie die folgenden Befehle:

Abhängigkeiten installieren (falls noch nicht geschehen):
```
npm install
```
CSS überwachen und automatisch neu generieren:
```
npm run watch:css
```
Dieser Befehl startet einen Watcher, der Änderungen an HTML-Templates und der input.css überwacht und automatisch die CSS-Datei neu generiert.
CSS für Produktion erstellen:
```
npm run build:css
```
Dieser Befehl erstellt eine minifizierte CSS-Datei für den Produktionseinsatz.

Workflow

Der empfohlene Workflow für die Arbeit mit Tailwind CSS ist:

Starten Sie den Watcher mit npm run watch:css
Bearbeiten Sie die Template-Dateien in templates/ oder fügen Sie eigene Komponenten in static/css/input.css hinzu
Die Änderungen werden automatisch in die generierte CSS-Datei übernommen
Führen Sie den Flask-Server mit python3.11 app.py aus, um die Änderungen zu sehen

Dark Mode

Die Anwendung unterstützt einen Dark Mode. In den Templates wird dies folgendermaßen implementiert:

<html class="light" data-theme="light">
<!-- oder für Dark Mode: -->
<html class="dark" data-theme="dark">

In Tailwind-Klassen verwenden Sie das dark: Präfix:

<div class="bg-white text-gray-800 dark:bg-gray-800 dark:text-white">
  Dieser Text passt sich dem Theme an
</div>

Anpassungen

Eigene Komponenten hinzufügen

Um eigene Komponenten zu definieren, verwenden Sie das @layer components Konstrukt in der static/css/input.css Datei:

@layer components {
  .custom-button {
    @apply bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700;
  }
}

Tailwind-Konfiguration anpassen

Die Tailwind-Konfiguration wird in der tailwind.config.js Datei vorgenommen. Hier können Sie:

Farben anpassen
Eigene Abstände definieren
Schriftarten konfigurieren
Plugins hinzufügen
Theme-Einstellungen vornehmen

Optimierung für Produktion

Für die Produktionsumgebung sollte die CSS-Datei optimiert werden:

npm run build:css

Dies erstellt eine minifizierte Version der CSS-Datei mit PurgeCSS, das ungenutzte CSS-Klassen entfernt.

Fehlerbehebung

Problem: CSS wird nicht aktualisiert

Stellen Sie sicher, dass der Watcher läuft (npm run watch:css)
Überprüfen Sie, ob Ihre Änderungen in einem Pfad sind, der in tailwind.config.js unter content definiert ist
Leeren Sie den Browser-Cache (Ctrl+F5)

Problem: Node-Module nicht gefunden

npm install

Problem: Tailwind-Befehle funktionieren nicht

Verwenden Sie npx vor dem Befehl:

npx tailwindcss -i ./static/css/input.css -o ./static/css/tailwind-dark-consolidated.min.css --minify

6.1 KiB Raw Blame History