admin/39948-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed gallery silder sizes issue

Browse Source
This commit is contained in:
Dmitri 2026-04-03 14:04:54 +04:00
parent 037d268e44
commit fec8864e07
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/UiElements/GalleryCarouselOverlay.tsx
View File

@ -29,7 +29,7 @@ interface GalleryCarouselOverlayProps {
nextY?: number; nextY?: number;
backX?: number; backX?: number;
backY?: number; backY?: number;
// Button dimensions (CSS values like '48px', '3rem') // Button dimensions (numeric values use vw for width, vh for height - same as regular elements)
// When set with custom icon, button renders like NavigationElement (icon fills full button) // When set with custom icon, button renders like NavigationElement (icon fills full button)
prevWidth?: string; prevWidth?: string;
prevHeight?: string; prevHeight?: string;
@ -229,12 +229,19 @@ const GalleryCarouselOverlay: React.FC<GalleryCarouselOverlayProps> = ({
}; };
}, [isEditMode, draggingButton, onButtonPositionChange]); }, [isEditMode, draggingButton, onButtonPositionChange]);
// Convert numeric value to rem CSS value // Convert numeric value to viewport units (vw for width, vh for height)
const toRem = (value?: string): string | undefined => { // Matches the unit system used by regular elements in elementStyles.ts
const toViewportUnit = (
value?: string,
unit: 'vw' | 'vh' = 'vw',
): string | undefined => {
if (!value || value.trim() === '') return undefined; if (!value || value.trim() === '') return undefined;
const num = parseFloat(value); const trimmed = value.trim();
// If value already has a unit, preserve it
if (/[a-z%]+$/i.test(trimmed)) return trimmed;
const num = parseFloat(trimmed);
if (!Number.isFinite(num) || num <= 0) return undefined; if (!Number.isFinite(num) || num <= 0) return undefined;
return `${num}rem`; return `${num}${unit}`;
}; };
// Render navigation button // Render navigation button
@ -253,8 +260,8 @@ const GalleryCarouselOverlay: React.FC<GalleryCarouselOverlayProps> = ({
const isDragging = draggingButton === type; const isDragging = draggingButton === type;
const isNavButton = type === 'prev' || type === 'next'; const isNavButton = type === 'prev' || type === 'next';
const hasCustomIcon = iconUrl && iconUrl.trim() !== ''; const hasCustomIcon = iconUrl && iconUrl.trim() !== '';
const widthRem = toRem(buttonWidth); const widthValue = toViewportUnit(buttonWidth, 'vw');
const heightRem = toRem(buttonHeight); const heightValue = toViewportUnit(buttonHeight, 'vh');
// Navigation-style rendering: custom icon fills full button (like NavigationElement) // Navigation-style rendering: custom icon fills full button (like NavigationElement)
// When custom icon is set, always use navigation style (icon only, no backdrop) // When custom icon is set, always use navigation style (icon only, no backdrop)
@ -272,9 +279,9 @@ const GalleryCarouselOverlay: React.FC<GalleryCarouselOverlayProps> = ({
left: `${x}%`, left: `${x}%`,
top: `${y}%`, top: `${y}%`,
transform: 'translate(-50%, -50%)', transform: 'translate(-50%, -50%)',
// Apply dimensions when set // Apply dimensions when set (vw for width, vh for height - matches regular elements)
...(widthRem && { width: widthRem }), ...(widthValue && { width: widthValue }),
...(heightRem && { height: heightRem }), ...(heightValue && { height: heightValue }),
}} }}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();