mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
Tomáš Dvořák
208 lines
4.8 KiB
Markdown
208 lines
4.8 KiB
Markdown
# 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
|