12-05-2026 Frontend dev
This commit is contained in:
parent
405df0a122
commit
5b8bdf4182
779 changed files with 480564 additions and 6241 deletions
309
_docs/THEME-INTEGRATION.md
Normal file
309
_docs/THEME-INTEGRATION.md
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
# Theme-Integration Anleitung
|
||||
|
||||
## Überblick
|
||||
|
||||
Das Projekt nutzt ein dynamisches Theme-System mit 3 Domains:
|
||||
|
||||
| Domain | Theme | Primary Color | Secondary Color | CSS-Datei |
|
||||
|--------|-------|---------------|-----------------|-----------|
|
||||
| **presseportale.test** | portal | #526266 | #82a0a7 | `resources/css/portal.css` |
|
||||
| **presseecho.test** | presseecho | #345636 (Grün) | #6b8f71 | `resources/css/web/theme-presseecho.css` |
|
||||
| **businessportal24.test** | businessportal24 | #cf3628 (Rot) | #f0834a | `resources/css/web/theme-businessportal24.css` |
|
||||
|
||||
## CSS-Dateien in Blade-Templates laden
|
||||
|
||||
### Backend (Portal)
|
||||
|
||||
Im Portal-Layout (`resources/views/layouts/portal/app.blade.php`):
|
||||
|
||||
```blade
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ config('app.name') }}</title>
|
||||
|
||||
{{-- Portal CSS mit FluxUI --}}
|
||||
@vite(['resources/css/portal.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
<body>
|
||||
@yield('content')
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Frontend (Web) - Dynamisch
|
||||
|
||||
Im Web-Layout (`resources/views/layouts/web/app.blade.php`):
|
||||
|
||||
```blade
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ $domainConfig['description'] ?? config('app.name') }}</title>
|
||||
|
||||
{{-- Dynamisches Theme-Loading basierend auf Domain --}}
|
||||
@if($theme === 'presseecho')
|
||||
@vite(['resources/css/web/theme-presseecho.css', 'resources/js/app.js'])
|
||||
@elseif($theme === 'businessportal24')
|
||||
@vite(['resources/css/web/theme-businessportal24.css', 'resources/js/app.js'])
|
||||
@else
|
||||
{{-- Fallback --}}
|
||||
@vite(['resources/css/web/shared-styles.css', 'resources/js/app.js'])
|
||||
@endif
|
||||
</head>
|
||||
<body>
|
||||
@yield('content')
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Alternative: Helper-basiert
|
||||
|
||||
Sie können auch den ThemeHelper verwenden:
|
||||
|
||||
```blade
|
||||
@php
|
||||
$themeCss = match($theme) {
|
||||
'presseecho' => 'resources/css/web/theme-presseecho.css',
|
||||
'businessportal24' => 'resources/css/web/theme-businessportal24.css',
|
||||
default => 'resources/css/web/shared-styles.css',
|
||||
};
|
||||
@endphp
|
||||
|
||||
@vite([$themeCss, 'resources/js/app.js'])
|
||||
```
|
||||
|
||||
## Verfügbare Theme-Variablen in Views
|
||||
|
||||
Der `ThemeServiceProvider` macht folgende Variablen in allen Views verfügbar:
|
||||
|
||||
```php
|
||||
$theme // z.B. 'portal', 'presseecho', 'businessportal24'
|
||||
$viewPrefix // z.B. 'portal', 'web'
|
||||
$domainName // z.B. 'presseecho.test'
|
||||
$domainUrl // z.B. 'https://presseecho.test'
|
||||
$domainConfig // Array mit kompletter Domain-Konfiguration
|
||||
```
|
||||
|
||||
### Beispiel-Nutzung in Blade
|
||||
|
||||
```blade
|
||||
{{-- Domain-Name anzeigen --}}
|
||||
<h1>Willkommen auf {{ $domainName }}</h1>
|
||||
|
||||
{{-- Theme-spezifische Farben --}}
|
||||
<div style="color: {{ $domainConfig['color_scheme']['primary'] }}">
|
||||
Primary Color Text
|
||||
</div>
|
||||
|
||||
{{-- Font-Familie --}}
|
||||
<p style="font-family: {{ $domainConfig['font'] }}">
|
||||
Custom Font Text
|
||||
</p>
|
||||
|
||||
{{-- Conditional Content basierend auf Theme --}}
|
||||
@if($theme === 'presseecho')
|
||||
<p>Presseecho-spezifischer Content</p>
|
||||
@elseif($theme === 'businessportal24')
|
||||
<p>Businessportal24-spezifischer Content</p>
|
||||
@else
|
||||
<p>Portal Content</p>
|
||||
@endif
|
||||
```
|
||||
|
||||
## CSS-Variablen nutzen
|
||||
|
||||
Alle Themes verwenden CSS-Variablen für konsistentes Styling:
|
||||
|
||||
```blade
|
||||
{{-- Tailwind Classes mit Theme-Variablen --}}
|
||||
<button class="bg-primary text-white hover:bg-secondary">
|
||||
Klicken
|
||||
</button>
|
||||
|
||||
<div class="border border-border bg-card text-card-foreground rounded-lg p-4">
|
||||
Card Content
|
||||
</div>
|
||||
|
||||
{{-- Primary & Secondary Buttons --}}
|
||||
<button class="btn btn-primary">Primary Action</button>
|
||||
<button class="btn btn-secondary">Secondary Action</button>
|
||||
```
|
||||
|
||||
## CSS-Variablen-Referenz
|
||||
|
||||
Alle Themes definieren folgende CSS-Variablen:
|
||||
|
||||
```css
|
||||
/* Layout */
|
||||
--background /* Hintergrundfarbe */
|
||||
--foreground /* Textfarbe */
|
||||
|
||||
/* Cards */
|
||||
--card /* Card-Hintergrund */
|
||||
--card-foreground /* Card-Text */
|
||||
|
||||
/* Popover */
|
||||
--popover /* Popover-Hintergrund */
|
||||
--popover-foreground /* Popover-Text */
|
||||
|
||||
/* Brand Colors */
|
||||
--primary /* Primärfarbe */
|
||||
--secondary /* Sekundärfarbe */
|
||||
|
||||
/* UI States */
|
||||
--muted /* Gedämpfte Farbe */
|
||||
--muted-foreground /* Gedämpfter Text */
|
||||
--accent /* Akzentfarbe */
|
||||
--accent-foreground /* Akzent-Text */
|
||||
--destructive /* Fehler/Löschen */
|
||||
--destructive-foreground /* Fehler-Text */
|
||||
|
||||
/* Form Elements */
|
||||
--border /* Border-Farbe */
|
||||
--input /* Input-Hintergrund */
|
||||
--ring /* Focus-Ring */
|
||||
|
||||
/* Border Radius */
|
||||
--radius /* Standard Border-Radius */
|
||||
|
||||
/* Typography */
|
||||
--font-primary /* Haupt-Schriftart */
|
||||
--font-secondary /* Sekundär-Schriftart */
|
||||
```
|
||||
|
||||
## Tailwind-Klassen mit Theme-Variablen
|
||||
|
||||
```blade
|
||||
{{-- Background Colors --}}
|
||||
<div class="bg-background text-foreground">...</div>
|
||||
<div class="bg-card text-card-foreground">...</div>
|
||||
<div class="bg-primary text-white">...</div>
|
||||
<div class="bg-secondary text-white">...</div>
|
||||
|
||||
{{-- Text Colors --}}
|
||||
<p class="text-foreground">...</p>
|
||||
<p class="text-muted-foreground">...</p>
|
||||
<p class="text-primary">...</p>
|
||||
<p class="text-secondary">...</p>
|
||||
|
||||
{{-- Borders --}}
|
||||
<div class="border border-border">...</div>
|
||||
<input class="border-input">
|
||||
|
||||
{{-- Border Radius --}}
|
||||
<div class="rounded-lg">...</div> {{-- nutzt --radius --}}
|
||||
<div class="rounded-md">...</div>
|
||||
<div class="rounded-sm">...</div>
|
||||
```
|
||||
|
||||
## Dark Mode
|
||||
|
||||
Alle Themes unterstützen Dark Mode durch die `.dark`-Klasse:
|
||||
|
||||
```blade
|
||||
{{-- Dark Mode Toggle --}}
|
||||
<html class="dark">
|
||||
{{-- Alle CSS-Variablen werden automatisch angepasst --}}
|
||||
</html>
|
||||
|
||||
{{-- JavaScript Toggle --}}
|
||||
<button onclick="document.documentElement.classList.toggle('dark')">
|
||||
Toggle Dark Mode
|
||||
</button>
|
||||
```
|
||||
|
||||
## ThemeHelper verwenden
|
||||
|
||||
Der `ThemeHelper` bietet praktische Methoden:
|
||||
|
||||
```blade
|
||||
{{-- Logo abrufen --}}
|
||||
<img src="{{ asset(App\Helpers\ThemeHelper::getLogoPath('positive')) }}" alt="Logo">
|
||||
<img src="{{ asset(App\Helpers\ThemeHelper::getLogoPath('negative')) }}" alt="Logo Dark">
|
||||
|
||||
{{-- Favicon --}}
|
||||
<link rel="icon" href="{{ asset(App\Helpers\ThemeHelper::getFaviconPath()) }}">
|
||||
|
||||
{{-- Primary/Secondary Colors (für inline styles) --}}
|
||||
<div style="background: {{ App\Helpers\ThemeHelper::getPrimaryColor() }}">...</div>
|
||||
|
||||
{{-- Font-Familie --}}
|
||||
<style>
|
||||
body {
|
||||
font-family: {{ App\Helpers\ThemeHelper::getFont() }};
|
||||
}
|
||||
</style>
|
||||
|
||||
{{-- Domain Config --}}
|
||||
@php
|
||||
$config = App\Helpers\ThemeHelper::getDomainConfig();
|
||||
@endphp
|
||||
```
|
||||
|
||||
## Vite Dev Server starten
|
||||
|
||||
```bash
|
||||
# Beide Server gleichzeitig
|
||||
npm run dev:all
|
||||
|
||||
# Nur Backend (Portal)
|
||||
npm run dev:portal
|
||||
|
||||
# Nur Frontend (Web)
|
||||
npm run dev:web
|
||||
```
|
||||
|
||||
## Production Build
|
||||
|
||||
```bash
|
||||
# Alle Builds
|
||||
npm run build
|
||||
|
||||
# Einzelne Builds
|
||||
npm run build:portal
|
||||
npm run build:web
|
||||
```
|
||||
|
||||
## Testing verschiedener Themes
|
||||
|
||||
### Via URL-Parameter (für Development)
|
||||
|
||||
Der `ThemeServiceProvider` unterstützt einen `?theme=` URL-Parameter zum Testen:
|
||||
|
||||
```
|
||||
https://presseportale.test?theme=presseecho
|
||||
https://presseportale.test?theme=businessportal24
|
||||
```
|
||||
|
||||
### Via Host
|
||||
|
||||
Einfach die entsprechende Domain aufrufen:
|
||||
|
||||
```
|
||||
https://presseportale.test → Portal Theme
|
||||
https://presseecho.test → Presseecho Theme
|
||||
https://businessportal24.test → Businessportal24 Theme
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Styles werden nicht geladen
|
||||
1. Prüfe ob der richtige Vite-Server läuft (`npm run dev:all`)
|
||||
2. Prüfe ob die richtige CSS-Datei im Blade-Template geladen wird
|
||||
3. Cache leeren: `php artisan config:clear && php artisan view:clear`
|
||||
|
||||
### Falsche Farben
|
||||
1. Prüfe `config/domains.php` für Domain-Konfiguration
|
||||
2. Prüfe die CSS-Variablen in der Theme-Datei
|
||||
3. Browser-Cache leeren (Strg+Shift+R)
|
||||
|
||||
### Theme wechselt nicht
|
||||
1. Prüfe `ThemeServiceProvider` ob Domain erkannt wird
|
||||
2. Prüfe `.env` für Domain-Konfiguration
|
||||
3. `php artisan config:clear` ausführen
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue