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

Fixed position issues

Browse source 
refs https://github.com/TryGhost/Team/issues/3328
This commit is contained in:
Djordje Vlaisavljevic 2023-06-01 13:43:29 +01:00
parent c929cecb11
commit cc1e567a86
3 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx
View file

@ -5,7 +5,8 @@ import Menu from './Menu';
const meta = { const meta = {
title: 'Global / Menu', title: 'Global / Menu',
component: Menu, component: Menu,
tags: ['autodocs'] tags: ['autodocs'],
decorators: [(_story: any) => (<div style={{maxWidth: '600px', margin: '0 auto'}}>{_story()}</div>)]
} satisfies Meta<typeof Menu>; } satisfies Meta<typeof Menu>;
export default meta; export default meta;
@ -19,6 +20,14 @@ const items = [
export const Default: Story = { export const Default: Story = {
args: { args: {
items items: items,
position: 'right'
}
};
export const Left: Story = {
args: {
items: items,
position: 'left'
} }
}; };

2
ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx
View file

@ -33,7 +33,7 @@ const Menu: React.FC<MenuProps> = ({items, position, className}) => {
return ( return (
/* Menu */ /* Menu */
<div className={className}> <div className={`relative inline-block ${className}`}>
{/* Menu Trigger */} {/* Menu Trigger */}
<div> <div>
<button aria-expanded="true" aria-haspopup="true" className="flex items-center rounded-sm bg-grey-100 px-2 py-1 text-grey-400 hover:text-grey-600" id="menu-button" type="button"> <button aria-expanded="true" aria-haspopup="true" className="flex items-center rounded-sm bg-grey-100 px-2 py-1 text-grey-400 hover:text-grey-600" id="menu-button" type="button">

4
ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
View file

@ -337,7 +337,9 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
{userData.cover_image && ( {userData.cover_image && (
<div className='absolute inset-0 z-0 block bg-gradient-to-tr from-[rgba(0,0,0,0.5)] to-[rgba(0,0,0,0.01)]'></div> <div className='absolute inset-0 z-0 block bg-gradient-to-tr from-[rgba(0,0,0,0.5)] to-[rgba(0,0,0,0.01)]'></div>
)} )}
<Menu className='absolute right-4 top-4' items={items} position='left'></Menu> <div className="absolute right-4 top-4">
<Menu items={items} position='left'></Menu>
</div>
<div className='relative z-10 mt-60 flex gap-4'> <div className='relative z-10 mt-60 flex gap-4'>
<Avatar bgColor={generateAvatarColor((userData.name ? userData.name : userData.email))} className='-ml-1' image={userData.profile_image} label={getInitials(userData.name)} labelColor='white' size='xl' /> <Avatar bgColor={generateAvatarColor((userData.name ? userData.name : userData.email))} className='-ml-1' image={userData.profile_image} label={getInitials(userData.name)} labelColor='white' size='xl' />
<div> <div>