mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 18:52:56 +00:00
Tomáš Dvořák
48 lines
1.9 KiB
Markdown
48 lines
1.9 KiB
Markdown
# Logo Sizing Fix
|
|
|
|
## Problem
|
|
SVG logos from logoapi.sportcreative.eu were being displayed too large in circular containers, causing them to be cut off by the circular border.
|
|
|
|
## Solution
|
|
Implemented a comprehensive fix that includes:
|
|
|
|
### 1. CSS Updates (`frontend/src/styles/logos.css`)
|
|
- Added specific styles for SVG logos in circular containers
|
|
- Added padding to prevent cutoff
|
|
- Added utility classes for consistent logo display
|
|
|
|
### 2. Utility Functions (`frontend/src/utils/logoUtils.ts`)
|
|
- `isLogoApiUrl()` - Detects logoapi URLs
|
|
- `getLogoStyle()` - Returns appropriate styling based on logo source and container type
|
|
- `getLogoClassName()` - Returns appropriate CSS classes
|
|
- `getLogoProps()` - Returns complete props for Chakra UI Image components
|
|
|
|
### 3. Component Updates
|
|
- **TeamLogo component**: Now uses utility functions for consistent styling
|
|
- **ClubModal component**: Added padding for logoapi SVGs in circular containers
|
|
- **Navbar component**: Added padding for logoapi SVGs in circular containers
|
|
- **MatchesPage**: Added padding for logoapi SVGs in match displays
|
|
|
|
### 4. Key Changes
|
|
- Changed `objectFit` from `cover` to `contain` for better logo display
|
|
- Added conditional padding (4-6px) for logoapi SVGs in circular containers
|
|
- Added `boxSizing: border-box` to ensure proper sizing calculations
|
|
|
|
## Usage
|
|
The fix is automatically applied to all components that display logos. No additional configuration is needed.
|
|
|
|
## Testing
|
|
To test the fix:
|
|
1. Navigate to any page with team logos
|
|
2. Verify that SVG logos from logoapi are properly sized within circular containers
|
|
3. Check that logos are not cut off by the circular border
|
|
4. Ensure logos maintain their aspect ratio
|
|
|
|
## Files Modified
|
|
- `frontend/src/styles/logos.css`
|
|
- `frontend/src/utils/logoUtils.ts` (new)
|
|
- `frontend/src/components/common/TeamLogo.tsx`
|
|
- `frontend/src/components/home/ClubModal.tsx`
|
|
- `frontend/src/components/Navbar.tsx`
|
|
- `frontend/src/pages/MatchesPage.tsx`
|