62 lines
2.1 KiB
Markdown
62 lines
2.1 KiB
Markdown
# Kompaktere UI - Änderungen
|
||
|
||
## Übersicht
|
||
Die Benutzeroberfläche wurde kompakter gestaltet, um mehr Informationen auf weniger Platz anzuzeigen.
|
||
|
||
## Vorgenommene Änderungen
|
||
|
||
### 1. Kleinere Buttons (btn-sm)
|
||
- **Padding**: 0.25rem → 0.15rem (vertikal), 0.5rem → 0.4rem (horizontal)
|
||
- **Schriftgröße**: 0.875rem → 0.75rem
|
||
- **Zeilenhöhe**: Hinzugefügt 1.2 für kompaktere Darstellung
|
||
|
||
### 2. Extra kleine Buttons (btn-xs - neue Klasse)
|
||
- **Padding**: 0.1rem × 0.25rem
|
||
- **Schriftgröße**: 0.65rem
|
||
- **Zeilenhöhe**: 1.1
|
||
|
||
### 3. Tabellen-Items
|
||
- **Padding**: 8px 12px → 4px 8px
|
||
- **Margin**: 2px → 1px (vertikal)
|
||
- **Schriftgröße**: Standard → 0.85rem
|
||
- **Border-Radius**: 4px → 3px
|
||
|
||
### 4. Tabellen-Icons
|
||
- **Margin**: 8px → 6px (rechts)
|
||
- **Schriftgröße**: Hinzugefügt 0.8rem
|
||
|
||
### 5. Spalten-Container (.table-columns)
|
||
- **Margin-left**: 12px → 8px
|
||
- **Margin-top**: 4px → 2px
|
||
- **Padding**: 8px → 4px 6px
|
||
- **Border-Radius**: 4px → 3px
|
||
|
||
### 6. Spalten-Items (.column-item)
|
||
- **Padding**: 4px 8px → 2px 6px
|
||
- **Margin**: 1px → 0.5px (vertikal)
|
||
- **Schriftgröße**: 12px → 11px
|
||
- **Gap**: 6px → 4px
|
||
- **Border-Radius**: 3px → 2px
|
||
- **Zeilenhöhe**: Hinzugefügt 1.2
|
||
|
||
### 7. Spalten-Typ (.column-type)
|
||
- **Schriftgröße**: 10px → 9px
|
||
|
||
### 8. Toggle-Button
|
||
- **Margin**: 5px → 3px (rechts)
|
||
- **Padding**: Hinzugefügt 0.1rem 0.3rem
|
||
- **Schriftgröße**: Hinzugefügt 0.7rem
|
||
|
||
### 9. Container-Abstände
|
||
- **Table-Container Margin**: 8px → 4px (unten)
|
||
|
||
## Ergebnis
|
||
- ✅ **Kompaktere Darstellung** - Mehr Tabellen und Spalten sichtbar
|
||
- ✅ **Bessere Platzausnutzung** - Weniger Verschwendung von Bildschirmplatz
|
||
- ✅ **Erhaltene Funktionalität** - Drag & Drop und alle Interaktionen bleiben voll funktionsfähig
|
||
- ✅ **Verbesserte Lesbarkeit** - Trotz kleinerer Größe gut lesbar durch angepasste Zeilenhöhen
|
||
|
||
## Verwendung
|
||
- Bestehende Buttons verwenden automatisch die neuen kompakteren Größen
|
||
- Neue `.btn-xs` Klasse verfügbar für noch kleinere Buttons bei Bedarf
|
||
- Alle Spalten und Tabellen werden automatisch kompakter dargestellt |