mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 10:42:57 +00:00
Tomáš Dvořák
144 lines
3.4 KiB
Markdown
144 lines
3.4 KiB
Markdown
# Quick Start: Visual Element Editor
|
|
|
|
## What It Does
|
|
|
|
The Visual Element Editor lets you change the visual style of different page elements (header, hero section, news layout, etc.) without touching code.
|
|
|
|
## How to Use (Admin)
|
|
|
|
### 1. Access the Editor
|
|
|
|
1. Login as admin
|
|
2. Navigate to the homepage
|
|
3. Look for the **purple floating button** in the bottom-right corner (gear icon)
|
|
4. Click it to open the Visual Editor
|
|
|
|
### 2. Configure Elements
|
|
|
|
1. **Toggle Editing Mode ON**
|
|
- Switch the toggle at the top of the drawer to "Editing"
|
|
|
|
2. **Select Variants**
|
|
- **Header**: Choose between Unified, Edge, Minimal, or Modern
|
|
- **Hero**: Choose between Grid, Swiper, Swiper Full, or Edge
|
|
- **News**: Choose between Grid, Scroller, List, or Magazine
|
|
- **Matches**: Choose between Compact, Expanded, or Timeline
|
|
- **Sponsors**: Choose between Grid, Slider, Scroller, or Pyramid
|
|
|
|
3. **Save Changes**
|
|
- Click "Save & Reload"
|
|
- The page will reload with your new configuration
|
|
|
|
## Header Variants Explained
|
|
|
|
### Unified (Default)
|
|
Classic header with logo on left and text on right. Professional and clean.
|
|
|
|
### Edge
|
|
Modern gradient background, centered logo and text. Bold and eye-catching.
|
|
|
|
### Minimal
|
|
Simplified centered header. Just logo and club name, very clean.
|
|
|
|
### Modern
|
|
Bold header with accent border at bottom. Logo has colored background glow.
|
|
|
|
## Quick Tips
|
|
|
|
- **Try Before Saving**: Select different options and review the descriptions
|
|
- **Unsaved Changes**: Yellow badge warns you if you haven't saved
|
|
- **Cancel**: Reverts to last saved configuration
|
|
- **Hide Button**: You can temporarily hide the floating button if needed
|
|
|
|
## Technical Setup (Developer)
|
|
|
|
### 1. Run Database Migration
|
|
|
|
```bash
|
|
# Make sure migrations are up to date
|
|
make migrate-up
|
|
```
|
|
|
|
Or manually:
|
|
```bash
|
|
cd database/migrations
|
|
# Apply: 000020_create_page_element_configs.up.sql
|
|
```
|
|
|
|
### 2. Restart Backend
|
|
|
|
The routes are already configured. Just restart:
|
|
```bash
|
|
go run main.go
|
|
```
|
|
|
|
### 3. Frontend is Ready
|
|
|
|
No build needed - components are already integrated in HomePage.
|
|
|
|
## Example Configuration
|
|
|
|
**Modern Sports Club:**
|
|
- Header: Modern
|
|
- Hero: Swiper Full
|
|
- News: Grid
|
|
- Matches: Expanded
|
|
- Sponsors: Slider
|
|
|
|
**Classic Club:**
|
|
- Header: Unified
|
|
- Hero: Grid
|
|
- News: List
|
|
- Matches: Compact
|
|
- Sponsors: Grid
|
|
|
|
**Bold Contemporary:**
|
|
- Header: Edge
|
|
- Hero: Edge
|
|
- News: Magazine
|
|
- Matches: Timeline
|
|
- Sponsors: Pyramid
|
|
|
|
## Troubleshooting
|
|
|
|
**Q: I don't see the purple button**
|
|
- Make sure you're logged in as admin
|
|
- Check the bottom-right corner (may be below fold)
|
|
|
|
**Q: Changes don't save**
|
|
- Check browser console for errors
|
|
- Ensure backend is running
|
|
- Verify database migration was applied
|
|
|
|
**Q: Page doesn't reload after save**
|
|
- The save triggers a `window.location.reload()`
|
|
- Check for JavaScript errors in console
|
|
|
|
**Q: I want to reset to defaults**
|
|
- Delete configurations from admin panel or database
|
|
- System falls back to default variants (usually 'unified')
|
|
|
|
## API Reference
|
|
|
|
For programmatic access:
|
|
|
|
```bash
|
|
# Get current config
|
|
GET /api/v1/page-elements?page_type=homepage
|
|
|
|
# Update config (admin only)
|
|
POST /api/v1/admin/page-elements
|
|
{
|
|
"page_type": "homepage",
|
|
"element_name": "header",
|
|
"variant": "modern"
|
|
}
|
|
```
|
|
|
|
## Support
|
|
|
|
For issues or feature requests, check:
|
|
- `VISUAL_ELEMENT_EDITOR.md` - Full documentation
|
|
- Console logs for debugging
|
|
- Database table `page_element_configs` for stored values
|