From 1242d4bce82918deba8ebbb97b10a0d0c533c26b Mon Sep 17 00:00:00 2001 From: Kevin Adametz Date: Thu, 3 Sep 2026 12:47:41 +0000 Subject: [PATCH] Markenlogos optisch aufeinander abstimmen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Gewuenscht: CABINET 15 Prozent kleiner, Rotpunkt 20 Prozent groesser, Februe unveraendert. Rotpunkt fuellte die Box bereits ganz aus und konnte nur ueber eine groessere Box wachsen. - Alle vier Logo-Boxen 20 Prozent hoeher (Seitenkopf 96 → 115 px, Kacheln 44 → 53 px, /marken 56 → 67 px). Rotpunkt waechst dadurch um genau 20 %. - Februe gleicht das ueber 20 Prozent Luft oben und unten in der Datei aus und rendert unveraendert. - CABINET bekommt 18 Prozent Luft rechts – die Box begrenzt den 4:1-Schriftzug ueber die Breite, nicht ueber die Hoehe. Die Luft sitzt nur rechts, damit das Logo links buendig zum Text darunter bleibt. Nachgerechnet an allen drei Stellen: CABINET 85 %, Rotpunkt 120 %, Februe 100 %. Die Abstimmung steckt in den Zeichenflaechen der Dateien, nicht im Blade – so gilt sie an allen vier Stellen gleichzeitig. Der Merksatz fuer neue Logos steht im Kopf von BrandLogoSeeder. Tests: 873 gruen (3217 Assertions), Pint sauber, alle Themes gebaut. Co-Authored-By: Claude Opus 5 --- database/seeders/BrandLogoSeeder.php | 17 ++++++++++++--- dev/2026-08-28/entwicklungsplan.md | 20 +++++++++++++++--- public/img/assets/marken/cabinet.svg | 2 +- public/img/assets/marken/februe.png | Bin 15359 -> 15650 bytes .../sections/brand-detail.blade.php | 4 ++-- .../sections/brand-overview.blade.php | 7 +++--- .../components/sections/core-brands.blade.php | 7 +++--- 7 files changed, 42 insertions(+), 15 deletions(-) diff --git a/database/seeders/BrandLogoSeeder.php b/database/seeders/BrandLogoSeeder.php index 40ec4394..03277ccd 100644 --- a/database/seeders/BrandLogoSeeder.php +++ b/database/seeders/BrandLogoSeeder.php @@ -9,9 +9,20 @@ use Illuminate\Database\Seeder; * Traegt die Markenlogos nach. * * Grundlage: dev/2026-08-28/markenlogos/ (Zulieferung vom 03.09.2026). Die Dateien liegen unter - * public/img/assets/marken/; das Februe-Logo ist dabei auf seinen Inhalt beschnitten – im - * Original war knapp drei Viertel der Flaeche leerer Rand, wodurch es neben den beiden SVGs - * winzig gewirkt haette. + * public/img/assets/marken/ und sind dort **optisch aufeinander abgestimmt** – das Frontend + * rendert sie in einer gemeinsamen Box, in der jedes Logo seine Zeichenflaeche ausfuellt: + * + * Rotpunkt Zeichenflaeche = Inhalt → fuellt die Box, gilt als Bezugsgroesse + * CABINET Zeichenflaeche rechts +18 % → rendert 15 % kleiner als Rotpunkt + * Februe Zeichenflaeche oben/unten +20 % → rendert wie vor der Abstimmung + * + * Alle drei waren in der Zulieferung sehr unterschiedlich stark umrandet (CABINET nutzte nur + * 29 Prozent der Hoehe) und wirkten dadurch ungleich gross. Die Abstimmung steckt bewusst in den + * Dateien und nicht im Blade: so gilt sie an allen vier Stellen gleichzeitig – Seitenkopf, + * Startseiten-Kachel, /marken und „Weitere Marken“. + * + * Wird ein Logo im Admin ausgetauscht, sollte die neue Datei genauso knapp beschnitten sein. + * Ohne Rand rendert sie in Rotpunkt-Groesse, mit viel Rand entsprechend kleiner. * * {@see CmsBrandSeeder} bringt dieselben Werte fuer frische Installationen mit, ueberspringt * aber bereits angelegte Marken. Dieser Seeder fasst nur das Feld `logo` an und auch nur dann, diff --git a/dev/2026-08-28/entwicklungsplan.md b/dev/2026-08-28/entwicklungsplan.md index 7407fe69..77b20337 100644 --- a/dev/2026-08-28/entwicklungsplan.md +++ b/dev/2026-08-28/entwicklungsplan.md @@ -1067,9 +1067,23 @@ plus 1 % Luft); die Pfade selbst sind unverändert. Der Febrü-PNG wurde tatsäc und auf 760 px Breite gerechnet – 53 KB → 15 KB. Die Originale liegen unverändert in `dev/2026-08-28/markenlogos/`. -> Die Boxgrößen im Frontend sind dabei **nicht** angefasst worden: Febrü saß bereits richtig, und -> eine größere Box hätte auch Febrü mitvergrößert. Die anderen beiden wachsen allein dadurch, -> dass ihre Dateien den Platz jetzt ausnutzen. +**Zweite Feinabstimmung nach Sichtung:** CABINET wirkte noch zu groß, Rotpunkt zu klein – +gewünscht waren −15 % und +20 % bei unverändertem Febrü. Rotpunkt füllte die Box bereits ganz +aus, konnte also nur über eine größere Box wachsen. Deshalb: + +- Alle vier Logo-Boxen **20 % höher** (Seitenkopf 96 → 115 px, Kacheln 44 → 53 px, `/marken` + 56 → 67 px). Rotpunkt füllt sie weiter aus und wächst damit um genau 20 %. +- **Febrü** gleicht das über 20 % Luft oben und unten in der Datei aus und rendert unverändert. +- **CABINET** bekommt 18 % Luft rechts – die Box begrenzt den 4:1-Schriftzug über die *Breite*, + nicht über die Höhe. Die Luft sitzt nur rechts, damit das Logo links bündig zum Text darunter + bleibt. + +Nachgerechnet an allen drei Stellen: CABINET 85 %, Rotpunkt 120 %, Febrü 100 %. + +> Die optische Abstimmung steckt bewusst in den **Zeichenflächen der Dateien** und nicht im +> Blade. So gilt sie an allen vier Stellen gleichzeitig, und die Boxgrößen bleiben eine reine +> Layoutentscheidung. Der Merksatz für neue Logos steht im Kopf von `BrandLogoSeeder`: knapp +> beschnitten rendert ein Logo in Rotpunkt-Größe, mit Rand entsprechend kleiner. **Nachziehen auf bestehenden Installationen:** `CmsBrandSeeder` überspringt vorhandene Marken, trägt die Logos also nur bei einer frischen Installation ein. `BrandLogoSeeder` **(neu)** setzt diff --git a/public/img/assets/marken/cabinet.svg b/public/img/assets/marken/cabinet.svg index 765d6e2a..79dd9b8e 100644 --- a/public/img/assets/marken/cabinet.svg +++ b/public/img/assets/marken/cabinet.svg @@ -1,7 +1,7 @@ + viewBox="52.9 148.4 574.9 123.3" xml:space="preserve"> + class="h-24 sm:h-[7.2rem] max-w-[17rem] w-auto object-contain object-left" /> @else

