Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

🐛 Fixed theme demo when multiple themes with variants (#18558)

Browse source 
no refs

When multiple themes had variants, the theme demo functionality was not
working correctly and triggering the demo for all themes at once
This commit is contained in:
Michael Barrett 2023-10-10 14:37:28 +01:00 • committed by GitHub
parent 811f8d461c
commit cfa5caaec5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
apps/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx
View file

@ -60,6 +60,7 @@ const OfficialThemes: React.FC<{
{officialThemes.map((theme) => { {officialThemes.map((theme) => {
const showVariants = hasVariants(theme); const showVariants = hasVariants(theme);
const variants = getAllVariants(theme); const variants = getAllVariants(theme);
const isVariantLooping = variantLoopTheme === theme;
return ( return (
<button key={theme.name} className='flex cursor-pointer flex-col gap-3 text-left' type='button' onClick={() => { <button key={theme.name} className='flex cursor-pointer flex-col gap-3 text-left' type='button' onClick={() => {
@ -72,9 +73,8 @@ const OfficialThemes: React.FC<{
<img <img
key={`theme-variant-${variant.category.toLowerCase()}`} key={`theme-variant-${variant.category.toLowerCase()}`}
alt={`${theme.name} Theme - ${variant.category}`} alt={`${theme.name} Theme - ${variant.category}`}
className={clsx('h-full w-full object-contain transition-opacity duration-500', { className={clsx('h-full w-full object-contain opacity-0 transition-opacity duration-500', {
'opacity-100': idx === visibleVariantIdx, 'opacity-100': idx === visibleVariantIdx && isVariantLooping || !isVariantLooping && idx === 0,
'opacity-0': idx !== visibleVariantIdx,
relative: idx === visibleVariantIdx, relative: idx === visibleVariantIdx,
absolute: idx !== visibleVariantIdx, absolute: idx !== visibleVariantIdx,
'left-0': idx !== visibleVariantIdx, 'left-0': idx !== visibleVariantIdx,
@ -95,9 +95,8 @@ const OfficialThemes: React.FC<{
<Heading level={4}>{theme.name}</Heading> <Heading level={4}>{theme.name}</Heading>
{showVariants ? {showVariants ?
variants.map((variant, idx) => ( variants.map((variant, idx) => (
<span className={clsx('absolute left-0 translate-y-px text-sm text-grey-700', { <span className={clsx('absolute left-0 translate-y-px text-sm text-grey-700 opacity-0', {
'opacity-100': idx === visibleVariantIdx, 'opacity-100': idx === visibleVariantIdx && isVariantLooping || !isVariantLooping && idx === 0
'opacity-0': idx !== visibleVariantIdx
})}>{variant.category}</span> })}>{variant.category}</span>
)) : )) :
<span className='text-sm text-grey-700'>{theme.category}</span> <span className='text-sm text-grey-700'>{theme.category}</span>