Mobile improvements and packages updates
This commit is contained in:
@@ -11,7 +11,7 @@ function DebouncedBookmarkItem({
|
||||
bookmarkItem,
|
||||
setIsOpen,
|
||||
}: { bookmarkItem: Bookmark; setIsOpen: (isOpen: boolean) => void }) {
|
||||
const { handleDelete } = useCommonHooks();
|
||||
const { handleDelete, isMobile } = useCommonHooks();
|
||||
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
|
||||
@@ -35,7 +35,11 @@ function DebouncedBookmarkItem({
|
||||
}, [update]);
|
||||
|
||||
return (
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Card
|
||||
p={isMobile ? 'xl' : undefined}
|
||||
className={cardClasses.settingsItem}
|
||||
classNames={cardClasses}
|
||||
>
|
||||
<DeleteItemModal
|
||||
modalOpened={modalOpened}
|
||||
handleClose={handleClose}
|
||||
@@ -68,6 +72,7 @@ function DebouncedBookmarkItem({
|
||||
<ActionIcon
|
||||
pos={'absolute'}
|
||||
right={16}
|
||||
top={16}
|
||||
color='red'
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
@@ -77,7 +82,7 @@ function DebouncedBookmarkItem({
|
||||
<FiTrash color='black' />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
|
||||
<TextInput
|
||||
label={'Name'}
|
||||
className={textInputClasses.settingsItem}
|
||||
@@ -105,11 +110,11 @@ function DebouncedBookmarkItem({
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
|
||||
<TextInput
|
||||
label={'URL'}
|
||||
className={textInputClasses.settingsItem}
|
||||
w={'100%'}
|
||||
w={isMobile ? '80%' : '100%'}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={bookmark.url}
|
||||
|
||||
@@ -193,7 +193,7 @@ function DebouncedGroupSettingsItem({
|
||||
borderRadius: '100%',
|
||||
backgroundColor: 'var(--mantine-color-accent-0)',
|
||||
position: 'absolute',
|
||||
top: isMobile ? 164 : 78,
|
||||
top: isMobile ? 140 : 78,
|
||||
right: 18,
|
||||
zIndex: 10,
|
||||
fontSize: 20,
|
||||
@@ -226,8 +226,11 @@ function DebouncedGroupSettingsItem({
|
||||
<Popover
|
||||
withArrow
|
||||
withOverlay
|
||||
trapFocus
|
||||
closeOnClickOutside={!isOpen}
|
||||
classNames={popoverClasses}
|
||||
middlewares={{ shift: { padding: 20 } }}
|
||||
position='bottom'
|
||||
>
|
||||
<Popover.Target>
|
||||
<Box pos={'relative'}>
|
||||
@@ -252,7 +255,7 @@ function DebouncedGroupSettingsItem({
|
||||
<BookmarkSettingsItem bookmark={bookmark} />
|
||||
</Box>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
|
||||
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
|
||||
<DebouncedBookmarkItem
|
||||
bookmarkItem={bookmark}
|
||||
setIsOpen={setIsOpen}
|
||||
@@ -279,7 +282,8 @@ function DebouncedGroupSettingsItem({
|
||||
<Popover
|
||||
withArrow
|
||||
withOverlay
|
||||
position='top'
|
||||
trapFocus
|
||||
position='bottom'
|
||||
opened={popoverOpened}
|
||||
onChange={setPopoverOpened}
|
||||
closeOnEscape
|
||||
@@ -301,7 +305,7 @@ function DebouncedGroupSettingsItem({
|
||||
<FiPlus /> Bookmark
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
|
||||
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Stack w={'100%'} display={'flex'} pos={'relative'}>
|
||||
<Group w={'100%'} justify='center'>
|
||||
|
||||
Reference in New Issue
Block a user