Neues Design der Projektkarten mit festem Layout und optimierter Badge-Verteilung
Die Projektkarten wurden überarbeitet, um eine einheitliche Höhe und ein stabiles Layout zu gewährleisten, während eine intelligente Badge-Verteilung und ein Herz-Favoriten-Button hinzugefügt wurden.
In dieser Version der E-Commerce Plattform donista haben wir die Projektkarten im Bereich '/projects' neu gestaltet. Die Karten haben nun eine feste Höhe von 360px, was visuelle Instabilität durch unterschiedliche Höhen und Layoutverschiebungen eliminiert. Das Layout besteht aus drei Zonen: Kopfbereich, Hauptinhalt und Fußbereich, die stets stabil bleiben, unabhängig von den angezeigten Daten.
Zusätzlich haben wir einen neuen Algorithmus zur Badge-Verteilung implementiert, der sicherstellt, dass zwei Badge-Reihen optimal gefüllt werden, ohne dass Badge-Inhalte abgeschnitten werden. Die Badges werden nun nie abgeschnitten, sodass nur vollständige Badges angezeigt werden.
Wir haben außerdem einen Herz-Favoriten-Button hinzugefügt, der den Benutzer es ermöglicht, Projekte als Favoriten zu markieren. Dieser Button hat keinen Einfluss auf das Layout und wird in der unteren rechten Ecke der Karte angezeigt. Aktuell speichert dieser Button den Status lokal, eine spätere Anbindung an das Backend zur Persistierung ist geplant.
Die Änderungen sorgen für ein verbessertes Nutzererlebnis und eine ansprechendere Darstellung der Projekte.
Testen Sie die neuen Funktionen:
- Besuchen Sie die Seiten '/projects' und '/projects/all', um die einheitlichen Kartenhöhen zu überprüfen.
- Untersuchen Sie Karten mit unterschiedlichen Inhalten (mit/ohne Logo, Flaggen, Badges, kurze/lange Beschreibungen), um sicherzustellen, dass keine Positionsverschiebungen auftreten.
- Klicken Sie auf das Herzsymbol, um die Favoritenauswahl zu testen, ohne dass eine Navigation erfolgt.
- Überprüfen Sie, ob die Badge-Reihen die verfügbare Breite ohne Beschneidung ausfüllen (Browserfenster anpassen, um den ResizeObserver zu testen).
- Überprüfen Sie die Verbraucher-Seiten: '/projects/[slug]', Projektauswahl, Marketing-Startseite, Seiten der Arbeitsfelder.