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:gallery page resizing

Browse Source
This commit is contained in:
Damien Ostler 2024-05-27 16:38:34 -04:00
parent cb37b333b0
commit 82399d1bc3
3 changed files with 62 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
app/gallery/page.tsx
View File

@ -78,88 +78,77 @@ function PageComponent() {
}; };
return ( return (
<div>
<div className="w-full h-full flex justify-center "> {/* <div className="fixed w-full h-full overflow-hidden z-0 animate-fade-left animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards">
<div className="flex-1 w-full h-full flex flex-col gap-20"> <img
<> src="gallery_girl.png"
<div className="absolute pl-8 w-2/4 left-1/2 h-full overflow-hidden z-20 animate-in animate-duration-3000 animate-ease-out"> className="float-right object-cover h-screen w-6/6 md:w-5/6 lg:w-3/6 opacity-50 overflow-hidden"
<section className="neroshi-blue-900 h-50 p-8 pt-20 opacity-30 hover:opacity-100"> alt="Background"
<div className="container mx-auto py-8"> />
<input </div> */}
className="w-full text-neroshi-blue-950 h-16 px-3 rounded mb-8 focus:outline-none focus:shadow-outline text-xl px-8 shadow-lg" <section className="neroshi-blue-900 flex items-center w-full p-8 pt-20 opacity-90">
type="search" <div className="container mx-auto py-8">
placeholder="Search..." <input
onChange={(e) => setSearch(e.target.value)} className=" w-full md:w-1/2 text-neroshi-blue-950 h-16 px-3 rounded mb-8 focus:outline-none focus:shadow-outline text-xl px-8 shadow-lg mx-auto"
/> type="search"
<nav className="grid grid-cols-4 gap-4"> placeholder="Search..."
{tags.map((tag, index) => ( onChange={(e) => setSearch(e.target.value)}
<a
key={index}
className={`rounded-lg no-underline text-white py-3 px-4 font-medium text-center ${
selectedTags.includes(tag.name) ? 'bg-neroshi-blue-950 hover:bg-neroshi-blue-900' : 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700'
}`}
href="#"
onClick={() => handleTagClick(tag.name)}
>
{tag.name}
</a>
))}
</nav>
</div>
</section>
</div>
<div className="absolute w-full h-full overflow-hidden z-0 animate-fade-left animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards">
<img
src="gallery_girl.png"
className="float-right object-cover h-screen w-3/6 opacity-50 overflow-hidden"
alt="Background"
/> />
<nav className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-4 justify-items-center">
{tags.map((tag, index) => (
<a
key={index}
className={`w-full rounded-lg no-underline text-white py-3 px-4 font-medium text-center ${
selectedTags.includes(tag.name) ? 'bg-neroshi-blue-950 hover:bg-neroshi-blue-900' : 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700'
}`}
href="#"
onClick={() => handleTagClick(tag.name)}
>
{tag.name}
</a>
))}
</nav>
</div> </div>
</section>
<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-1 md:grid-cols-2 lg:grid-cols-3 gap-y-60 gap-x-5 h-full mx-auto">
<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) => (
{galleries && galleries.map((gallery, index) => ( <div className="mx-auto">
<GalleryThumbnail <GalleryThumbnail
key={gallery.name} key={gallery.name}
id={gallery.name} id={gallery.name}
title={gallery.name} title={gallery.name}
tags = {gallery.tags} tags={gallery.tags}
columns={gallery.columns} columns={gallery.columns}
subscription={gallery.tier as string} subscription={gallery.tier as string}
onSelect={selectGallery} onSelect={selectGallery}
nsfw={gallery.nsfw} nsfw={gallery.nsfw}
></GalleryThumbnail> ></GalleryThumbnail>
))} </div>
<div className="pt-10"></div> ))}
<div className="pt-10"></div> </div>
</div> {isOpen ? (
</div> <>
</>
</div>
{isOpen ? (
<>
<div
className={`fixed inset-0 transition-opacity z-30 ${
isOpen ? "animate-in" : "fade-out"
}`}
aria-hidden="true"
>
<div <div
className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30" className={`fixed inset-0 transition-opacity z-30 ${
onClick={() => setIsOpen(false)} isOpen ? "animate-in" : "fade-out"
></div> }`}
<div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30"> aria-hidden="true"
<Gallery >
id={selectedGallery as string} <div
columns={galleryColumns} className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30"
closeMenu={() => closeGallery()} onClick={() => setIsOpen(false)}
></Gallery> ></div>
<div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30">
<Gallery
id={selectedGallery as string}
columns={galleryColumns}
closeMenu={() => closeGallery()}
></Gallery>
</div>
</div> </div>
</div> </>
</> ) : null}
) : null} </div>
</div>
); );
} }

4
app/layout.tsx
View File

@ -20,10 +20,10 @@ export default function RootLayout({
return ( return (
<html lang="en" className={GeistSans.className}> <html lang="en" className={GeistSans.className}>
<body className="bg-background text-foreground"> <body className="bg-background text-foreground">
<div className="w-full absolute z-30"> <div className="w-full fixed z-30">
<NavigationBar/> <NavigationBar/>
</div> </div>
<main className="min-h-screen flex flex-col items-center bg-gradient-to-r from-neroshi-blue-900 to-neroshi-blue-950"> <main className="min-h-screen flex flex-col items-center bg-gradient-to-r from-neroshi-blue-900 to-neroshi-blue-950 overflow-hidden">
{children} {children}
</main> </main>
</body> </body>

4
components/ui/gallery_thumbnail.tsx
View File

@ -40,7 +40,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title,nsfw, subscription, tag
return ( return (
<div className="py-3 sm:max-w-xl sm:mx-auto flex-3 animate-in"> <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-95 shadow-lg bg-gray-400 rounded-3xl"> <div className="h-48 overflow-visible w-full relative hover:scale-95 rounded-3xl">
{!isLoading && ( {!isLoading && (
<> <>
<img <img
@ -51,7 +51,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title,nsfw, subscription, tag
key={galleryId} key={galleryId}
style={{ width: '20rem', height: '20rem', objectFit: 'cover' }} style={{ width: '20rem', height: '20rem', objectFit: 'cover' }}
/> />
<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="bottom-0 left-0 w-full h-10% p-2 rounded-md flex flex-col justify-end">
<div className="text-white flex justify-between"> <div className="text-white flex justify-between">
<div> <div>
<div className="flex"> <div className="flex">