{{ $brand['name'] }}

@@ -355,7 +355,7 @@ class="card-elevated rounded-2xl p-8 block hover:shadow-lg transition-shadow duration-300"> @if (!empty($other['logo'])) {{ $other['name'] }} + class="h-[3.3rem] max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" /> @endif

{{ $other['name'] }}

diff --git a/resources/views/livewire/web/components/sections/brand-overview.blade.php b/resources/views/livewire/web/components/sections/brand-overview.blade.php index 40379d00..79c8b17c 100644 --- a/resources/views/livewire/web/components/sections/brand-overview.blade.php +++ b/resources/views/livewire/web/components/sections/brand-overview.blade.php @@ -19,11 +19,12 @@
- {{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr - unterschiedliche Seitenverhaeltnisse und wirken sonst ungleich gross. --}} + {{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr unterschiedliche + Seitenverhaeltnisse und wirken sonst ungleich gross. Die optische Feinabstimmung + steckt in den Zeichenflaechen der Dateien, nicht hier – siehe BrandLogoSeeder. --}} @if (!empty($brand['logo'])) {{ $brand['name'] }} + class="h-[4.2rem] max-w-[12rem] w-auto mb-5 object-contain object-left" loading="lazy" /> @endif

{{ $brand['name'] }}

diff --git a/resources/views/livewire/web/components/sections/core-brands.blade.php b/resources/views/livewire/web/components/sections/core-brands.blade.php index 52c41a38..3cd698fe 100644 --- a/resources/views/livewire/web/components/sections/core-brands.blade.php +++ b/resources/views/livewire/web/components/sections/core-brands.blade.php @@ -22,11 +22,12 @@ @endif
- {{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr - unterschiedliche Seitenverhaeltnisse und wirken sonst ungleich gross. --}} + {{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr unterschiedliche + Seitenverhaeltnisse und wirken sonst ungleich gross. Die optische Feinabstimmung + steckt in den Zeichenflaechen der Dateien, nicht hier – siehe BrandLogoSeeder. --}} @if (!empty($brand['logo'])) {{ $brand['name'] }} + class="h-[3.3rem] max-w-[10rem] w-auto mb-4 object-contain object-left" loading="lazy" /> @endif

{{ $brand['name'] }}