mirror of
https://github.com/D4M13N-D3V/neroshitron.git
synced 2025-03-14 10:05:04 +00:00
fix:gallery page resizing
This commit is contained in:
parent
cb37b333b0
commit
82399d1bc3
@ -78,88 +78,77 @@ function PageComponent() {
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<div className="w-full h-full flex justify-center ">
|
||||
<div className="flex-1 w-full h-full flex flex-col gap-20">
|
||||
<>
|
||||
<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">
|
||||
<section className="neroshi-blue-900 h-50 p-8 pt-20 opacity-30 hover:opacity-100">
|
||||
<div className="container mx-auto py-8">
|
||||
<input
|
||||
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"
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
<nav className="grid grid-cols-4 gap-4">
|
||||
{tags.map((tag, index) => (
|
||||
<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"
|
||||
<div>
|
||||
{/* <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">
|
||||
<img
|
||||
src="gallery_girl.png"
|
||||
className="float-right object-cover h-screen w-6/6 md:w-5/6 lg:w-3/6 opacity-50 overflow-hidden"
|
||||
alt="Background"
|
||||
/>
|
||||
</div> */}
|
||||
<section className="neroshi-blue-900 flex items-center w-full p-8 pt-20 opacity-90">
|
||||
<div className="container mx-auto py-8">
|
||||
<input
|
||||
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"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
<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 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-52 gap-x-5 h-full overflow-y-auto no-scrollbar pt-20">
|
||||
{galleries && galleries.map((gallery, index) => (
|
||||
</section>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-60 gap-x-5 h-full mx-auto">
|
||||
{galleries && galleries.map((gallery, index) => (
|
||||
<div className="mx-auto">
|
||||
<GalleryThumbnail
|
||||
key={gallery.name}
|
||||
id={gallery.name}
|
||||
title={gallery.name}
|
||||
tags = {gallery.tags}
|
||||
tags={gallery.tags}
|
||||
columns={gallery.columns}
|
||||
subscription={gallery.tier as string}
|
||||
onSelect={selectGallery}
|
||||
nsfw={gallery.nsfw}
|
||||
></GalleryThumbnail>
|
||||
))}
|
||||
<div className="pt-10"></div>
|
||||
<div className="pt-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
{isOpen ? (
|
||||
<>
|
||||
<div
|
||||
className={`fixed inset-0 transition-opacity z-30 ${
|
||||
isOpen ? "animate-in" : "fade-out"
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{isOpen ? (
|
||||
<>
|
||||
<div
|
||||
className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30"
|
||||
onClick={() => setIsOpen(false)}
|
||||
></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>
|
||||
className={`fixed inset-0 transition-opacity z-30 ${
|
||||
isOpen ? "animate-in" : "fade-out"
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30"
|
||||
onClick={() => setIsOpen(false)}
|
||||
></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>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -20,10 +20,10 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en" className={GeistSans.className}>
|
||||
<body className="bg-background text-foreground">
|
||||
<div className="w-full absolute z-30">
|
||||
<div className="w-full fixed z-30">
|
||||
<NavigationBar/>
|
||||
</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}
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@ -40,7 +40,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title,nsfw, subscription, tag
|
||||
|
||||
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-95 shadow-lg bg-gray-400 rounded-3xl">
|
||||
<div className="h-48 overflow-visible w-full relative hover:scale-95 rounded-3xl">
|
||||
{!isLoading && (
|
||||
<>
|
||||
<img
|
||||
@ -51,7 +51,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title,nsfw, subscription, tag
|
||||
key={galleryId}
|
||||
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>
|
||||
<div className="flex">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user