mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
dev day #62
This commit is contained in:
Tomáš Dvořák
@@ -0,0 +1,513 @@
|
||||
# MyUIbrix Elementor-Style Page Builder - Complete Feature Guide
|
||||
|
||||
## 🎨 Overview
|
||||
|
||||
MyUIbrix has been enhanced with professional Elementor-like page building capabilities, providing a complete visual editing experience with drag-and-drop, inline editing, column layouts, custom CSS, and contextual admin links.
|
||||
|
||||
---
|
||||
|
||||
## ✨ New Features
|
||||
|
||||
### 1. **Inline Text Editing** ✏️
|
||||
|
||||
**Component**: `InlineTextEditor.tsx`
|
||||
|
||||
**Features**:
|
||||
- Click any text element to edit in place
|
||||
- Rich text formatting toolbar:
|
||||
- **Bold** (Ctrl+B)
|
||||
- *Italic* (Ctrl+I)
|
||||
- <u>Underline</u> (Ctrl+U)
|
||||
- 🔗 Insert Links
|
||||
- Auto-save on blur
|
||||
- Visual feedback with outline highlighting
|
||||
- Cancel/Save buttons
|
||||
|
||||
**Usage**:
|
||||
```tsx
|
||||
import InlineTextEditor from './components/editor/InlineTextEditor';
|
||||
|
||||
<InlineTextEditor
|
||||
elementId="hero-title"
|
||||
initialContent="<h1>Welcome</h1>"
|
||||
onSave={(content) => console.log('Saved:', content)}
|
||||
/>
|
||||
```
|
||||
|
||||
**User Experience**:
|
||||
1. Click on any text to activate editing mode
|
||||
2. Formatting toolbar appears above the text
|
||||
3. Make changes with rich formatting
|
||||
4. Click save or click away to auto-save
|
||||
|
||||
---
|
||||
|
||||
### 2. **Column Layout Manager** 📐
|
||||
|
||||
**Component**: `ColumnLayoutManager.tsx`
|
||||
|
||||
**Features**:
|
||||
- Visual column layout builder
|
||||
- Pre-built templates:
|
||||
- Single Column (100%)
|
||||
- Two Equal (50% / 50%)
|
||||
- Three Equal (33% / 33% / 33%)
|
||||
- Four Equal (25% each)
|
||||
- Left Sidebar (33% / 67%)
|
||||
- Right Sidebar (67% / 33%)
|
||||
- Featured + Two (50% / 25% / 25%)
|
||||
- Main + Sidebar (75% / 25%)
|
||||
- Add/Remove columns dynamically
|
||||
- Visual preview of layout
|
||||
- Plus buttons in each column to add elements
|
||||
|
||||
**Usage**:
|
||||
```tsx
|
||||
<ColumnLayoutManager
|
||||
elementName="hero"
|
||||
currentColumns={[
|
||||
{ id: '1', width: '50%', elements: [] },
|
||||
{ id: '2', width: '50%', elements: [] }
|
||||
]}
|
||||
onLayoutChange={(columns) => handleLayoutChange(columns)}
|
||||
/>
|
||||
```
|
||||
|
||||
**User Experience**:
|
||||
1. Click "Templates" button to see pre-built layouts
|
||||
2. Select a template to instantly apply it
|
||||
3. Use + button to add more columns
|
||||
4. Click × on any column to remove it
|
||||
5. Columns auto-resize to maintain 100% width
|
||||
|
||||
---
|
||||
|
||||
### 3. **Custom CSS Editor** 💻
|
||||
|
||||
**Component**: `CustomCSSEditor.tsx`
|
||||
|
||||
**Features**:
|
||||
- Full CSS code editor with syntax highlighting
|
||||
- Real-time validation
|
||||
- Live preview mode
|
||||
- CSS examples library:
|
||||
- Background gradients
|
||||
- Shadows & hover effects
|
||||
- Border radius
|
||||
- Animations
|
||||
- Error detection for malformed CSS
|
||||
- One-click example insertion
|
||||
|
||||
**Usage**:
|
||||
```tsx
|
||||
<CustomCSSEditor
|
||||
elementName="hero"
|
||||
currentCSS="background: linear-gradient(...);"
|
||||
onCSSChange={(css) => applyCustomCSS(css)}
|
||||
/>
|
||||
```
|
||||
|
||||
**User Experience**:
|
||||
1. Click "CSS" tab in style panel
|
||||
2. Write custom CSS properties
|
||||
3. Toggle "Preview" to see changes live
|
||||
4. Browse examples for inspiration
|
||||
5. Click "Apply CSS" to save changes
|
||||
|
||||
**Example CSS**:
|
||||
```css
|
||||
/* Background Gradient */
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 60px 20px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. **Contextual Admin Links** 🔗
|
||||
|
||||
**Component**: `ContextualAdminLinks.tsx`
|
||||
|
||||
**Features**:
|
||||
- Smart links based on element type
|
||||
- Quick access to relevant admin pages
|
||||
- Link descriptions and badges
|
||||
- External link indicators
|
||||
|
||||
**Element-Specific Links**:
|
||||
|
||||
**Hero Section**:
|
||||
- Manage Articles → `/admin/articles`
|
||||
- Upload Images → `/admin/media`
|
||||
|
||||
**News Section**:
|
||||
- Manage Articles → `/admin/articles`
|
||||
- Categories → `/admin/categories`
|
||||
- Article Settings → `/admin/settings/articles`
|
||||
|
||||
**Matches Section**:
|
||||
- Manage Matches → `/admin/matches`
|
||||
- Match Settings → `/admin/settings/matches`
|
||||
|
||||
**Team Section**:
|
||||
- Manage Players → `/admin/team/players`
|
||||
- Team Settings → `/admin/settings/team`
|
||||
|
||||
**Videos Section**:
|
||||
- Manage Videos → `/admin/videos`
|
||||
- Video Settings → `/admin/settings/videos`
|
||||
|
||||
**Sponsors Section**:
|
||||
- Manage Sponsors → `/admin/sponsors`
|
||||
|
||||
**Newsletter**:
|
||||
- Newsletter Settings → `/admin/settings/newsletter`
|
||||
- Subscribers → `/admin/newsletter/subscribers`
|
||||
|
||||
**User Experience**:
|
||||
1. Select any element
|
||||
2. Click "Admin" tab in style panel
|
||||
3. See relevant admin links for that element
|
||||
4. Click any link to jump to admin page
|
||||
|
||||
---
|
||||
|
||||
### 5. **Enhanced Visual Style Panel** 🎨
|
||||
|
||||
**Updated Component**: `VisualStylePanel.tsx`
|
||||
|
||||
**New Tabs**:
|
||||
1. **Content** - Typography controls
|
||||
2. **Style** - Colors & spacing
|
||||
3. **Layout** - Grid & column layouts
|
||||
4. **CSS** - Custom CSS editor
|
||||
5. **Admin** - Contextual admin links
|
||||
|
||||
**Typography Controls**:
|
||||
- Font family selection
|
||||
- Font size (8-128px)
|
||||
- Font weight (100-900)
|
||||
- Line height (0.5-3)
|
||||
- Letter spacing (-5px to 10px)
|
||||
- Text transform (none, uppercase, lowercase, capitalize)
|
||||
|
||||
**Color Controls**:
|
||||
- Text color picker
|
||||
- Background color picker
|
||||
- Hex code input
|
||||
- Visual color preview
|
||||
|
||||
**Spacing Controls**:
|
||||
- Padding (Top, Right, Bottom, Left)
|
||||
- Margin (Top, Right, Bottom, Left)
|
||||
- Numeric input with steppers
|
||||
|
||||
**Layout Controls**:
|
||||
- Grid templates with visual previews
|
||||
- Custom grid columns/rows
|
||||
- Column & row gaps
|
||||
- Grid auto-flow
|
||||
- Align & justify controls
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Complete User Workflow
|
||||
|
||||
### Creating a Custom Hero Section
|
||||
|
||||
1. **Activate Editor**
|
||||
- Click edit button (bottom left)
|
||||
- Editor mode activates
|
||||
|
||||
2. **Select Hero Element**
|
||||
- Click on hero section
|
||||
- Contextual panel appears
|
||||
|
||||
3. **Change Layout**
|
||||
- Click "Layout" tab
|
||||
- Select "Two Equal" template
|
||||
- Hero splits into 2 columns
|
||||
|
||||
4. **Edit Text**
|
||||
- Click on hero title
|
||||
- Inline editor activates
|
||||
- Format text with bold, italic
|
||||
- Add link if needed
|
||||
- Save changes
|
||||
|
||||
5. **Apply Custom Colors**
|
||||
- Click "Style" tab
|
||||
- Pick background color
|
||||
- Select text color
|
||||
- Adjust padding/margin
|
||||
|
||||
6. **Add Custom CSS**
|
||||
- Click "CSS" tab
|
||||
- Add gradient background
|
||||
- Add box shadow
|
||||
- Enable preview
|
||||
- Apply CSS
|
||||
|
||||
7. **Manage Content**
|
||||
- Click "Admin" tab
|
||||
- Click "Manage Articles"
|
||||
- Opens in new tab
|
||||
- Edit hero content
|
||||
|
||||
8. **Save & Publish**
|
||||
- Click "Publikovat" button
|
||||
- Changes go live
|
||||
- Page reloads with new design
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Benefits
|
||||
|
||||
### For Administrators
|
||||
- **No coding required** - Visual editing for everything
|
||||
- **Fast iterations** - See changes instantly
|
||||
- **Professional layouts** - Pre-built templates
|
||||
- **Custom styling** - Full CSS control when needed
|
||||
- **Smart navigation** - Quick links to content management
|
||||
|
||||
### For End Users
|
||||
- **Consistent UX** - Familiar Elementor-like interface
|
||||
- **Responsive** - All layouts work on mobile/tablet/desktop
|
||||
- **Fast loading** - Optimized CSS application
|
||||
- **Accessible** - WCAG-compliant color contrast
|
||||
|
||||
### Technical Benefits
|
||||
- **Modular components** - Easy to extend
|
||||
- **TypeScript** - Type-safe
|
||||
- **Live preview** - No page reloads during editing
|
||||
- **Version control** - All changes tracked
|
||||
- **Reversible** - Can always go back
|
||||
|
||||
---
|
||||
|
||||
## 📱 Responsive Controls
|
||||
|
||||
### Viewport Switcher
|
||||
Located in top toolbar:
|
||||
- 🖥️ **Desktop** - Full width preview
|
||||
- 📱 **Tablet** - 768px width
|
||||
- 📱 **Mobile** - 375px width
|
||||
|
||||
### Device-Specific Styling
|
||||
Each element can have different styles per device:
|
||||
```typescript
|
||||
{
|
||||
desktop: {
|
||||
fontSize: 48,
|
||||
padding: 60
|
||||
},
|
||||
tablet: {
|
||||
fontSize: 36,
|
||||
padding: 40
|
||||
},
|
||||
mobile: {
|
||||
fontSize: 24,
|
||||
padding: 20
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Technical Implementation
|
||||
|
||||
### Architecture
|
||||
|
||||
```
|
||||
MyUIbrixEditor (Main)
|
||||
├── InlineTextEditor (Text editing)
|
||||
├── ColumnLayoutManager (Layouts)
|
||||
├── CustomCSSEditor (CSS)
|
||||
├── ContextualAdminLinks (Navigation)
|
||||
└── VisualStylePanel (Properties)
|
||||
├── Content Tab
|
||||
├── Style Tab
|
||||
├── Layout Tab
|
||||
├── CSS Tab
|
||||
└── Admin Tab
|
||||
```
|
||||
|
||||
### Data Flow
|
||||
|
||||
```
|
||||
User Action → Editor Component → Event Dispatch → Live Preview
|
||||
↓
|
||||
Save to State
|
||||
↓
|
||||
API Call (on Publish)
|
||||
↓
|
||||
Database Storage
|
||||
```
|
||||
|
||||
### Custom Events
|
||||
|
||||
**myuibrix-change**: Element variant/visibility changed
|
||||
```javascript
|
||||
window.dispatchEvent(new CustomEvent('myuibrix-change', {
|
||||
detail: { elementName, variant, visible, previewMode: true }
|
||||
}));
|
||||
```
|
||||
|
||||
**myuibrix-style-change**: Element styles changed
|
||||
```javascript
|
||||
window.dispatchEvent(new CustomEvent('myuibrix-style-change', {
|
||||
detail: { elementName, styles, previewMode: true }
|
||||
}));
|
||||
```
|
||||
|
||||
**myuibrix-reorder**: Element order changed
|
||||
```javascript
|
||||
window.dispatchEvent(new CustomEvent('myuibrix-reorder', {
|
||||
detail: { order: [...], previewMode: true }
|
||||
}));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Best Practices
|
||||
|
||||
### For Custom CSS
|
||||
1. Use relative units (rem, em) for better responsiveness
|
||||
2. Avoid `!important` - use specificity instead
|
||||
3. Test on all viewports before publishing
|
||||
4. Keep CSS organized with comments
|
||||
5. Use CSS variables for consistent theming
|
||||
|
||||
### For Column Layouts
|
||||
1. Start with templates, then customize
|
||||
2. Keep mobile-first in mind
|
||||
3. Don't exceed 4 columns on desktop
|
||||
4. Test content overflow in narrow columns
|
||||
5. Use consistent gutters (gaps)
|
||||
|
||||
### For Inline Editing
|
||||
1. Save frequently
|
||||
2. Keep text concise
|
||||
3. Use formatting sparingly
|
||||
4. Test link targets
|
||||
5. Preview on different devices
|
||||
|
||||
### For Admin Links
|
||||
1. Use contextual links to stay organized
|
||||
2. Update content before changing design
|
||||
3. Keep images optimized
|
||||
4. Check all links work
|
||||
5. Review settings after changes
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### CSS Not Applying
|
||||
- Check for syntax errors (missing braces, semicolons)
|
||||
- Ensure preview mode is enabled
|
||||
- Click "Apply CSS" button
|
||||
- Save and publish changes
|
||||
|
||||
### Layout Breaking
|
||||
- Reset to a template
|
||||
- Check column widths sum to 100%
|
||||
- Clear custom CSS
|
||||
- Reload page
|
||||
|
||||
### Text Not Saving
|
||||
- Ensure you clicked save or blurred away
|
||||
- Check network connection
|
||||
- Look for error toasts
|
||||
- Try manual save button
|
||||
|
||||
### Admin Links Not Working
|
||||
- Verify you're logged in as admin
|
||||
- Check admin routes are configured
|
||||
- Ensure backend API is running
|
||||
- Clear browser cache
|
||||
|
||||
---
|
||||
|
||||
## 🔮 Future Enhancements
|
||||
|
||||
### Planned Features
|
||||
- [ ] **Animation Builder** - Visual keyframe editor
|
||||
- [ ] **Global Styles** - Theme-wide CSS variables
|
||||
- [ ] **Template Library** - Save/load complete layouts
|
||||
- [ ] **Revision History** - Undo/redo across sessions
|
||||
- [ ] **Collaboration** - Multi-user editing
|
||||
- [ ] **AI Suggestions** - Smart layout recommendations
|
||||
- [ ] **A/B Testing** - Test multiple designs
|
||||
- [ ] **Performance Analytics** - Speed insights
|
||||
- [ ] **Accessibility Checker** - WCAG compliance
|
||||
- [ ] **Export/Import** - Share designs between sites
|
||||
|
||||
---
|
||||
|
||||
## 📚 Additional Resources
|
||||
|
||||
### Related Documentation
|
||||
- `MYUIBRIX_FIXES.md` - Initial editor features
|
||||
- `ADMIN_FUNCTIONALITY_REPORT.md` - Admin panel guide
|
||||
- `SETUP_IMPROVEMENTS.md` - Initial setup
|
||||
|
||||
### Component Files
|
||||
- `frontend/src/components/editor/InlineTextEditor.tsx`
|
||||
- `frontend/src/components/editor/CustomCSSEditor.tsx`
|
||||
- `frontend/src/components/editor/ColumnLayoutManager.tsx`
|
||||
- `frontend/src/components/editor/ContextualAdminLinks.tsx`
|
||||
- `frontend/src/components/editor/VisualStylePanel.tsx`
|
||||
- `frontend/src/components/editor/MyUIbrixEditor.tsx`
|
||||
|
||||
### API Endpoints
|
||||
- `GET /api/v1/page-elements/:pageType` - Get configurations
|
||||
- `POST /api/v1/page-elements/batch` - Save configurations
|
||||
|
||||
---
|
||||
|
||||
## 💡 Tips & Tricks
|
||||
|
||||
### Keyboard Shortcuts
|
||||
- `ESC` - Close panels / Exit editing
|
||||
- `Ctrl+S` - Save changes
|
||||
- `L` - Toggle layers panel
|
||||
- `A` - Open element picker
|
||||
- `↑` / `↓` - Move element up/down
|
||||
- `Delete` - Remove selected element
|
||||
|
||||
### Quick Workflows
|
||||
1. **Clone a Section**: Copy element, paste, modify
|
||||
2. **Batch Styling**: Apply CSS to multiple elements at once
|
||||
3. **Template Reuse**: Save layouts as templates
|
||||
4. **Quick Preview**: Toggle devices with viewport switcher
|
||||
5. **Admin Shortcuts**: Use contextual links to jump quickly
|
||||
|
||||
### Pro Tips
|
||||
- 🎨 Use color picker for brand consistency
|
||||
- 📐 Leverage grid templates for complex layouts
|
||||
- 💻 Learn basic CSS for advanced customization
|
||||
- 🔗 Bookmark frequently used admin pages
|
||||
- 💾 Save drafts before major changes
|
||||
|
||||
---
|
||||
|
||||
## 📞 Support
|
||||
|
||||
For issues or feature requests:
|
||||
1. Check this documentation first
|
||||
2. Review troubleshooting section
|
||||
3. Check console for errors
|
||||
4. Contact support with:
|
||||
- Element name
|
||||
- Steps to reproduce
|
||||
- Browser/device info
|
||||
- Screenshots if applicable
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: December 2024
|
||||
**Version**: 2.0.0
|
||||
**Status**: ✅ Production Ready
|
||||
Reference in New Issue
Block a user