Mobile improvements and packages updates

This commit is contained in:
Sean Edmunds
2025-06-06 14:07:58 -05:00
parent 44fc088b2a
commit a148335284
20 changed files with 391 additions and 240 deletions

View File

@@ -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}

View File

@@ -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'>