mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00
layout updates
This commit is contained in:
parent
1a6e1fea2a
commit
ad47c1dafb
@ -94,6 +94,12 @@ const DragDropGrid = <T extends DragDropItem>({
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Calculate optimal width for centering
|
||||||
|
const remToPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||||
|
const itemWidth = parseFloat(GRID_CONSTANTS.ITEM_WIDTH) * remToPx;
|
||||||
|
const itemGap = parseFloat(GRID_CONSTANTS.ITEM_GAP) * remToPx;
|
||||||
|
const gridWidth = itemsPerRow * itemWidth + (itemsPerRow - 1) * itemGap;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
ref={containerRef}
|
ref={containerRef}
|
||||||
@ -108,6 +114,8 @@ const DragDropGrid = <T extends DragDropItem>({
|
|||||||
height: `${rowVirtualizer.getTotalSize()}px`,
|
height: `${rowVirtualizer.getTotalSize()}px`,
|
||||||
width: '100%',
|
width: '100%',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
|
margin: '0 auto',
|
||||||
|
maxWidth: `${gridWidth}px`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
||||||
|
@ -608,7 +608,7 @@ const PageEditor = ({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{displayDocument && (
|
{displayDocument && (
|
||||||
<Box ref={gridContainerRef} p={0} style={{ position: 'relative' }}>
|
<Box ref={gridContainerRef} p={0} pb="15rem" style={{ position: 'relative' }}>
|
||||||
|
|
||||||
|
|
||||||
{/* Split Lines Overlay */}
|
{/* Split Lines Overlay */}
|
||||||
@ -641,7 +641,11 @@ const PageEditor = ({
|
|||||||
const col = position % itemsPerRow;
|
const col = position % itemsPerRow;
|
||||||
|
|
||||||
// Position split line between pages (after the current page)
|
// Position split line between pages (after the current page)
|
||||||
const leftPosition = col * itemWithGap + ITEM_WIDTH + (ITEM_GAP / 2);
|
// Calculate grid centering offset (same as DragDropGrid)
|
||||||
|
const gridWidth = itemsPerRow * ITEM_WIDTH + (itemsPerRow - 1) * ITEM_GAP;
|
||||||
|
const gridOffset = Math.max(0, (containerWidth - gridWidth) / 2);
|
||||||
|
|
||||||
|
const leftPosition = gridOffset + col * itemWithGap + ITEM_WIDTH + (ITEM_GAP / 2);
|
||||||
const topPosition = row * ITEM_HEIGHT + (ITEM_HEIGHT * 0.05); // Center vertically (5% offset since page is 90% height)
|
const topPosition = row * ITEM_HEIGHT + (ITEM_HEIGHT * 0.05); // Center vertically (5% offset since page is 90% height)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -121,7 +121,7 @@ const PageEditorControls = ({
|
|||||||
border: '1px solid var(--border-default)',
|
border: '1px solid var(--border-default)',
|
||||||
borderRadius: '16px 16px 0 0',
|
borderRadius: '16px 16px 0 0',
|
||||||
pointerEvents: 'auto',
|
pointerEvents: 'auto',
|
||||||
minWidth: 420,
|
minWidth: 360,
|
||||||
maxWidth: 700,
|
maxWidth: 700,
|
||||||
flexWrap: 'wrap',
|
flexWrap: 'wrap',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
@ -221,17 +221,6 @@ const PageEditorControls = ({
|
|||||||
</ActionIcon>
|
</ActionIcon>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
<Tooltip label="Export All">
|
|
||||||
<ActionIcon
|
|
||||||
onClick={onExportAll}
|
|
||||||
disabled={exportLoading}
|
|
||||||
variant="light"
|
|
||||||
radius="md"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
<DownloadIcon />
|
|
||||||
</ActionIcon>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user