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: tiles no longer get cut off

Browse Source
This commit is contained in:
Damien Ostler 2024-05-27 08:19:53 -04:00
parent 090630c507
commit f7cef69b5b
5 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/api/galleries/[id]/images/route.ts
View File

@ -71,7 +71,6 @@ export async function GET(
}
break;
default:
blobBuffer = await blurImage(blobBuffer)
break;
}
const contentType = file.name.endsWith('.png') ? 'image/png' : 'image/jpeg';

5
app/api/galleries/[id]/thumbnail/route.ts
View File

@ -62,7 +62,10 @@ const galleryId= params.id // 312
}
break;
default:
if(gallery.nsfw){
blobBuffer = await blurImage(blobBuffer);
}
break;
}
const dataUrl = `data:${contentType};base64,${blobBuffer.toString('base64')}`;

3
app/gallery/page.tsx
View File

@ -118,7 +118,7 @@ function PageComponent() {
</div>
<div className="absolute items-center w-2/4 h-full ml-10 z-0 overflow-hidden animate-in animate-ease-out">
<div className="grid grid-cols-3 gap-y-36 gap-x-10 h-full overflow-y-auto no-scrollbar pt-20">
<div className="grid grid-cols-3 gap-y-52 gap-x-5 h-full overflow-y-auto no-scrollbar pt-20">
{galleries && galleries.map((gallery, index) => (
<GalleryThumbnail
key={gallery.id}
@ -127,6 +127,7 @@ function PageComponent() {
columns={gallery.columns}
subscription={gallery.tier as string}
onSelect={selectGallery}
nsfw={gallery.nsfw}
></GalleryThumbnail>
))}
<div className="pt-10"></div>

2
components/ui/gallery.tsx
View File

@ -141,10 +141,8 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
const panZoomRef = useRef<any>(null);
const resetPanZoom = (event: any) => {
console.log(event.target.id)
if (panZoomRef.current && event.target.id != "image-container") {
panZoomRef.current.autoCenter();
console.log("POGER")
}
};

21
components/ui/gallery_thumbnail.tsx
View File

@ -6,15 +6,16 @@ interface GalleryThumbnailProps {
onSelect: (id: string, columns: number) => void;
title: string;
subscription: string;
nsfw: boolean;
}
const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: GalleryThumbnailProps) => {
const GalleryThumbnail = ({ id, columns, onSelect, title,nsfw, subscription }: GalleryThumbnailProps) => {
const [galleryId, setGalleryId] = useState<string>(id);
const [thumbnailUrl, setThumbnailUrl] = useState<string>('');
const [isLoading, setIsLoading] = useState<boolean>(true);
const [galleryCollumns, setColumns] = useState<number>(columns);
const [imageCount, setImageCount] = useState<number>(0);
const [nsfwState, setNsfw] = useState<boolean>(nsfw);
const openGallery = () => {
onSelect(galleryId, galleryCollumns);
};
@ -36,7 +37,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
return (
<div className="py-3 sm:max-w-xl sm:mx-auto flex-3 animate-in">
<div className="h-48 overflow-visible w-full relative hover:scale-105 shadow-lg bg-gray-400 rounded-3xl">
<div className="h-48 overflow-visible w-full relative hover:scale-95 shadow-lg bg-gray-400 rounded-3xl">
{!isLoading && (
<>
<img
@ -47,13 +48,15 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
key={galleryId}
style={{ width: '20rem', height: '20rem', objectFit: 'cover' }}
/>
<div className="absolute top-2 left-0 w-full h-10% bg-gray-900 bg-opacity-10 backdrop-blur-sm p-2 rounded-md shadow-lg flex flex-col justify-end">
<div className="bottom-0 left-0 w-full h-10% bg-gray-900 bg-opacity-10 backdrop-blur-sm p-2 rounded-md shadow-lg flex flex-col justify-end">
<div className="text-white flex justify-between">
<div>
<div className="flex">
<h3 className="pr-4 text-lg font-bold break-words" style={{ lineHeight: '2rem', textShadow: '0 0 2px black' }}>{title}</h3>
</div>
</div>
</div>
<div className="text-white flex justify-between">
<div className="flex items-center">
<div className="relative group">
<div className="absolute top-0 right-2 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
@ -69,9 +72,15 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
<div className="text-center">{imageCount} pictures in this gallery.</div>
</div>
</div>
{(nsfwState) && (
<div className="relative group">
<span className="bg-red-900 text-white px-2 py-1 mr-2 rounded-md text-sm h-full flex items-center">NSFW</span>
</div>
)}
{subscription === "Free" && (
<div className="relative group">
<span className="bg-gray-900 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
<div className="relative group"> <span className="bg-gray-900 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
<div className="absolute top-0 right-12 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
<div className="text-center">This is free for everyone.</div>
</div>