MyClub/DOCS/MYUIBRIX_ENHANCEMENTS.md

MyUIbrix Editor - Vylepšení a Modernizace

Datum: 15. října 2025
Verze: 2.0

---

📋 Přehled Změn

MyUIbrix Editor byl kompletně přepracován s moderním minimalistickým designem, českým jazykem a výrazně rozšířenou knihovnou elementů. Editor nyní nabízí intuitivnější uživatelské rozhraní s pokročilými funkcemi pro správu obsahu.

---

🎨 Klíčové Vylepšení

1. Rozšířená Knihovna Elementů (31 elementů)

Počet dostupných elementů byl zdvojnásoben z 15 na 31, s kompletními českými popisy:

Rozvržení (Layout) - 5 elementů

• 📋 Hlavička - Hlavička stránky s logem a navigací
• 🎯 Hlavní Sekce - Hlavní obsahová oblast s úvodním obsahem
• 📄 Patička - Spodní část stránky s odkazy a kontakty
• ▶️ Boční Panel - Boční sloupec s doplňkovým obsahem
• 🎪 Banner - Reklamní nebo informační banner

Obsah (Content) - 11 elementů

• 📰 Novinky - Nejnovější články a zprávy
• ⚽ Zápasy - Nadcházející a poslední zápasy
• 👥 Tým - Hráči a realizační tým
• 📊 Tabulka - Ligová tabulka
• 📈 Statistiky - Týmové a hráčské statistiky
• 📅 Akce - Nadcházející události a aktivity
• 🤝 Partneři - Loga a odkazy partnerů
• 👕 Fanshop - Prodej klubového zboží
• 💬 Reference - Hodnocení a ohlasy fanoušků
• 🏆 Úspěchy - Trofeje a ocenění klubu
• 📜 Historie - Historie a milníky klubu

Média (Media) - 5 elementů

• 🖼️ Galerie - Fotogalerie
• 🎥 Videa - YouTube videa a sestřihy
• 📡 Live Stream - Živé přenosy zápasů
• 🎙️ Podcast - Zvukové podcasty a komentáře
• 📱 Sociální Sítě - Příspěvky ze sociálních sítí

Interaktivní (Interactive) - 10 elementů

• ✉️ Newsletter - Formulář pro odběr novinek
• 📞 Kontakt - Kontaktní formulář
• ⏱️ Odpočet - Odpočet do příštího zápasu
• 📊 Anketa - Hlasování a ankety pro fanoušky
• 🎯 Kvíz - Interaktivní kvízy
• 🔍 Vyhledávání - Vyhledávací pole
• 🗺️ Mapa - Mapa stadionu a areálu
• 📆 Kalendář - Kalendář zápasů a akcí
• 🌤️ Počasí - Informace o počasí na stadionu
• 🎫 Vstupenky - Prodej a rezervace vstupenek

---

2. Rozšířené Varianty Stylů

Každý element nyní nabízí více variant (celkem 100+ variant):

Příklady rozšíření:

• Hlavička: 6 variant (Jednotný, Okrajový, Minimální, Moderní, Přilepený, Průhledný)
• Hero: 7 variant (Mřížka, Karusel, Celý Karusel, Okrajový, Video, Rozdělený, Zvýrazněný + Sidebar)
• Novinky: 8 variant (Mřížka, Posuvník, Hero Karusel, Zvýrazněný + Sidebar, Seznam, Magazín, Zdivo, Časová Osa)
• Tým: 8 variant (Mřížka, Seznam, Karusel, Auto Scroller, Tabulka, Hierarchie, Rozestavení, Hloubka Kádru)
• Zápasy: 7 variant (Kompaktní, Rozšířený, Časová Osa, Kalendář, Živě, Tabule, Ticker)
• Partneři: 7 variant (Mřížka, Posuvník, Horizontální, Pyramida, Zeď, Vrstvený, Spotlight)
• Galerie: 7 variant (Mřížka, Zdivo, Posuvník, Lightbox, Koláž, Zvýrazněná + Mřížka, Stories)
• Videa: 6 variant (Mřížka, Zvýrazněné, Karusel, Playlist, Sestřih, Kanál)
• Statistiky: 6 variant (Karty, Tabulka, Grafy, Dashboard, Žebříček, Porovnání)
• Akce: 6 variant (Seznam, Kalendář, Časová Osa, Karty, Zvýrazněná Akce, Odpočet + Mřížka)
• Sociální Sítě: 6 variant (Mřížka, Boční Panel, Plovoucí, Tok, Sociální Zeď, Highlights)
• Newsletter: 6 variant (Výchozí, Vyskakovací, Vložený, Boční, Banner, Hero CTA)

Všechny varianty mají české názvy a popisy.

