moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix media-modal-zoom

This commit is contained in:
danidfra 2024-11-22 12:30:22 -03:00 committed by P. Reis
parent 0b14274b05
commit 6346e589ad
3 changed files with 77 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/features/ui/components/image-loader.tsx
View File

@ -135,13 +135,13 @@ class ImageLoader extends PureComponent<IImageLoader> {
const { alt, src, width, height, onClick } = this.props; const { alt, src, width, height, onClick } = this.props;
const { loading } = this.state; const { loading } = this.state;
const className = 'relative h-[80vh] flex items-center justify-center flex-col'; const className = 'relative h-screen flex items-center justify-center flex-col';
return ( return (
<div className={className}> <div className={className}>
{loading ? ( {loading ? (
<canvas <canvas
className={clsx('max-h-[80%] max-w-full object-contain', { 'hidden': !this.hasSize() })} className={clsx('max-h-[100%] max-w-full object-contain', { 'hidden': !this.hasSize() })}
style={{ style={{
background: 'url(\'../assets/images/void.png\') repeat', background: 'url(\'../assets/images/void.png\') repeat',
}} }}

6
src/features/ui/components/modals/media-modal.tsx
View File

@ -258,10 +258,11 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
} }
justifyContent='between' justifyContent='between'
> >
<Stack className='relative h-full'>
<HStack <HStack
alignItems='center' alignItems='center'
justifyContent='between' justifyContent='between'
className={clsx('flex-[0_0_60px] p-4 transition-opacity', navigationHiddenClassName)} className={clsx('absolute z-[9999] flex w-full p-4 transition-opacity', navigationHiddenClassName)}
> >
<IconButton <IconButton
title={intl.formatMessage(messages.close)} title={intl.formatMessage(messages.close)}
@ -340,7 +341,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
{actualStatus && ( {actualStatus && (
<HStack <HStack
justifyContent='center' justifyContent='center'
className={clsx('flex-[0_0_60px] transition-opacity', navigationHiddenClassName)} className={clsx('absolute bottom-0 flex w-full transition-opacity', navigationHiddenClassName)}
> >
<StatusActionBar <StatusActionBar
status={actualStatus} status={actualStatus}
@ -350,6 +351,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
</HStack> </HStack>
)} )}
</Stack> </Stack>
</Stack>
{actualStatus && ( {actualStatus && (
<div <div

2
src/styles/tailwind.css
View File

@ -39,8 +39,6 @@
@layer utilities { @layer utilities {
.media-modal * { .media-modal * {
img { img {
max-height: 80vh;
width: 100%;
object-fit: contain; object-fit: contain;
} }