olli
82b022ba3b
- Introduced CSS custom properties for spacing, typography, colors, and shadows. - Developed styles for form sections, grids, invoice items, and summary components. - Implemented responsive design adjustments for various screen sizes. - Added utility classes for text, spacing, and flex layouts. - Included dark mode and high contrast mode support. - Established loading states and validation/error styles. - Enhanced accessibility features with focus styles and screen reader utilities.
680 lines
32 KiB
Markdown
680 lines
32 KiB
Markdown
# Visual Design Guide - Invoice Form
|
||
**myCRM Billing Module | Design Reference**
|
||
|
||
---
|
||
|
||
## 1. Farbpalette & Kontraste
|
||
|
||
### Status Colors (Semantic)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ DRAFT (Entwurf) │ #6B7280 │ ░░░░░░░░░░░░ Secondary │
|
||
│ OPEN (Offen) │ #06B6D4 │ ████████████ Info │
|
||
│ PAID (Bezahlt) │ #22C55E │ ████████████ Success │
|
||
│ PARTIAL (Teilzahlung) │ #F59E0B │ ████████████ Warning │
|
||
│ OVERDUE (Überfällig) │ #EF4444 │ ████████████ Danger │
|
||
│ CANCELLED (Storniert) │ #6B7280 │ ░░░░░░░░░░░░ Secondary │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Surface Colors
|
||
|
||
```
|
||
Light Mode: Dark Mode:
|
||
┌──────────────────────────────┐ ┌──────────────────────────────┐
|
||
│ Background #FFFFFF │ │ Background #0F172A │
|
||
│ Surface-0 #FFFFFF │ │ Surface-0 #1E293B │
|
||
│ Surface-50 #F9FAFB │ │ Surface-50 #334155 │
|
||
│ Surface-100 #F3F4F6 │ │ Surface-100 #475569 │
|
||
│ Surface-200 #E5E7EB │ │ Surface-200 #64748B │
|
||
└──────────────────────────────┘ └──────────────────────────────┘
|
||
```
|
||
|
||
### Text Colors
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────┐
|
||
│ Primary Text #111827 ████ High contrast (main text) │
|
||
│ Secondary Text #6B7280 ████ Medium contrast (labels) │
|
||
│ Muted Text #9CA3AF ████ Low contrast (hints) │
|
||
└────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Accessibility Compliance
|
||
|
||
```
|
||
WCAG 2.1 AA Requirements:
|
||
✓ Normal Text (14px): 4.5:1 contrast ratio
|
||
✓ Large Text (18px+): 3.0:1 contrast ratio
|
||
✓ UI Components: 3.0:1 contrast ratio
|
||
|
||
WCAG 2.1 AAA Requirements:
|
||
✓ Normal Text (14px): 7.0:1 contrast ratio
|
||
✓ Large Text (18px+): 4.5:1 contrast ratio
|
||
```
|
||
|
||
---
|
||
|
||
## 2. Typography System
|
||
|
||
### Font Stack
|
||
```css
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||
'Helvetica Neue', Arial, sans-serif;
|
||
```
|
||
|
||
### Type Scale
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────────┐
|
||
│ Dialog Title 24px / 1.5rem Bold (600) │
|
||
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
|
||
│ │
|
||
│ Section Title 20px / 1.25rem Semibold (600) │
|
||
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
|
||
│ │
|
||
│ Subsection 16px / 1rem Medium (500) │
|
||
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
|
||
│ │
|
||
│ Body Text 14px / 0.875rem Regular (400) │
|
||
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
|
||
│ │
|
||
│ Small Text 12px / 0.75rem Regular (400) │
|
||
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
|
||
└──────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Line Heights
|
||
|
||
```
|
||
Headings: 1.2 (tight)
|
||
Body: 1.5 (normal)
|
||
Dense: 1.3 (compact tables)
|
||
Relaxed: 1.75 (long form text)
|
||
```
|
||
|
||
---
|
||
|
||
## 3. Spacing System
|
||
|
||
### Base Unit: 4px
|
||
|
||
```
|
||
┌───────────────────────────────────────────────────────────┐
|
||
│ Space Size Usage │
|
||
├───────────────────────────────────────────────────────────┤
|
||
│ 0.25rem 4px │ Minimal gap (inline icons) │
|
||
│ 0.5rem 8px ││ Label margin, tight spacing │
|
||
│ 0.75rem 12px │││ Inline field gaps │
|
||
│ 1rem 16px ││││ Field gaps (standard) │
|
||
│ 1.5rem 24px │││││││ Section padding │
|
||
│ 2rem 32px ││││││││││ Section gaps │
|
||
│ 3rem 48px │││││││││││││││││ Empty state padding │
|
||
└───────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Component Spacing
|
||
|
||
```
|
||
FORM SECTION:
|
||
┌─────────────────────────────────────┐
|
||
│ [24px padding] │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ Header │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ [24px gap] │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ Field 1 [16px gap] Field 2 │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ [16px gap] │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ Field 3 │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ [24px padding] │
|
||
└─────────────────────────────────────┘
|
||
[32px gap between sections]
|
||
```
|
||
|
||
---
|
||
|
||
## 4. Component Anatomy
|
||
|
||
### Invoice Item Card
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Position 1 [Delete] ←16px │
|
||
│ ─────────────────────────────────────────────────────────── │ 16px
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────┐ │ │
|
||
│ │ Beschreibung │ │ │
|
||
│ │ (Textarea - 2 rows) │ │ │
|
||
│ └───────────────────────────────────────────────────────┘ │ │
|
||
│ ↕ 12px gap │
|
||
│ ┌─────────────┐ ┌──────────────┐ ┌──────┐ │ │
|
||
│ │ Menge │ │ Einzelpreis │ │ MwSt │ │ │
|
||
│ │ 1.00 Stk. │ │ 100,00 € │ │ 19% │ │ │
|
||
│ └─────────────┘ └──────────────┘ └──────┘ │ │
|
||
│ ↕ 16px gap │
|
||
│ ─────────────────────────────────────────────────────────── │
|
||
│ Zwischensumme: 119,00 € ←semibold │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
↑ ↑
|
||
16px padding 16px padding
|
||
```
|
||
|
||
### Invoice Summary Box
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
|
||
│ ┃ Zusammenfassung [24px padding] ┃ │
|
||
│ ┃ ───────────────────────────────────────────────────── ┃ │
|
||
│ ┃ ┃ │
|
||
│ ┃ Nettobetrag: 1.000,00 € ← 8px │ │
|
||
│ ┃ MwSt (19%): 190,00 € ┃ │
|
||
│ ┃ MwSt (7%): 14,00 € ┃ │
|
||
│ ┃ ↕ 12px gap ┃ │
|
||
│ ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┃ │
|
||
│ ┃ ↕ 16px gap ┃ │
|
||
│ ┃ GESAMTBETRAG: 1.204,00 € ┃ │
|
||
│ ┃ (20px font, bold) ┃ │
|
||
│ ┃ ┃ │
|
||
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
Gradient background: primary-50 → primary-100
|
||
Border: 2px solid primary-color
|
||
```
|
||
|
||
### Empty State
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ 48px ↓ │
|
||
│ ┌──────────────┐ │
|
||
│ │ │ │
|
||
│ │ Inbox │ ← 48px icon, muted │
|
||
│ │ Icon │ │
|
||
│ └──────────────┘ │
|
||
│ 16px ↓ │
|
||
│ Noch keine Positionen hinzugefügt │
|
||
│ (16px, medium weight, secondary color) │
|
||
│ 8px ↓ │
|
||
│ Fügen Sie mindestens eine Position hinzu, │
|
||
│ um die Rechnung zu erstellen │
|
||
│ (12px, muted color) │
|
||
│ 24px ↓ │
|
||
│ ┌──────────────────────────┐ │
|
||
│ │ Erste Position hinzufügen │ │
|
||
│ └──────────────────────────┘ │
|
||
│ │
|
||
│ 48px ↓ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Interactive States
|
||
|
||
### Button States
|
||
|
||
```
|
||
DEFAULT:
|
||
┌──────────────┐
|
||
│ Speichern │ Background: primary-color
|
||
└──────────────┘ Text: white
|
||
Height: 40px (2.5rem)
|
||
Padding: 12px 20px
|
||
Border-radius: 6px
|
||
|
||
HOVER:
|
||
┌──────────────┐
|
||
│ Speichern │ Background: primary-600 (darker)
|
||
└──────────────┘ Transform: scale(1.02)
|
||
Transition: 0.2s ease
|
||
|
||
FOCUS:
|
||
┌──────────────┐
|
||
│ Speichern │ Outline: 2px solid primary-color
|
||
└──────────────┘ Outline-offset: 2px
|
||
|
||
LOADING:
|
||
┌──────────────┐
|
||
│ ⟳ Speichern │ Spinner icon rotating
|
||
└──────────────┘ Cursor: wait
|
||
Opacity: 0.8
|
||
|
||
DISABLED:
|
||
┌──────────────┐
|
||
│ Speichern │ Background: surface-200
|
||
└──────────────┘ Text: text-muted
|
||
Cursor: not-allowed
|
||
Opacity: 0.6
|
||
```
|
||
|
||
### Input Field States
|
||
|
||
```
|
||
DEFAULT (FloatLabel):
|
||
┌─────────────────────────────────────┐
|
||
│ Rechnungsnummer │ ← Label (12px, top)
|
||
│ INV-2025-001 │ ← Value (14px)
|
||
└─────────────────────────────────────┘
|
||
Border: 1px solid surface-200
|
||
Height: 44px (touch-friendly)
|
||
|
||
FOCUS:
|
||
┌─────────────────────────────────────┐
|
||
│ Rechnungsnummer │ ← Label (primary color)
|
||
│ INV-2025-001│ │ ← Cursor visible
|
||
└─────────────────────────────────────┘
|
||
Border: 2px solid primary-color
|
||
Box-shadow: 0 0 0 3px primary-50
|
||
|
||
ERROR:
|
||
┌─────────────────────────────────────┐
|
||
│ Rechnungsnummer │ ← Label (danger color)
|
||
│ INV-2025-001 │
|
||
└─────────────────────────────────────┘
|
||
⚠ Rechnungsnummer ist erforderlich ← Error message (12px, danger)
|
||
Border: 2px solid danger-color
|
||
|
||
DISABLED:
|
||
┌─────────────────────────────────────┐
|
||
│ Rechnungsnummer │ ← Label (muted)
|
||
│ INV-2025-001 │ ← Value (muted)
|
||
└─────────────────────────────────────┘
|
||
Background: surface-100
|
||
Cursor: not-allowed
|
||
Opacity: 0.6
|
||
```
|
||
|
||
---
|
||
|
||
## 6. Animation & Transitions
|
||
|
||
### Timing Functions
|
||
|
||
```javascript
|
||
// Fast interactions (hover, focus)
|
||
transition: all 0.15s ease-in-out;
|
||
|
||
// Standard interactions (expand, collapse)
|
||
transition: all 0.2s ease;
|
||
|
||
// Slow interactions (page transitions)
|
||
transition: all 0.3s ease;
|
||
```
|
||
|
||
### List Animations (Invoice Items)
|
||
|
||
```
|
||
ENTER (new item):
|
||
┌─────────────┐ ┌─────────────┐
|
||
│ Opacity │ → │ Opacity │
|
||
│ 0.0 │ │ 1.0 │
|
||
└─────────────┘ └─────────────┘
|
||
↓ ↓
|
||
TranslateY(-20px) TranslateY(0)
|
||
Duration: 0.3s ease-out
|
||
|
||
LEAVE (deleted item):
|
||
┌─────────────┐ ┌─────────────┐
|
||
│ Opacity │ → │ Opacity │
|
||
│ 1.0 │ │ 0.0 │
|
||
└─────────────┘ └─────────────┘
|
||
↓ ↓
|
||
TranslateX(0) TranslateX(20px)
|
||
Duration: 0.3s ease
|
||
```
|
||
|
||
### Micro-interactions
|
||
|
||
```
|
||
Button Click:
|
||
• Transform: scale(0.98)
|
||
• Duration: 0.1s
|
||
• Timing: ease-out
|
||
|
||
Card Hover:
|
||
• Box-shadow: 0 2px 8px rgba(0,0,0,0.08)
|
||
• Border-color: primary-color
|
||
• Duration: 0.2s
|
||
• Timing: ease
|
||
|
||
Toast Notification:
|
||
• Slide in from right
|
||
• Transform: translateX(100%) → translateX(0)
|
||
• Duration: 0.3s
|
||
• Timing: cubic-bezier(0.4, 0, 0.2, 1)
|
||
```
|
||
|
||
---
|
||
|
||
## 7. Responsive Breakpoints
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────┐
|
||
│ BREAKPOINT WIDTH COLUMNS LAYOUT │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ Small Mobile < 576px 1 Stack all fields │
|
||
│ Mobile 576-768px 1 Stack + full width │
|
||
│ Tablet 768-992px 1-2 Hybrid layout │
|
||
│ Desktop 992-1200px 2 2-column grid │
|
||
│ Large Desktop > 1200px 2-3 Optimized spacing │
|
||
└────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Layout Examples
|
||
|
||
**Desktop (992px+)**
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ Rechnungsinformationen [Tag] │
|
||
│ ─────────────────────────────────────────────────── │
|
||
│ ┌────────────────┐ ┌────────────────┐ │
|
||
│ │ Rechnungsnr. │ │ Status │ │
|
||
│ └────────────────┘ └────────────────┘ │
|
||
│ ┌──────────────────────────────────────────────┐ │
|
||
│ │ Kunde (full width) │ │
|
||
│ └──────────────────────────────────────────────┘ │
|
||
│ ┌────────────────┐ ┌────────────────┐ │
|
||
│ │ Datum │ │ Fälligk. │ │
|
||
│ └────────────────┘ └────────────────┘ │
|
||
└─────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Tablet (768-992px)**
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ Rechnungsinformationen [Tag] │
|
||
│ ───────────────────────────────────── │
|
||
│ ┌───────────────────────────────┐ │
|
||
│ │ Rechnungsnr. │ │
|
||
│ └───────────────────────────────┘ │
|
||
│ ┌───────────────────────────────┐ │
|
||
│ │ Status │ │
|
||
│ └───────────────────────────────┘ │
|
||
│ ┌───────────────────────────────┐ │
|
||
│ │ Kunde │ │
|
||
│ └───────────────────────────────┘ │
|
||
│ ┌───────────────────────────────┐ │
|
||
│ │ Datum │ │
|
||
│ └───────────────────────────────┘ │
|
||
│ ┌───────────────────────────────┐ │
|
||
│ │ Fälligkeit │ │
|
||
│ └───────────────────────────────┘ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**Mobile (< 768px)**
|
||
```
|
||
┌─────────────────────────┐
|
||
│ Rechnung │
|
||
│ [Tag] │
|
||
│ ─────────────────────── │
|
||
│ ┌─────────────────────┐ │
|
||
│ │ Rechnungsnr. │ │
|
||
│ └─────────────────────┘ │
|
||
│ ┌─────────────────────┐ │
|
||
│ │ Status │ │
|
||
│ └─────────────────────┘ │
|
||
│ ┌─────────────────────┐ │
|
||
│ │ Kunde │ │
|
||
│ └─────────────────────┘ │
|
||
│ ... │
|
||
└─────────────────────────┘
|
||
|
||
Dialog = Full Screen
|
||
Summary = Sticky Bottom
|
||
```
|
||
|
||
---
|
||
|
||
## 8. Iconography
|
||
|
||
### PrimeIcons Usage
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────┐
|
||
│ CONTEXT ICON SIZE USAGE │
|
||
├────────────────────────────────────────────────────────┤
|
||
│ Add Item pi-plus 1rem Buttons │
|
||
│ Remove Item pi-trash 1rem Buttons │
|
||
│ Save pi-check 1rem Buttons │
|
||
│ Cancel pi-times 1rem Buttons │
|
||
│ Upload pi-upload 2rem Empty state │
|
||
│ PDF pi-file-pdf 2.5rem Preview │
|
||
│ Calendar pi-calendar 0.875 Input icon │
|
||
│ Building/Company pi-building 1rem Dropdown │
|
||
│ Info pi-info-circle 1rem Messages │
|
||
│ Warning pi-exclamation 1rem Alerts │
|
||
│ Success pi-check-circle 1rem Toast │
|
||
│ Error pi-times-circle 1rem Toast │
|
||
└────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Icon Colors
|
||
|
||
```
|
||
Default: var(--text-secondary) #6B7280
|
||
Primary: var(--primary-color) #3B82F6
|
||
Success: var(--success-color) #22C55E
|
||
Warning: var(--warning-color) #F59E0B
|
||
Danger: var(--danger-color) #EF4444
|
||
Muted: var(--text-muted) #9CA3AF (opacity: 0.5)
|
||
```
|
||
|
||
---
|
||
|
||
## 9. Error Handling & Validation
|
||
|
||
### Validation Patterns
|
||
|
||
```
|
||
INLINE VALIDATION (on blur):
|
||
┌─────────────────────────────────────┐
|
||
│ E-Mail │
|
||
│ invalid.email │ ← Invalid input
|
||
└─────────────────────────────────────┘
|
||
⚠ Ungültige E-Mail-Adresse ← Error appears immediately
|
||
Duration: 0.2s fade-in
|
||
|
||
SUBMIT VALIDATION:
|
||
┌─────────────────────────────────────┐
|
||
│ Rechnungsnummer │
|
||
│ │ ← Empty required field
|
||
└─────────────────────────────────────┘
|
||
⚠ Rechnungsnummer ist erforderlich
|
||
|
||
All errors show simultaneously on submit
|
||
Focus moves to first invalid field
|
||
```
|
||
|
||
### Error States Visual Hierarchy
|
||
|
||
```
|
||
PRIORITY 1 - Critical Errors (Red border + icon):
|
||
┌─────────────────────────────────────┐
|
||
│ ⚠ Rechnungsnummer │ ← Red label
|
||
│ │
|
||
└─────────────────────────────────────┘
|
||
Border: 2px solid danger-color
|
||
|
||
PRIORITY 2 - Warnings (Orange border):
|
||
┌─────────────────────────────────────┐
|
||
│ ⚠ Fälligkeitsdatum │ ← Orange label
|
||
│ 01.01.2024 │
|
||
└─────────────────────────────────────┘
|
||
⚠ Datum liegt in der Vergangenheit
|
||
Border: 2px solid warning-color
|
||
|
||
PRIORITY 3 - Info (Blue border):
|
||
┌─────────────────────────────────────┐
|
||
│ ℹ Steuer-ID │
|
||
│ DE123456789 │
|
||
└─────────────────────────────────────┘
|
||
ℹ Optional, aber empfohlen
|
||
Border: 1px solid info-color
|
||
```
|
||
|
||
---
|
||
|
||
## 10. Loading & Empty States
|
||
|
||
### Skeleton Screens
|
||
|
||
```
|
||
LOADING FORM:
|
||
┌─────────────────────────────────────┐
|
||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ ← Animated gradient
|
||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||
│ ▓▓▓▓▓▓▓▓▓▓ │
|
||
└─────────────────────────────────────┘
|
||
Animation: shimmer effect (1.5s loop)
|
||
Background: linear-gradient 200% width
|
||
|
||
LOADING BUTTON:
|
||
┌──────────────┐
|
||
│ ⟳ Lädt... │ ← Spinner rotates
|
||
└──────────────┘
|
||
Disabled: true
|
||
Cursor: wait
|
||
```
|
||
|
||
### Progress Indication
|
||
|
||
```
|
||
UPLOAD PROGRESS:
|
||
┌─────────────────────────────────────┐
|
||
│ rechnung_2025_001.pdf │ [×] │
|
||
│ 2.4 MB │
|
||
│ ▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░ 45% │ ← Progress bar
|
||
└─────────────────────────────────────┘
|
||
Height: 6px
|
||
Background: success-color
|
||
Animation: smooth increment
|
||
```
|
||
|
||
---
|
||
|
||
## 11. Accessibility Features
|
||
|
||
### Focus Management
|
||
|
||
```
|
||
TAB ORDER:
|
||
1. Rechnungsnummer [← First field]
|
||
2. Status
|
||
3. Kunde
|
||
4. Rechnungsdatum
|
||
5. Fälligkeitsdatum
|
||
6. Position 1 - Beschreibung
|
||
7. Position 1 - Menge
|
||
8. Position 1 - Preis
|
||
9. Position 1 - MwSt
|
||
10. Position hinzufügen Button
|
||
...
|
||
N-1. Abbrechen Button
|
||
N. Speichern Button [← Last focusable]
|
||
|
||
ESC: Return to previous focusable
|
||
```
|
||
|
||
### ARIA Live Regions
|
||
|
||
```html
|
||
<!-- Screen reader announcements -->
|
||
<div aria-live="polite" aria-atomic="true" class="sr-only">
|
||
<span v-if="saving">Rechnung wird gespeichert...</span>
|
||
<span v-if="saved">Rechnung wurde gespeichert</span>
|
||
<span v-if="error">Fehler: {{ errorMessage }}</span>
|
||
</div>
|
||
|
||
<!-- Status updates -->
|
||
<div aria-live="assertive" role="alert" class="sr-only">
|
||
Position {{ index + 1 }} wurde entfernt
|
||
</div>
|
||
```
|
||
|
||
### Keyboard Navigation Hints
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────┐
|
||
│ [Ctrl+S] Speichern • [Ctrl+⇧+P] Position hinzufügen │
|
||
│ [Esc] Abbrechen • [Tab] Nächstes Feld │
|
||
└────────────────────────────────────────────────────────┘
|
||
Display: Desktop & Tablet only
|
||
Hidden on mobile (<768px)
|
||
Can be toggled with [?] key
|
||
```
|
||
|
||
---
|
||
|
||
## 12. Print Styles
|
||
|
||
```css
|
||
@media print {
|
||
/* Hide interactive elements */
|
||
.form-actions,
|
||
.keyboard-hints,
|
||
.invoice-item-actions,
|
||
button { display: none !important; }
|
||
|
||
/* Optimize for paper */
|
||
.form-section {
|
||
box-shadow: none;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
/* Black & white optimization */
|
||
.invoice-summary {
|
||
background: white;
|
||
border: 2px solid black;
|
||
}
|
||
|
||
/* Add page breaks */
|
||
.page-break { page-break-after: always; }
|
||
}
|
||
```
|
||
|
||
### Print Layout Preview
|
||
|
||
```
|
||
PAGE 1:
|
||
┌─────────────────────────────────────┐
|
||
│ myCRM Logo │
|
||
│ ─────────────────────────────────── │
|
||
│ │
|
||
│ RECHNUNG INV-2025-001 │
|
||
│ │
|
||
│ Rechnungsinformationen │
|
||
│ Rechnungsnr: INV-2025-001 │
|
||
│ Datum: 12.12.2025 │
|
||
│ Kunde: ACME Corp │
|
||
│ │
|
||
│ Rechnungspositionen │
|
||
│ 1. Consulting Services │
|
||
│ 10 Stk × 100,00 € = 1.000,00 € │
|
||
│ │
|
||
│ ─────────────────────────────────── │
|
||
│ Nettobetrag: 1.000,00 € │
|
||
│ MwSt (19%): 190,00 € │
|
||
│ GESAMTBETRAG: 1.190,00 € │
|
||
│ │
|
||
│ Seite 1 von 1 │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
**Document Version:** 1.0
|
||
**Last Updated:** 2025-12-12
|
||
**Author:** UX Designer Agent
|
||
**Project:** myCRM Billing Module
|