MyClub/DOCS/MYUIBRIX_QUICK_START.md

MyUIbrix Quick Start Guide

🚀 Quick Access

For Admins:

Method 1: URL Parameter
→ Navigate to: http://your-site.com/?myuibrix=edit

Method 2: Admin Sidebar
→ Click "MyUIbrix Editor" in admin navigation

---

⌨️ Keyboard Shortcuts

Key	Action
ESC	Close panels / Exit edit mode
Ctrl+S	Save changes
L	Toggle Layers panel
A	Open Add Element picker
↑	Move selected element up
↓	Move selected element down
Delete	Remove selected element

---

🎨 Basic Workflow

1. Enter Edit Mode

• Click floating edit button (bottom-left)
• Or use URL: /?myuibrix=edit

2. Select Element

• Hover over sections to see badges
• Click to select

3. Change Variant

• Choose from available styles in popup
• See live preview instantly

4. Reorder Elements

• Open Layers panel (L key)
• Use arrow buttons or drag

5. Toggle Visibility

• In Layers panel
• Click eye icon to hide/show

6. Save Changes

• Click "Publikovat" button
• Page will reload with new design

---

📦 Available Elements

Layout (5)

• Header - 7 variants
• Hero - 8 variants
• Footer - Standard, Minimal, Extended
• Sidebar - Left, Right, Sticky
• Banner - Top, Bottom, Sidebar, Overlay

Content (11)

• News - 8 variants (Grid, Scroller, Magazine, etc.)
• Matches - 7 variants (Compact, Timeline, Scoreboard, etc.)
• Team - 8 variants (Grid, Formation, Auto-scroll, etc.)
• Table - League standings
• Stats - Cards, Charts, Dashboard
• Activities - List, Calendar, Timeline
• Sponsors - 8 variants (Grid, Pyramid, Spotlight, etc.)
• Merch - Product grid/carousel
• Testimonials - Reviews carousel
• Achievements - Trophy showcase
• History - Club timeline

Media (5)

• Gallery - 7 variants (Grid, Masonry, Stories, etc.)
• Videos - 6 variants (Grid, Playlist, Highlights, etc.)
• Live - Stream player
• Podcast - Episode list/player
• Social - Social media feeds

Interactive (9)

• Newsletter - Subscription forms
• Contact - Contact form
• Countdown - Match countdown
• Poll - Fan voting
• Quiz - Interactive quizzes
• Search - Search box
• Map - Stadium location
• Calendar - Events calendar
• Weather - Match day weather
• Ticketing - Ticket sales widget

---

🎯 Common Tasks

Change Homepage Layout

1. Enter edit mode
2. Click hero section
3. Select variant: Grid / Carousel / Split
4. Save

Hide/Show Sections

1. Press L for Layers
2. Click eye icon next to element
3. Save changes

Reorder Sections

1. Press L for Layers
2. Use ↑↓ buttons
3. Save changes

Add New Element

1. Press A for Add Element
2. Browse by category
3. Click to add
4. Configure and save

Preview Mobile View

1. Use viewport switcher (top bar)
2. Select: Desktop / Tablet / Mobile
3. Test responsive behavior

---

⚠️ Important Notes

Preview Mode

• ✅ Changes visible only to you during editing
• ❌ Not visible to regular visitors
• 💾 Must click "Publikovat" to make live

Saving

• Changes auto-reload page after save
• All visitors will see new design
• Previous design lost (no undo yet)

Performance

• No impact on page load for visitors
• Editor loads only for admins
• Live preview uses client-side events only

---

🐛 Troubleshooting

Can't select elements?

→ Element might be missing data-element attribute
→ Contact developer to add it

Changes not saving?

→ Check browser console for errors
→ Verify admin permissions
→ Check network tab for API errors

Preview not updating?

→ Refresh page and try again
→ Check if edit mode is active
→ Try different browser

Element disappeared?

→ Check visibility in Layers panel
→ Element might be at bottom of page
→ Scroll to find it

---

📚 Learn More

• Full Audit: DOCS/MYUIBRIX_INTEGRITY_CHECK.md
• Fixes Applied: DOCS/MYUIBRIX_FIXES_APPLIED.md
• Code: frontend/src/components/editor/MyUIbrixEditor.tsx

---

🎓 Pro Tips

1. Use keyboard shortcuts - Much faster than clicking
2. Preview on mobile - Always check responsive design
3. Save often - No undo functionality yet
4. Test variants - Try different styles to see what works
5. Check performance - Some variants are more complex
6. Use layers panel - Easier than clicking elements
7. Category filter - In Add Element picker for quick search
8. Hover for details - Variant descriptions explain differences

---

🆘 Need Help?

1. Check this guide
2. Review documentation in /DOCS/
3. Contact system administrator
4. Check browser console for errors
5. Review server logs if issues persist

---

Version: 1.0
Last Updated: 2025-01-15
Status: ✅ Production Ready