rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fixed issue where popover menus would open with incorrect positioning on desktop

Browse Source
This commit is contained in:
Mo
2022-12-05 17:34:41 -06:00
parent ccde207de8
commit a66bb08c3b
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/web/src/javascripts/Hooks/useMediaQuery.tsx
View File

@@ -2,14 +2,23 @@ import { useEffect, useState } from 'react'
// Follows https://tailwindcss.com/docs/responsive-design // Follows https://tailwindcss.com/docs/responsive-design
export const MediaQueryBreakpoints = { export const MediaQueryBreakpoints = {
sm: '(min-width: 0px) and (max-width: 767px)', sm: '(max-width: 767px)',
md: '(min-width: 768px) and (max-width: 1024px)', md: '(min-width: 768px)',
lg: '(min-width: 1024px)', lg: '(min-width: 1024px)',
xl: '(min-width: 1280px)', xl: '(min-width: 1280px)',
'2xl': '(min-width: 1536px)', '2xl': '(min-width: 1536px)',
pointerFine: '(pointer: fine)', pointerFine: '(pointer: fine)',
} as const } as const
export const MutuallyExclusiveMediaQueryBreakpoints = {
sm: '(min-width: 0px) and (max-width: 767px)',
md: '(min-width: 768px) and (max-width: 1023px)',
lg: '(min-width: 1024px) and (max-width: 1279px)',
xl: '(min-width: 1280px) and (max-width: 1536px)',
'2xl': '(min-width: 1536px)',
pointerFine: '(pointer: fine)',
} as const
export const useMediaQuery = (mediaQuery: string) => { export const useMediaQuery = (mediaQuery: string) => {
const [matches, setMatches] = useState(() => window.matchMedia(mediaQuery).matches) const [matches, setMatches] = useState(() => window.matchMedia(mediaQuery).matches)

9
packages/web/src/javascripts/Utils/Utils.ts
View File

@@ -1,7 +1,7 @@
import { DeviceInterface, MobileDeviceInterface, Platform, platformFromString } from '@standardnotes/snjs' import { DeviceInterface, MobileDeviceInterface, Platform, platformFromString } from '@standardnotes/snjs'
import { IsDesktopPlatform, IsWebPlatform } from '@/Constants/Version' import { IsDesktopPlatform, IsWebPlatform } from '@/Constants/Version'
import { EMAIL_REGEX } from '../Constants/Constants' import { EMAIL_REGEX } from '../Constants/Constants'
import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery' import { MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
declare const process: { declare const process: {
env: { env: {
@@ -206,12 +206,9 @@ export const disableIosTextFieldZoom = () => {
} }
} }
export const isMobileScreen = () => window.matchMedia(MediaQueryBreakpoints.sm).matches export const isMobileScreen = () => window.matchMedia(MutuallyExclusiveMediaQueryBreakpoints.sm).matches
export const isTabletScreen = () => export const isTabletScreen = () => window.matchMedia(MutuallyExclusiveMediaQueryBreakpoints.md).matches
!isMobileScreen() &&
window.matchMedia(MediaQueryBreakpoints.md).matches &&
!window.matchMedia(MediaQueryBreakpoints.lg).matches
export const isTabletOrMobileScreen = () => isMobileScreen() || isTabletScreen() export const isTabletOrMobileScreen = () => isMobileScreen() || isTabletScreen()