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

41
app/gallery/page.tsx

@ -78,24 +78,27 @@ 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> */}
<section className="neroshi-blue-900 flex items-center w-full p-8 pt-20 opacity-90">
<div className="container mx-auto py-8"> <div className="container mx-auto py-8">
<input <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" 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" type="search"
placeholder="Search..." placeholder="Search..."
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />
<nav className="grid grid-cols-4 gap-4"> <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) => ( {tags.map((tag, index) => (
<a <a
key={index} key={index}
className={`rounded-lg no-underline text-white py-3 px-4 font-medium text-center ${ 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' selectedTags.includes(tag.name) ? 'bg-neroshi-blue-950 hover:bg-neroshi-blue-900' : 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700'
}`} }`}
href="#" href="#"
@ -107,19 +110,9 @@ function PageComponent() {
</nav> </nav>
</div> </div>
</section> </section>
</div> <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="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="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) => ( {galleries && galleries.map((gallery, index) => (
<div className="mx-auto">
<GalleryThumbnail <GalleryThumbnail
key={gallery.name} key={gallery.name}
id={gallery.name} id={gallery.name}
@ -130,12 +123,8 @@ function PageComponent() {
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>
</>
</div> </div>
{isOpen ? ( {isOpen ? (
<> <>

4
app/layout.tsx

@ -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

@ -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">