The background component is now a container (and should probably be renamed overlay).

This commit is contained in:
Eric van der Vlist 2022-09-08 23:20:47 +02:00
parent 6887cd0102
commit e0b6c69cfc
4 changed files with 22 additions and 10 deletions

View File

@ -5,17 +5,25 @@ import '../theme/background.css';
const Background: react.FC<{ const Background: react.FC<{
shift: { x: number; y: number }; shift: { x: number; y: number };
zoom: number; zoom: number;
}> = (props: { shift: { x: number; y: number }; zoom: number }) => { children?: JSX.Element;
console.log(`--- Rendering background, props: ${JSON.stringify(props)} ---`); }> = (props: {
shift: { x: number; y: number };
zoom: number;
children?: JSX.Element;
}) => {
const {children: children, ...argProps} = props;
console.log(`--- Rendering background, props: ${JSON.stringify(argProps)} ---`);
return ( return (
<div <div
className='background' className='background'
style={{ style={{
transform: `translate(${-props.shift.x}px, ${-props.shift.y}px) scale(${props.zoom})`, transform: `translate(${-props.shift.x}px, ${-props.shift.y}px) scale(${
props.zoom
})`,
}} }}
> >
<img src='/assets/background.jpg' alt='' /> {props.children}
</div> </div>
); );
}; };

View File

@ -221,7 +221,9 @@ const Viewport: react.FC<{}> = (props: {}) => {
onTouchEnd={touchEndHandler} onTouchEnd={touchEndHandler}
onTouchCancel={mouseLeaveHandler} onTouchCancel={mouseLeaveHandler}
> >
<Background shift={shift} zoom={zoom}/> <Background shift={shift} zoom={zoom}>
<img src='/assets/background.jpg' alt='' />
</Background>
</div> </div>
); );
}; };

View File

@ -5,7 +5,3 @@
z-index: -1; z-index: -1;
} }
.background img {
width: 4032px;
height: 2268px;
}

View File

@ -2,4 +2,10 @@
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.background img {
width: 4032px;
height: 2268px;
}