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:
Judicael 2022-08-02 17:15:16 +03:00 committed by GitHub
parent 2567cedcd2
commit 6a67ad758f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 49 deletions

View file

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

View file

@ -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,
},
},
],
})