mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +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) => (
|
{ 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
|
<img
|
||||||
src={theme.marqueeImage}
|
src={theme.marqueeImage}
|
||||||
alt="Theme Preview"
|
alt="Theme Preview"
|
||||||
@@ -185,83 +185,85 @@ const Store = () => {
|
|||||||
</Swiper>
|
</Swiper>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<AnimatePresence>
|
<div className={displayTheme ? 'pointer-events-auto' : 'pointer-events-none'}>
|
||||||
{displayTheme && (
|
<AnimatePresence>
|
||||||
<motion.div
|
{displayTheme && (
|
||||||
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)}
|
|
||||||
>
|
|
||||||
<motion.div
|
<motion.div
|
||||||
onClick={(e) => e.stopPropagation()}
|
className={`fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70`}
|
||||||
className="w-full max-w-xl h-[95%] p-8 pt-5 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll"
|
initial={{ opacity: 0 }}
|
||||||
exit={{ y: "100vh" }}
|
animate={{ opacity: 1 }}
|
||||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
exit={{ opacity: 0 }}
|
||||||
variants={containerVariants}
|
onClick={() => setDisplayTheme(null)}
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
>
|
>
|
||||||
<motion.div className="relative h-auto">
|
<motion.div
|
||||||
<motion.button
|
onClick={(e) => e.stopPropagation()}
|
||||||
className="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200"
|
className="w-full max-w-xl h-[95%] p-8 pt-5 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll"
|
||||||
onClick={() => setDisplayTheme(null)}
|
exit={{ y: "100vh" }}
|
||||||
variants={textVariants}
|
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||||
>
|
variants={containerVariants}
|
||||||
{'\ued8a'}
|
initial="hidden"
|
||||||
</motion.button>
|
animate="visible"
|
||||||
<motion.h2 className="mb-4 text-2xl font-bold" variants={textVariants}>
|
>
|
||||||
{displayTheme.name}
|
<motion.div className="relative h-auto">
|
||||||
</motion.h2>
|
<motion.button
|
||||||
<motion.img src={displayTheme.coverImage} alt="Theme Cover" className="object-cover w-full h-48 mb-4 rounded-md" variants={textVariants} />
|
className="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200"
|
||||||
<motion.p className="mb-4 text-gray-700 dark:text-gray-300" variants={textVariants}>
|
onClick={() => setDisplayTheme(null)}
|
||||||
{displayTheme.description}
|
variants={textVariants}
|
||||||
</motion.p>
|
>
|
||||||
<motion.button
|
{'\ued8a'}
|
||||||
onClick={() => downloadTheme(displayTheme.id)}
|
</motion.button>
|
||||||
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"
|
<motion.h2 className="mb-4 text-2xl font-bold" variants={textVariants}>
|
||||||
variants={textVariants}
|
{displayTheme.name}
|
||||||
>
|
</motion.h2>
|
||||||
{ installingThemes.includes(displayTheme.id) ?
|
<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}>
|
||||||
<SpinnerIcon className="w-4 h-4 mr-2" />
|
{displayTheme.description}
|
||||||
Installing...
|
</motion.p>
|
||||||
</> :
|
<motion.button
|
||||||
<> Install </>
|
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"
|
||||||
</motion.button>
|
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}>
|
<motion.h3 className="mb-4 text-lg font-bold" variants={textVariants}>
|
||||||
More Themes
|
More Themes
|
||||||
</motion.h3>
|
</motion.h3>
|
||||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
{gridThemes.filter(theme => theme.id !== displayTheme.id).map((theme, index) => (
|
{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}>
|
<motion.div key={index} onClick={() => { setDisplayTheme(null); setDisplayTheme(theme); }} className='w-full cursor-pointer' variants={textVariants}>
|
||||||
<div
|
<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"
|
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'>
|
<div className='absolute bottom-0 left-0 z-10 p-2'>
|
||||||
<h6 className="text-xl font-bold text-neutral-600 dark:text-white">
|
<h6 className="text-xl font-bold text-neutral-600 dark:text-white">
|
||||||
{theme.name}
|
{theme.name}
|
||||||
</h6>
|
</h6>
|
||||||
<p className="max-w-sm text-sm text-neutral-500 dark:text-neutral-200">
|
<p className="max-w-sm text-sm text-neutral-500 dark:text-neutral-200">
|
||||||
{theme.description}
|
{theme.description}
|
||||||
</p>
|
</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>
|
||||||
<div className='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent' />
|
</motion.div>
|
||||||
<img src={theme.coverImage} alt="Theme Preview" className="object-cover w-full h-48" />
|
))}
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
)}
|
||||||
)}
|
</AnimatePresence>
|
||||||
</AnimatePresence>
|
</div>
|
||||||
|
|
||||||
{/* pagination */}
|
{/* pagination */}
|
||||||
<div className='absolute z-10 flex gap-2 bottom-2 right-2'>
|
<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">
|
<div className="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
|
||||||
{filteredThemes.map((theme, index) => (
|
{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 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>
|
<div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user