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

Refined official theme list in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3432
This commit is contained in:
Peter Zimon 2023-06-14 08:03:53 +02:00
parent a74b60a025
commit d2c78b0129
3 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/admin-x-settings/src/components/settings/site/ThemeModal.tsx
View file

@ -44,8 +44,8 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
const installedTheme = themes.find(theme => theme.name.toLowerCase() === selectedTheme.name.toLowerCase()); const installedTheme = themes.find(theme => theme.name.toLowerCase() === selectedTheme.name.toLowerCase());
return ( return (
<div className='sticky top-0 flex justify-between gap-3 bg-white p-5 px-7'> <div className='sticky top-0 flex justify-between gap-3 bg-grey-50 p-5 px-7'>
<div className='flex w-[33%] items-center gap-2'> <div className='flex items-center gap-2'>
<button <button
className={`text-sm`} className={`text-sm`}
type="button" type="button"
@ -58,7 +58,7 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
&rarr; &rarr;
<span className='text-sm font-bold'>{selectedTheme?.name}</span> <span className='text-sm font-bold'>{selectedTheme?.name}</span>
</div> </div>
<div className='flex w-[33%] justify-end gap-8'> <div className='flex justify-end gap-8'>
<ButtonGroup <ButtonGroup
buttons={[ buttons={[
{icon: 'laptop', link: true, size: 'sm'}, {icon: 'laptop', link: true, size: 'sm'},

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

@ -132,21 +132,24 @@ const OfficialThemes: React.FC<{
return ( return (
<div className='p-[8vmin] pt-5'> <div className='p-[8vmin] pt-5'>
<Heading>Themes</Heading> <Heading>Themes</Heading>
<div className='mt-6 grid grid-cols-3 gap-4'> <div className='mt-[6vmin] grid grid-cols-1 gap-[6vmin] sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
{officialThemes.map((theme) => { {officialThemes.map((theme) => {
return ( return (
<div key={theme.name} className='flex cursor-pointer flex-col gap-3' onClick={() => { <div key={theme.name} className='flex cursor-pointer flex-col gap-3' onClick={() => {
onSelectTheme?.(theme); onSelectTheme?.(theme);
}}> }}>
{/* <img alt={theme.name} src={`${assetRoot}/${theme.image}`}/> */} {/* <img alt={theme.name} src={`${assetRoot}/${theme.image}`}/> */}
<div className='h-[420px] w-full bg-grey-100'> <div className='h-[420px] w-full bg-grey-100 shadow-md transition-all duration-500 hover:scale-[1.05]'>
<img <img
alt="Headline Theme" alt="Headline Theme"
className='h-full w-full object-contain' className='w-full object-contain'
src={`${assetRoot}/${theme.image}`} src={`${assetRoot}/${theme.image}`}
/> />
</div> </div>
<span>{theme.name}</span> <div className='mt-3'>
<Heading level={4}>{theme.name}</Heading>
<span className='text-sm text-grey-700'>{theme.category}</span>
</div>
</div> </div>
); );
})} })}

3
ghost/admin-x-settings/tailwind.config.cjs
View file

@ -216,9 +216,6 @@ module.exports = {
tight: '1.35em', tight: '1.35em',
tighter: '1.25em', tighter: '1.25em',
supertight: '1.1em' supertight: '1.1em'
},
transition: {
basic: 'all 0.4s ease'
} }
} }
} }