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

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

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