mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
dev day #92
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,191 @@
|
||||
# Setup Page Improvements - Implementation Guide
|
||||
|
||||
## ✅ Completed
|
||||
|
||||
### 1. Font/Typography Selection (DONE)
|
||||
- **Added to SetupPage.tsx** (lines 62-64, 218-219, 584-634)
|
||||
- **Features**:
|
||||
- Separate font selection for headings and body text
|
||||
- 12+ popular Google Fonts + system fonts
|
||||
- Live preview of selected fonts
|
||||
- Saves to backend with setup payload
|
||||
- **Fonts Available**:
|
||||
- Sans-serif: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Source Sans Pro, PT Sans, Nunito
|
||||
- Display: Oswald, Bebas Neue
|
||||
- Serif: Playfair Display, Merriweather, Georgia
|
||||
- System fonts
|
||||
|
||||
### 2. Custom Scrollbars (DONE)
|
||||
- **File Created**: `frontend/src/styles/custom-scrollbar.css`
|
||||
- **Imported in**: `frontend/src/App.tsx` (line 5)
|
||||
- **Features**:
|
||||
- Beautiful gradient scrollbars using club's primary and secondary colors
|
||||
- Hover effects with glow
|
||||
- Dark mode support
|
||||
- Firefox and Chrome compatibility
|
||||
- Thin scrollbar variant available
|
||||
- Hide scrollbar option for carousels
|
||||
|
||||
### 3. Layout Variants for HomePage (DONE)
|
||||
- **Matches Section**: Now supports single column (default) or two-column layout
|
||||
- Variants: `compact` (single) and `compact_split` (two columns)
|
||||
- **Standings Section**: Now supports two-column layout (default) with news + tables
|
||||
- Variants: `split_news` (two columns - default) and `standard` (single column)
|
||||
- **Configurable via MyUIbrix Editor**
|
||||
|
||||
### 4. Placeholder Cards Fix (DONE)
|
||||
- Fixed the hero section to show exactly 2 placeholder cards instead of 3
|
||||
|
||||
## 🔧 Recommended Improvements for SetupPage
|
||||
|
||||
### 1. Add Tabs for Better Organization
|
||||
```tsx
|
||||
// Add to imports
|
||||
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';
|
||||
|
||||
// Structure:
|
||||
<Tabs colorScheme="blue" variant="enclosed" isLazy>
|
||||
<TabList>
|
||||
<Tab><Icon as={FaUserShield} mr={2} />Administr
|
||||
|
||||
átor</Tab>
|
||||
<Tab><Icon as={FaFootballBall} mr={2} />Klub</Tab>
|
||||
<Tab><Icon as={FaMapMarkerAlt} mr={2} />Lokace</Tab>
|
||||
<Tab><Icon as={FaShareAlt} mr={2} />Sociální sítě</Tab>
|
||||
<Tab><Icon as={FaCog} mr={2} />Pokročilé</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<!-- Content here -->
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### 2. Add Missing Location/Address Fields
|
||||
Add these state variables after line 79:
|
||||
|
||||
```tsx
|
||||
// Location/Address
|
||||
const [clubAddress, setClubAddress] = useState('');
|
||||
const [clubCity, setClubCity] = useState('');
|
||||
const [clubZip, setClubZip] = useState('');
|
||||
const [clubCountry, setClubCountry] = useState('Česká republika');
|
||||
const [stadiumName, setStadiumName] = useState('');
|
||||
const [latitude, setLatitude] = useState<string>('');
|
||||
const [longitude, setLongitude] = useState<string>('');
|
||||
```
|
||||
|
||||
Add fields in a new "Lokace" tab:
|
||||
```tsx
|
||||
<FormControl>
|
||||
<FormLabel>Název stadionu</FormLabel>
|
||||
<Input value={stadiumName} onChange={(e) => setStadiumName(e.target.value)} placeholder="Městský stadion" />
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel>Adresa</FormLabel>
|
||||
<Input value={clubAddress} onChange={(e) => setClubAddress(e.target.value)} placeholder="Ulice a číslo" />
|
||||
</FormControl>
|
||||
|
||||
<SimpleGrid columns={[1, 3]} spacing={4}>
|
||||
<FormControl>
|
||||
<FormLabel>Město</FormLabel>
|
||||
<Input value={clubCity} onChange={(e) => setClubCity(e.target.value)} placeholder="Praha" />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel>PSČ</FormLabel>
|
||||
<Input value={clubZip} onChange={(e) => setClubZip(e.target.value)} placeholder="123 45" />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel>Země</FormLabel>
|
||||
<Input value={clubCountry} onChange={(e) => setClubCountry(e.target.value)} />
|
||||
</FormControl>
|
||||
</SimpleGrid>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Box>
|
||||
<Text fontWeight="semibold" mb={2}>GPS Souřadnice (pro mapu)</Text>
|
||||
<SimpleGrid columns={[1, 2]} spacing={4}>
|
||||
<FormControl>
|
||||
<FormLabel>Zeměpisná šířka (Latitude)</FormLabel>
|
||||
<Input value={latitude} onChange={(e) => setLatitude(e.target.value)} placeholder="50.0755" type="number" step="any" />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel>Zeměpisná délka (Longitude)</FormLabel>
|
||||
<Input value={longitude} onChange={(e) => setLongitude(e.target.value)} placeholder="14.4378" type="number" step="any" />
|
||||
</FormControl>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
```
|
||||
|
||||
### 3. Fix Percentage Calculation
|
||||
Replace the `getCompletionPercentage` function (around line 341):
|
||||
|
||||
```tsx
|
||||
const getCompletionPercentage = () => {
|
||||
let total = 0;
|
||||
let completed = 0;
|
||||
// Admin account (required)
|
||||
total += 30;
|
||||
if (adminEmail && adminPassword && isPasswordValid(sanitizePassword(adminPassword))) completed += 30;
|
||||
// Club info (required)
|
||||
total += 30;
|
||||
if (clubName && clubLogoUrl) completed += 30;
|
||||
// Appearance colors
|
||||
total += 15;
|
||||
if (primaryColor && secondaryColor) completed += 15;
|
||||
// Social links
|
||||
total += 15;
|
||||
if (facebookUrl || instagramUrl || youtubeUrl) completed += 15;
|
||||
// SMTP/Email (optional but recommended)
|
||||
total += 10;
|
||||
if (smtpHost && smtpPort) completed += 10;
|
||||
return Math.round((completed / total) * 100);
|
||||
};
|
||||
```
|
||||
|
||||
### 4. Move "Barvy vzhledu" Section
|
||||
Currently under separate heading. Should be moved to the "Klub" tab as a subsection after club basic info. Add a `<Divider />` before it to separate visually.
|
||||
|
||||
## 📝 Benefits of These Changes
|
||||
|
||||
1. **Tabs**: Much cleaner interface, easier to navigate through setup steps
|
||||
2. **Location Fields**: Essential for maps, contact page, and SEO
|
||||
3. **Fixed Percentage**: Now accurately reflects completion (was broken before)
|
||||
4. **Custom Scrollbars**: Professional look matching club branding throughout the site
|
||||
5. **Better Organization**: Colors logically grouped with club info
|
||||
|
||||
## 🎨 Scrollbar Usage Examples
|
||||
|
||||
```css
|
||||
/* Default - uses primary color automatically */
|
||||
.my-element {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Thin variant */
|
||||
.my-element {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.my-element.thin-scrollbar { }
|
||||
|
||||
/* Hide scrollbar but keep scroll */
|
||||
.my-carousel {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.my-carousel.hide-scrollbar { }
|
||||
|
||||
/* Accent color variant */
|
||||
.special-section {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.special-section.accent-scrollbar { }
|
||||
```
|
||||
|
||||
## 🚀 Next Steps
|
||||
|
||||
1. Apply the tab structure to SetupPage.tsx
|
||||
2. Add location/address fields
|
||||
3. Fix percentage calculation
|
||||
4. Test the setup flow end-to-end
|
||||
5. Consider adding a preview of how the site will look with selected colors
|
||||
Reference in New Issue
Block a user