crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-16 14:36:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Try to fix fullscreen on macos part 2

Browse Source
This commit is contained in:
Daniele Pancottini 2023-02-23 10:32:10 +01:00
parent 6823013494
commit 7fe5c0b8ed
2 changed files with 24 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
site/components/common/Room/ResourceCardContent/ImageCardContent.module.css Normal file
View File

67
site/components/common/Room/ResourceCardContent/ImageCardContent.tsx
View File

@ -1,4 +1,5 @@
import { Box, Stack, Image, Text } from "@chakra-ui/react"; import { Box, Stack, Image, Text } from "@chakra-ui/react";
import "./ImageCardContent.module.css"
import screenfull from "screenfull"; import screenfull from "screenfull";
export default function ImageCardContent(props: { export default function ImageCardContent(props: {
@ -9,50 +10,30 @@ export default function ImageCardContent(props: {
return ( return (
<> <>
<style jsx>{` <Box
*|*:fullscreen:not(:root) { className={props.style.imageContainer}
position: fixed !important; w={'full'}
top: 0 !important; >
left: 0 !important; <Image
right: 0 !important; objectFit={"cover"}
bottom: 0 !important; margin={"auto"}
width: 100% !important; cursor={'pointer'}
height: 100% !important; onClick={() => openFullScreen('resource-image')}
margin: 0 !important; id='resource-image'
min-width: 0 !important; alt=''
max-width: none !important; src={props.resourcePath} />
min-height: 0 !important; </Box>
max-height: none !important;
box-sizing: border-box !important; <Box
object-fit: contain; p={5}
transform: none !important; className={props.style.captionContainer}>
}
`}
</style>
<Box
className={props.style.imageContainer}
w={'full'}
>
<Image
objectFit={"cover"}
margin={"auto"}
cursor={'pointer'}
onClick={() => openFullScreen('resource-image')}
id='resource-image'
alt=''
src={props.resourcePath} />
</Box>
<Box <Stack align={'center'}>
p={5} <Text padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
className={props.style.captionContainer}> {props.resourceCaption}
</Text>
<Stack align={'center'}> </Stack>
<Text padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}> </Box>
{props.resourceCaption}
</Text>
</Stack>
</Box>
</> </>
) )
}; };