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: animate the search bar coming out

Browse Source
This commit is contained in:
Damien Ostler 2024-05-27 20:10:03 -04:00
parent c0a382e4a7
commit 5e5678c280
2 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/gallery/page.tsx
View File

@ -89,11 +89,15 @@ function PageComponent() {
<section className="flex items-center w-full p-8 pt-20 opacity-90 animate-in"> <section className="flex items-center w-full p-8 pt-20 opacity-90 animate-in">
{(tags.length>0) ? ( {(tags.length>0) ? (
<div className="container mx-auto py-8"> <div className="container mx-auto py-8">
<input <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" 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 by title..." placeholder="Search by title..."
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
style={{
animation: 'expandFromLeft 2s ease-out forwards'
}}
/> />
{(tags.length>0) ? ( {(tags.length>0) ? (
<nav className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-4 justify-items-center"> <nav className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-4 justify-items-center">
@ -140,7 +144,7 @@ function PageComponent() {
<> <>
<div <div
className={`fixed inset-0 transition-opacity z-30 ${ className={`fixed inset-0 transition-opacity z-30 ${
isOpen ? "animate-in" : "fade-out" isOpen ? 'animate-in' : 'fade-out'
}`} }`}
aria-hidden="true" aria-hidden="true"
> >

9
app/globals.css
View File

@ -3,6 +3,15 @@
@tailwind utilities; @tailwind utilities;
@keyframes expandFromLeft {
0% {
width: 0;
}
100% {
width: 100%;
}
}
/* Hide scrollbar for Chrome, Safari and Opera */ /* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar { .no-scrollbar::-webkit-scrollbar {
display: none; display: none;