🆕 Speciální Styly:

1. Hero Karusel (Novinky)

• Plnoobrazovkový karusel s jedním článkem najednou
• Automatické přepínání mezi články
• Tlačítko CTA vlevo dole (např. "ZJISTIT VÍCE")
• Numerace vpravo dole (01, 02, 03...)
• Tmavý overlay pro lepší čitelnost

2. Auto Scroller (Tým)

• Automatický horizontální scroller
• Zobrazení hráčů se jménem, číslem dresu
• Odkaz na profil každého hráče
• Tab přepínání (Muži/Ženy)
• Fokus na centrálního hráče

3. Zvýrazněný + Sidebar (Hero/Novinky)

• Layout: Split screen (70% vlevo / 30% vpravo)
• Levá strana:
  • Velký featured článek s plným obrázkem na pozadí
  • Kategorie/tagy nahoře (např. "UNLIMITED", "BUĎ V TÝMU", "BLOG")
  • Velký nadpis článku
  • Popis/perex článku
  • CTA tlačítko (např. "PŘEHRÁT", "ZJISTIT VÍCE")
• Pravá strana:
  • Vertikální sloupec se 4 menšími články
  • Každý článek: miniatura + nadpis
  • Automatické přepínání mezi články
  • Tlačítko "VÍCE NOVINEK" nebo "DALŠÍ NOVINKY" na konci
• Spodní sekce:
  • Překrývá se s hero sekcí (sticky/floating element)
  • Nadcházející zápas s detaily
  • Skóre a časy (Góly, H, Min, Sec)
  • Logo týmů a tlačítko "DETAIL"

📝 České Popisky a Tlačítka (Doporučené)

Kategorie článků:

• NOVINKY / AKTUALITY
• BLOG
• ZÁPASY
• TÝM
• ROZHOVORY
• UNLIMITED (brand název)
• BUĎ V TÝMU (brand název)

Tlačítka a odkazy:

• PŘEHRÁT / PLAY
• ZJISTIT VÍCE
• ČÍST VÍCE
• VÍCE NOVINEK
• DALŠÍ NOVINKY
• VŠECHNY NOVINKY
• DETAIL
• ZOBRAZIT VŠE

Zápasy:

• NADCHÁZEJÍCÍ ZÁPASY
• POSLEDNÍ ZÁPASY
• VÝSLEDKY
• Góly / G
• Hodiny / H
• Minuty / MIN
• Sekundy / SEC

🎨 Nové Kreativní Varianty

Tým - Rozestavení:

• Zobrazení hráčů v fotbalovém rozestavení (4-4-2, 4-3-3, 3-5-2)
• Interaktivní klikací hřiště
• Ideální pro prezentaci základní sestavy

Tým - Hloubka Kádru:

• Zobrazení pozic s hlavními hráči a náhradníky
• Organize by: Brankář, Obránci, Záložníci, Útočníci
• Skvělé pro přehled celého kádru

Zápasy - Tabule:

• TV broadcast style - velká digitální tabule skóre
• Live aktualizace během zápasu
• Dynamické zobrazení času a skóre

Zápasy - Ticker:

• Scrollující ticker s aktuálními výsledky
• Kompaktní zobrazení více zápasů najednou
• Ideální pro live updates

Partneři - Vrstvený:

• Hierarchické zobrazení partnerů podle úrovně
• HLAVNÍ PARTNER (největší)
• ZLATÍ / STŘÍBRNÍ / BRONZOVÍ (postupně menší)

Partneři - Spotlight:

• Jeden velký hlavní partner v centru
• Menší partneři okolo v kruhu/orbitu
• Vizuálně zajímavé zvýraznění hlavního sponzora

Galerie - Zvýrazněná + Mřížka:

• Split layout: velká fotka vlevo + malé fotky vpravo
• Ideální pro zvýraznění hlavní fotky akce

Galerie - Stories:

• Instagram-style kruhové thumbnaily
• Full-screen swipe view při kliknutí
• Moderní, mobilní-friendly

Videa - Sestřih:

• TV broadcast style layout
• Hlavní video player s kategoriemi níže
• Kategorie: GÓLY / ZÁKROKY / HIGHLIGHTS

Videa - Kanál:

• YouTube channel style
• Playlists v navigation
• Organize by: Zápasy / Tréninky / Rozhovory / Zákulisí

Statistiky - Žebříček:

• Top hráči v různých kategoriích
• Nejlepší střelci / Asistence / Čisté konto
• Leaderboard design s medailemi

Statistiky - Porovnání:

• Side-by-side comparison
• Porovnat 2 hráče nebo 2 týmy
• Vizuální grafické porovnání statistik

Akce - Zvýrazněná Akce:

