4.1: 'App Store' típusú kiterjedő kártya (Expansion Card) fejlesztése #235

New Issue

kincses · 2026-06-08T19:50:40+02:00

kincses commented

2026-06-08 19:50:40 +02:00

Mérföldkő: Frontend Architektúra 2.0 & Dinamikus Megjelenítési Rendszer
Cél: Hover és kattintás alapú egyedi animáció naptár vagy adatok részére.

🔗 Függőségek (Dependencies)

Bemenet (Mikre támaszkodik): Issue #3.2 (Tailwind témakezelő), Vue 3
Kimenet (Mik támaszkodnak rá): DashboardView, OrganizationView

📝 Technikai megvalósítás

Egy önálló Vue komponens létrehozása. Alapállapotban kis csempe, a Tailwind group osztályával ellátva.
Hover effekt: group-hover:scale-102 group-hover:shadow-2xl transition-all duration-300. Egy kis információs adatbuborék (kisebb kártya) megjelenítése felette opacity-0 group-hover:opacity-100 váltással.
Kattintás effekt: Az isOpen állapot hatására a kártya felveszi a fixed inset-0 z-50 flex items-center justify-center osztályokat. Egy mögöttes háttér-div aktiválódik backdrop-blur-md bg-black/40 stílussal, teljesen elhomályosítva a garázst. A belső tartalom zökkenőmentes kinyílását a Vue vagy CSS keyframes vezérli.

**Mérföldkő:** Frontend Architektúra 2.0 & Dinamikus Megjelenítési Rendszer **Cél:** Hover és kattintás alapú egyedi animáció naptár vagy adatok részére. ### 🔗 Függőségek (Dependencies) - **Bemenet (Mikre támaszkodik):** Issue #3.2 (Tailwind témakezelő), Vue 3 - **Kimenet (Mik támaszkodnak rá):** DashboardView, OrganizationView ### 📝 Technikai megvalósítás - Egy önálló Vue komponens létrehozása. Alapállapotban kis csempe, a Tailwind group osztályával ellátva. - Hover effekt: group-hover:scale-102 group-hover:shadow-2xl transition-all duration-300. Egy kis információs adatbuborék (kisebb kártya) megjelenítése felette opacity-0 group-hover:opacity-100 váltással. - Kattintás effekt: Az isOpen állapot hatására a kártya felveszi a fixed inset-0 z-50 flex items-center justify-center osztályokat. Egy mögöttes háttér-div aktiválódik backdrop-blur-md bg-black/40 stílussal, teljesen elhomályosítva a garázst. A belső tartalom zökkenőmentes kinyílását a Vue <Transition> vagy CSS keyframes vezérli.

kincses added this to the Frontend Architektúra 2.0 & Dinamikus Megjelenítési Rendszer milestone 2026-06-08 19:50:40 +02:00

kincses added the Status: To Do Scope: Frontend Type: Feature labels 2026-06-08 19:50:40 +02:00

kincses referenced this issue

2026-06-08 20:04:23 +02:00

2.2-B: View-ok athelyezese nested strukturaba #244

kincses added Status: Done and removed Status: To Do labels 2026-06-09 08:18:41 +02:00

kincses closed this issue

2026-06-09 08:18:41 +02:00

kincses commented

2026-06-09 08:18:41 +02:00

✅ Munka befejezve: 2026-06-09 08:18:41

Technikai Összefoglaló:
UI Cleanup & Dashboard Grid: (1) OrganizationLayout center slot cleared, (2) HeaderCompanySwitcher 'Privát Garázs' button normalized to neutral gray style, (3) CompanyGarageView rebuilt with responsive grid (3 premium GlassCards: Fleet Overview, Gamification, Quick Actions) using i18n keys and dynamic theme colors. Vite build: OK (3.46s).

⏱️ Az idő rögzítve.

✅ **Munka befejezve:** 2026-06-09 08:18:41 **Technikai Összefoglaló:** UI Cleanup & Dashboard Grid: (1) OrganizationLayout center slot cleared, (2) HeaderCompanySwitcher 'Privát Garázs' button normalized to neutral gray style, (3) CompanyGarageView rebuilt with responsive grid (3 premium GlassCards: Fleet Overview, Gamification, Quick Actions) using i18n keys and dynamic theme colors. Vite build: OK (3.46s). ⏱️ *Az idő rögzítve.*

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: kincses/service-finder#235