damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-03-14 10:05:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix:23 (#35)

Browse Source
This commit is contained in:
Damien Ostler 2024-06-02 20:25:29 -04:00 committed by GitHub
parent caca715cc0
commit 82fdd61170
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/neroshitron/gallery.tsx
View File

@ -88,10 +88,8 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
setCurrentIndex(images.indexOf(image)); setCurrentIndex(images.indexOf(image));
}; };
const resetPanZoom = (event: any) => { const resetPanZoom = () => {
if (panZoomRef.current && event.target.id != "image-container") { panZoomRef.current.autoCenter();
panZoomRef.current.autoCenter();
}
}; };
const close = () => { const close = () => {
@ -107,7 +105,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
const renderButtons = () => { const renderButtons = () => {
return ( return (
<div className="z-20 bottom-10 fixed text-white pt-4 bg-primary bg-opacity-90 animate-in rounded-md" style={{ backdropFilter: 'blur(10px)' }}> <div className="z-20 bottom-10 fixed text-white pt-4 bg-primary bg-opacity-90 animate-in rounded-md" style={{ backdropFilter: 'blur(10px)' }}>
<div className='grid grid-cols-4 pl-4 gap-4 pr-4'> <div className='grid grid-cols-5 pl-4 gap-4 pr-4'>
<button <button
className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 bg-error hover:bg-error-light`} className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 bg-error hover:bg-error-light`}
onClick={() => close()} onClick={() => close()}
@ -116,6 +114,16 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" /> <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
<button
className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-secondary hover:bg-secondary-light'}`}
onClick={() => resetPanZoom()}
disabled={!selectedImage}
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
</svg>
</button>
<button <button
className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-secondary hover:bg-secondary-light'}`} className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-secondary hover:bg-secondary-light'}`}
onClick={() => previous()} onClick={() => previous()}
@ -152,7 +160,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
return ( return (
<div > <div >
<div className="z-20" <div className="z-20"
onClick={resetPanZoom} style={{ width: selectedImage ? "100%" : "auto", height: selectedImage ? "100%" : "auto" }}> onClick={close} style={{ width: selectedImage ? "100%" : "auto", height: selectedImage ? "100%" : "auto" }}>
<div className='flex justify-center items-center pt-2 pb-20'> <div className='flex justify-center items-center pt-2 pb-20'>
{renderButtons()} {renderButtons()}
</div> </div>