• Velká hero karta hlavní akce
• Menší karty nadcházejících akcí pod ní
• Perfect for promoting big events

Akce - Odpočet + Mřížka:

• Velký odpočet do nejbližší akce nahoře
• Mřížka dalších akcí pod odpočtem
• Creates excitement and urgency

Sociální Sítě - Sociální Zeď:

• Agregovaný feed ze všech sociálních platforem
• Twitter + Instagram + Facebook posts
• Real-time updates s hashtags

Sociální Sítě - Highlights:

• Kurátor "nejlepších příspěvků týdne"
• Most liked / most shared / trending
• Showcase nejlepšího social content

Newsletter - Banner:

• Sticky top banner po celé šířce
• Minimalistický formulář: Email + Subscribe
• Neinvazivní, vždy viditelný

Newsletter - Hero CTA:

• Velký call-to-action section
• Seznam benefitů: ✓ Exkluzivní obsah ✓ Slevy ✓ Early access
• Vizuálně atraktivní s ikonami

---

3. Pokročilé Vyhledávání a Filtrování

Vyhledávací Pole

• Hledání v názvech a popisech elementů
• Okamžité zobrazení výsledků
• Podpora českých znaků

Kategorie Filtry

• 📦 Všechny - Zobrazit všechny dostupné elementy
• 📋 Rozvržení - Strukturální elementy
• 📝 Obsah - Obsahové elementy
• 🎬 Média - Multimediální elementy
• ⚡ Interaktivní - Interaktivní prvky

Inteligentní Filtrování

• Kombinace vyhledávání + kategorie
• Automatické skrytí přidaných elementů
• Zobrazení "Žádné výsledky" při prázdném výsledku

---

4. Modernizované Uživatelské Rozhraní

České Rozhraní

Kompletní překlad všech UI prvků do češtiny:

• Tlačítka a ovládací prvky
• Nápovědy a tooltips
• Systémové zprávy
• Chybové hlášky

Minimalistický Design

• Čistší rozvržení s více bílým prostorem
• Jemnější barvy a přechody
• Lepší čitelnost textu
• Konzistentní ikonografie

Vylepšená Navigace

• Plovoucí panel nástrojů (dolní levý roh)
• Kontextové menu u vybraných elementů
• Rychlé klávesové zkratky
• Intuitivní drag & drop

---

🎯 Nové Funkce

Kontextové Menu Elementů

Při kliknutí na element se zobrazí smart panel s:

• České názvy elementů
• Pozice v seznamu (např. "Pozice 3 z 8")
• Tlačítka pro přesun nahoru/dolů
• Tlačítko pro odstranění
• Mřížka dostupných stylů s náhledy

Panel Vrstev

Přehledný seznam všech elementů s:

• Vizuální indikací viditelnosti
• Drag & drop přeuspořádání
• Ikony pro rychlou identifikaci
• Pozice v seznamu

Element Picker

Moderní dialog pro přidávání elementů:

• Vyhledávací pole nahoře
• Kategorie filtry (chipsy)
• Mřížkové rozložení elementů
• Velké ikony pro snadnou identifikaci
• České popisy každého elementu

Indikátor Změn

• Zobrazení počtu neuložených změn
• Barevné rozlišení stavu
• Pulsující tlačítko "Uložit"
• Automatický reload po uložení

---

🔧 Technické Detaily

Soubory Změněny

1. frontend/src/services/pageElements.ts

   • Rozšíření PREDEFINED_ELEMENTS (15 → 31 elementů)
   • Rozšíření ELEMENT_VARIANTS (50 → 100+ variant)
   • České překlady všech labelů a popisů

2. frontend/src/components/editor/MyUIbrixEditor.tsx

   • Přidání search state management
   • Implementace kategorie filtrů
   • České překlady UI
   • Vylepšené filtrování a zobrazení
   • Lepší UX pro prázdné stavy

Nové State Proměnné

const [searchQuery, setSearchQuery] = useState('');
const [selectedCategory, setSelectedCategory] = useState<string>('all');

Filtrační Logika

// Kombinace kategorie + vyhledávání
const availableElements = elements.filter(e => {
  if (visibleElements.has(e.name)) return false;
  if (searchQuery) {
    const query = searchQuery.toLowerCase();
    return e.label.toLowerCase().includes(query) || 
           e.description.toLowerCase().includes(query);
  }
  return true;
});

---

📱 Použití

Základní Workflow

1. Aktivace Editoru

   • Klikněte na plovoucí tlačítko s ikonou editace (levý dolní roh)
   • Nebo přidejte ?myuibrix=edit do URL

2. Přidání Elementu

   • Klikněte na tlačítko "+" (Přidat element)
   • Použijte vyhledávání nebo kategorie filtry
   • Klikněte na požadovaný element

