mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-05 19:24:39 +00:00
fix: store popup briefly holding window control
This commit is contained in:
SethBurkart123
@@ -167,7 +167,7 @@ const Store = () => {
|
||||
}}
|
||||
>
|
||||
{ coverThemes.map((theme, index) => (
|
||||
<SwiperSlide className='relative rounded-xl overflow-clip' onClick={() => setDisplayTheme(theme)} key={index}>
|
||||
<SwiperSlide className='relative cursor-pointer rounded-xl overflow-clip' onClick={() => setDisplayTheme(theme)} key={index}>
|
||||
<img
|
||||
src={theme.marqueeImage}
|
||||
alt="Theme Preview"
|
||||
@@ -185,83 +185,85 @@ const Store = () => {
|
||||
</Swiper>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence>
|
||||
{displayTheme && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70"
|
||||
initial={{ opacity: 0, pointerEvents: 'none' }}
|
||||
animate={{ opacity: 1, pointerEvents: 'auto' }}
|
||||
exit={{ opacity: 0, pointerEvents: 'none' }}
|
||||
onClick={() => setDisplayTheme(null)}
|
||||
>
|
||||
<div className={displayTheme ? 'pointer-events-auto' : 'pointer-events-none'}>
|
||||
<AnimatePresence>
|
||||
{displayTheme && (
|
||||
<motion.div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-full max-w-xl h-[95%] p-8 pt-5 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll"
|
||||
exit={{ y: "100vh" }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className={`fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setDisplayTheme(null)}
|
||||
>
|
||||
<motion.div className="relative h-auto">
|
||||
<motion.button
|
||||
className="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200"
|
||||
onClick={() => setDisplayTheme(null)}
|
||||
variants={textVariants}
|
||||
>
|
||||
{'\ued8a'}
|
||||
</motion.button>
|
||||
<motion.h2 className="mb-4 text-2xl font-bold" variants={textVariants}>
|
||||
{displayTheme.name}
|
||||
</motion.h2>
|
||||
<motion.img src={displayTheme.coverImage} alt="Theme Cover" className="object-cover w-full h-48 mb-4 rounded-md" variants={textVariants} />
|
||||
<motion.p className="mb-4 text-gray-700 dark:text-gray-300" variants={textVariants}>
|
||||
{displayTheme.description}
|
||||
</motion.p>
|
||||
<motion.button
|
||||
onClick={() => downloadTheme(displayTheme.id)}
|
||||
className="flex px-4 py-2 mt-4 ml-auto rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2"
|
||||
variants={textVariants}
|
||||
>
|
||||
{ installingThemes.includes(displayTheme.id) ?
|
||||
<>
|
||||
<SpinnerIcon className="w-4 h-4 mr-2" />
|
||||
Installing...
|
||||
</> :
|
||||
<> Install </>
|
||||
}
|
||||
</motion.button>
|
||||
<motion.div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="w-full max-w-xl h-[95%] p-8 pt-5 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll"
|
||||
exit={{ y: "100vh" }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<motion.div className="relative h-auto">
|
||||
<motion.button
|
||||
className="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200"
|
||||
onClick={() => setDisplayTheme(null)}
|
||||
variants={textVariants}
|
||||
>
|
||||
{'\ued8a'}
|
||||
</motion.button>
|
||||
<motion.h2 className="mb-4 text-2xl font-bold" variants={textVariants}>
|
||||
{displayTheme.name}
|
||||
</motion.h2>
|
||||
<motion.img src={displayTheme.coverImage} alt="Theme Cover" className="object-cover w-full h-48 mb-4 rounded-md" variants={textVariants} />
|
||||
<motion.p className="mb-4 text-gray-700 dark:text-gray-300" variants={textVariants}>
|
||||
{displayTheme.description}
|
||||
</motion.p>
|
||||
<motion.button
|
||||
onClick={() => downloadTheme(displayTheme.id)}
|
||||
className="flex px-4 py-2 mt-4 ml-auto rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2"
|
||||
variants={textVariants}
|
||||
>
|
||||
{ installingThemes.includes(displayTheme.id) ?
|
||||
<>
|
||||
<SpinnerIcon className="w-4 h-4 mr-2" />
|
||||
Installing...
|
||||
</> :
|
||||
<> Install </>
|
||||
}
|
||||
</motion.button>
|
||||
|
||||
<motion.div className="my-8 border-b border-zinc-200 dark:border-zinc-700" variants={textVariants} />
|
||||
<motion.div className="my-8 border-b border-zinc-200 dark:border-zinc-700" variants={textVariants} />
|
||||
|
||||
<motion.h3 className="mb-4 text-lg font-bold" variants={textVariants}>
|
||||
More Themes
|
||||
</motion.h3>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{gridThemes.filter(theme => theme.id !== displayTheme.id).map((theme, index) => (
|
||||
<motion.div key={index} onClick={() => { setDisplayTheme(null); setDisplayTheme(theme); }} className='w-full cursor-pointer' variants={textVariants}>
|
||||
<div
|
||||
className="w-full overflow-clip rounded-xl transition-all duration-300 relative group/card flex flex-col hover:shadow-xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] h-auto"
|
||||
>
|
||||
<div className='absolute bottom-0 left-0 z-10 p-2'>
|
||||
<h6 className="text-xl font-bold text-neutral-600 dark:text-white">
|
||||
{theme.name}
|
||||
</h6>
|
||||
<p className="max-w-sm text-sm text-neutral-500 dark:text-neutral-200">
|
||||
{theme.description}
|
||||
</p>
|
||||
<motion.h3 className="mb-4 text-lg font-bold" variants={textVariants}>
|
||||
More Themes
|
||||
</motion.h3>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{gridThemes.filter(theme => theme.id !== displayTheme.id).map((theme, index) => (
|
||||
<motion.div key={index} onClick={() => { setDisplayTheme(null); setDisplayTheme(theme); }} className='w-full cursor-pointer' variants={textVariants}>
|
||||
<div
|
||||
className="w-full overflow-clip rounded-xl transition-all duration-300 relative group/card flex flex-col hover:shadow-xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] h-auto"
|
||||
>
|
||||
<div className='absolute bottom-0 left-0 z-10 p-2'>
|
||||
<h6 className="text-xl font-bold text-neutral-600 dark:text-white">
|
||||
{theme.name}
|
||||
</h6>
|
||||
<p className="max-w-sm text-sm text-neutral-500 dark:text-neutral-200">
|
||||
{theme.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent' />
|
||||
<img src={theme.coverImage} alt="Theme Preview" className="object-cover w-full h-48" />
|
||||
</div>
|
||||
<div className='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent' />
|
||||
<img src={theme.coverImage} alt="Theme Preview" className="object-cover w-full h-48" />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* pagination */}
|
||||
<div className='absolute z-10 flex gap-2 bottom-2 right-2'>
|
||||
@@ -283,7 +285,7 @@ const Store = () => {
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredThemes.map((theme, index) => (
|
||||
<div key={index} className='w-full cursor-pointer'>
|
||||
<div onClick={() => setDisplayTheme(theme)} key={index} className='w-full cursor-pointer'>
|
||||
<div className="bg-gray-50 w-full transition-all duration-300 relative group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl p-6 border">
|
||||
<div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user