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

Adjusting media

This commit is contained in:
danidfra 2024-11-20 20:56:43 -03:00 committed by P. Reis
parent e2409cced8
commit 7077fc84f1
2 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -243,7 +243,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
}; };
return ( return (
<div className='pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'> <div className='media-modal pointer-events-auto fixed inset-0 z-[9999] flex size-full bg-gray-900/90'>
<div <div
className='absolute inset-0' className='absolute inset-0'
role='presentation' role='presentation'
@ -311,15 +311,17 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
</div> </div>
)} )}
<ReactSwipeableViews <div className='size-full'>
style={swipeableViewsStyle} <ReactSwipeableViews
containerStyle={containerStyle} style={swipeableViewsStyle}
onChangeIndex={handleSwipe} containerStyle={containerStyle}
className='flex items-center justify-center ' onChangeIndex={handleSwipe}
index={getIndex()} className='flex items-center justify-center '
> index={getIndex()}
{content} >
</ReactSwipeableViews> {content}
</ReactSwipeableViews>
</div>
{hasMultipleImages && ( {hasMultipleImages && (
<div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}> <div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>

11
src/styles/tailwind.css
View File

@ -37,6 +37,17 @@
} }
@layer utilities { @layer utilities {
.media-modal * {
img {
max-height: 80vh;
width: 100%;
object-fit: contain;
}
video {
@apply max-w-full max-h-[80%];
}
}
.status { .status {
@apply min-h-[54px] cursor-default animate-fade opacity-100; @apply min-h-[54px] cursor-default animate-fade opacity-100;
} }