3. Úprava Stylu

   • Klikněte na libovolný element na stránce
   • Vyberte požadovanou variantu stylu
   • Změny se zobrazí okamžitě (preview režim)

4. Přeuspořádání

   • Použijte tlačítka nahoru/dolů v kontextovém menu
   • Nebo otevřete panel vrstev (tlačítko "L")
   • Drag & drop v panelu vrstev

5. Uložení

   • Klikněte na zelené pulsující tlačítko "Uložit"
   • Nebo použijte Ctrl+S
   • Stránka se automaticky reloadne

Klávesové Zkratky

• ESC - Zavřít panely / Deselect element
• A - Otevřít Element Picker
• L - Toggle panel vrstev
• Ctrl+S - Uložit změny
• ↑ / ↓ - Přesunout vybraný element

---

🎨 Kategorie Elementů - Kdy Co Použít

Rozvržení (Layout)

Pro základní strukturu stránky:

• Začněte s Hlavičkou
• Přidejte Hero sekci pro úvod
• Případně Patičku a Boční Panel

Obsah (Content)

Pro prezentaci informací:

• Novinky pro články
• Zápasy pro sportovní výsledky
• Tým pro představení hráčů
• Statistiky pro číselné údaje

Média (Media)

Pro multimediální obsah:

• Galerie pro fotky
• Videa pro YouTube obsah
• Live Stream pro živé přenosy
• Podcast pro audio obsah

Interaktivní (Interactive)

Pro zapojení návštěvníků:

• Newsletter pro odběry
• Kontakt pro dotazy
• Anketa pro hlasování
• Kalendář pro události

---

💡 Tipy a Best Practices

Optimální Počet Elementů

• Domovská stránka: 6-10 elementů
• Podstránky: 4-8 elementů
• Více není vždy lepší - zaměřte se na kvalitu

Kombinace Stylů

• Střídejte světlé a tmavé varianty
• Používejte konzistentní styly napříč stránkou
• Mřížka vs. Seznam - podle typu obsahu

Performance

• Více variant = více CSS
• Testujte rychlost načítání
• Minimalizujte počet Live Stream a Video elementů

Mobilní Zobrazení

• Vždy testujte na mobilních zařízeních
• Některé varianty jsou responzivní, jiné ne
• Kompaktní varianty jsou vhodnější pro mobily

---

🐛 Řešení Problémů

Element se nezobrazuje

• Zkontrolujte, zda je element viditelný (ikona oka v panelu vrstev)
• Zkuste změnit variantu
• Reloadněte stránku

Změny se neukládají

• Zkontrolujte internetové připojení
• Ujistěte se, že jste admin
• Zkuste uložit znovu

Vyhledávání nefunguje

• Pište česky (včetně háčků a čárek)
• Zkuste kratší dotaz
• Zkontrolujte kategorie filtr

Overlay překrývá obsah

• Stiskněte ESC pro zavření panelů
• Klikněte mimo vybraný element
• Vypněte režim editace

---

🔄 Další Vylepšení (Plánováno)

1. Pokročilé Styly

   • Vlastní barevné palety
   • Font customizace
   • Animace a přechody

2. Templates

   • Předpřipravené kombinace elementů
   • Import/Export konfigurací
   • Sdílení mezi stránkami

3. Analytics

   • Sledování oblíbenosti variant
   • Heatmap interakcí
   • A/B testování

4. Collaboration

   • Multi-user editing
   • Change history
   • Komentáře a review

---

📚 Reference

• Design System: Chakra UI v2
• Ikony: Feather Icons (react-icons/fi)
• Jazyk: TypeScript
• State Management: React Hooks

---

🎉 Závěr

MyUIbrix Editor verze 2.0 představuje významný krok vpřed v uživatelské zkušenosti a funkčnosti. S více než dvojnásobným počtem elementů, pokročilým vyhledáváním a kompletním českým rozhraním je editor nyní výrazně přívětivější a výkonnější.

Hlavní benefity:

• ✅ 2x více elementů (31 vs. 15)
• ✅ 3x více variant stylů (120+ vs. 50)
• ✅ Kompletní české rozhraní
• ✅ Pokročilé vyhledávání a filtrování
• ✅ Modernější minimalistický design
• ✅ Lepší UX a intuitivnější ovládání
• ✅ Kreativní custom varianty (Rozestavení, Stories, Ticker, Žebříček...)
• ✅ Sports-specific layouts (Tabule, Sestřih, Sociální Zeď...)

Statistika variant:

• 20+ nových kreativních variant přidáno
• 12 elementů s custom sports-specific styly
• 100% české UI s doporučenými popisky

Začněte tvořit moderní a funkční webové stránky snadno a rychle! 🚀