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;
backX?: 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)
prevWidth?: string;
prevHeight?: string;
@ -229,12 +229,19 @@ const GalleryCarouselOverlay: React.FC<GalleryCarouselOverlayProps> = ({
};
}, [isEditMode, draggingButton, onButtonPositionChange]);
// Convert numeric value to rem CSS value
const toRem = (value?: string): string | undefined => {
// Convert numeric value to viewport units (vw for width, vh for height)
// 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;
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;
return `${num}rem`;
return `${num}${unit}`;
};
// Render navigation button
@ -253,8 +260,8 @@ const GalleryCarouselOverlay: React.FC<GalleryCarouselOverlayProps> = ({
const isDragging = draggingButton === type;
const isNavButton = type === 'prev' || type === 'next';
const hasCustomIcon = iconUrl && iconUrl.trim() !== '';
const widthRem = toRem(buttonWidth);
const heightRem = toRem(buttonHeight);
const widthValue = toViewportUnit(buttonWidth, 'vw');
const heightValue = toViewportUnit(buttonHeight, 'vh');
// Navigation-style rendering: custom icon fills full button (like NavigationElement)
// When custom icon is set, always use navigation style (icon only, no backdrop)
@ -272,9 +279,9 @@ const GalleryCarouselOverlay: React.FC<GalleryCarouselOverlayProps> = ({
left: `${x}%`,
top: `${y}%`,
transform: 'translate(-50%, -50%)',
// Apply dimensions when set
...(widthRem && { width: widthRem }),
...(heightRem && { height: heightRem }),
// Apply dimensions when set (vw for width, vh for height - matches regular elements)
...(widthValue && { width: widthValue }),
...(heightValue && { height: heightValue }),
}}
onClick={(e) => {
e.stopPropagation();