fix help icon size on mobile (#873)
* fix help icon size on mobile * Fix menu closing on mobile * Fix position of help button * Remove variants * Update HelpPanel.tsx Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
parent
2567cedcd2
commit
6a67ad758f
2 changed files with 47 additions and 49 deletions
|
@ -28,8 +28,6 @@ export function usePreventNavigationCss(rCanvas: React.RefObject<HTMLDivElement>
|
|||
|
||||
if (!elm) return () => void null
|
||||
|
||||
elm.addEventListener('touchstart', preventGestureNavigation)
|
||||
|
||||
// @ts-ignore
|
||||
elm.addEventListener('gestureend', preventGestureNavigation)
|
||||
|
||||
|
@ -44,7 +42,6 @@ export function usePreventNavigationCss(rCanvas: React.RefObject<HTMLDivElement>
|
|||
|
||||
return () => {
|
||||
if (elm) {
|
||||
elm.removeEventListener('touchstart', preventGestureNavigation)
|
||||
// @ts-ignore
|
||||
elm.removeEventListener('gestureend', preventGestureNavigation)
|
||||
// @ts-ignore
|
||||
|
|
|
@ -32,9 +32,9 @@ export function HelpPanel() {
|
|||
|
||||
return (
|
||||
<Popover.Root>
|
||||
<PopoverAnchor dir="ltr" debug={isDebugMode}>
|
||||
<PopoverAnchor dir="ltr" debug={isDebugMode} side={side} bp={breakpoints}>
|
||||
<Popover.Trigger dir="ltr" asChild>
|
||||
<HelpButton side={side} debug={isDebugMode} bp={breakpoints}>
|
||||
<HelpButton debug={isDebugMode}>
|
||||
<QuestionMarkIcon />
|
||||
</HelpButton>
|
||||
</Popover.Trigger>
|
||||
|
@ -93,13 +93,11 @@ const Links = () => {
|
|||
}
|
||||
|
||||
const HelpButton = styled('button', {
|
||||
width: 28,
|
||||
height: 28,
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '100%',
|
||||
position: 'absolute',
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
display: 'flex',
|
||||
padding: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
outline: 'none',
|
||||
|
@ -108,40 +106,10 @@ const HelpButton = styled('button', {
|
|||
boxShadow: '$panel',
|
||||
border: '1px solid $panelContrast',
|
||||
color: '$text',
|
||||
variants: {
|
||||
debug: {
|
||||
true: {},
|
||||
false: {},
|
||||
},
|
||||
bp: {
|
||||
mobile: {},
|
||||
small: {},
|
||||
medium: {},
|
||||
large: {},
|
||||
},
|
||||
side: {
|
||||
top: {},
|
||||
left: {},
|
||||
right: {},
|
||||
bottom: {},
|
||||
},
|
||||
'& svg': {
|
||||
height: 12,
|
||||
width: 12,
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
bp: 'mobile',
|
||||
side: 'bottom',
|
||||
css: {
|
||||
bottom: 70,
|
||||
},
|
||||
},
|
||||
{
|
||||
bp: 'small',
|
||||
side: 'bottom',
|
||||
css: {
|
||||
bottom: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export const StyledContent = styled(MenuContent, {
|
||||
|
@ -171,15 +139,48 @@ export const StyledContent = styled(MenuContent, {
|
|||
const PopoverAnchor = styled(Popover.Anchor, {
|
||||
position: 'absolute',
|
||||
zIndex: 999,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: 40,
|
||||
height: 40,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
width: 32,
|
||||
height: 32,
|
||||
variants: {
|
||||
debug: {
|
||||
true: {
|
||||
bottom: 40,
|
||||
true: {},
|
||||
false: {},
|
||||
},
|
||||
bp: {
|
||||
mobile: {
|
||||
bottom: 64,
|
||||
},
|
||||
small: {
|
||||
bottom: 10,
|
||||
},
|
||||
medium: {},
|
||||
large: {},
|
||||
},
|
||||
side: {
|
||||
top: {},
|
||||
left: {},
|
||||
right: {},
|
||||
bottom: {},
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
bp: 'mobile',
|
||||
side: 'bottom',
|
||||
debug: true,
|
||||
css: {
|
||||
bottom: 104,
|
||||
},
|
||||
},
|
||||
{
|
||||
bp: 'small',
|
||||
side: 'bottom',
|
||||
debug: true,
|
||||
css: {
|
||||
bottom: 50,
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue