TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-27 21:03:29 +03:00
Code Issues Projects Releases Wiki 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) => {
const showVariants = hasVariants(theme);
const variants = getAllVariants(theme);
const isVariantLooping = variantLoopTheme === theme;
return (
<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
key={`theme-variant-${variant.category.toLowerCase()}`}
alt={`${theme.name} Theme - ${variant.category}`}
className={clsx('h-full w-full object-contain transition-opacity duration-500', {
'opacity-100': idx === visibleVariantIdx,
'opacity-0': idx !== visibleVariantIdx,
className={clsx('h-full w-full object-contain opacity-0 transition-opacity duration-500', {
'opacity-100': idx === visibleVariantIdx && isVariantLooping || !isVariantLooping && idx === 0,
relative: idx === visibleVariantIdx,
absolute: idx !== visibleVariantIdx,
'left-0': idx !== visibleVariantIdx,
@ -95,9 +95,8 @@ const OfficialThemes: React.FC<{
<Heading level={4}>{theme.name}</Heading>
{showVariants ?
variants.map((variant, idx) => (
<span className={clsx('absolute left-0 translate-y-px text-sm text-grey-700', {
'opacity-100': idx === visibleVariantIdx,
'opacity-0': idx !== visibleVariantIdx
<span className={clsx('absolute left-0 translate-y-px text-sm text-grey-700 opacity-0', {
'opacity-100': idx === visibleVariantIdx && isVariantLooping || !isVariantLooping && idx === 0
})}>{variant.category}</span>
)) :
<span className='text-sm text-grey-700'>{theme.category}</span>