Fix some bugs in tablet mode

This commit is contained in:
Paul Frazee
2023-09-28 13:42:38 -07:00
committed by Samuel Newman
parent 98c7278867
commit 0bbfe966d8
2 changed files with 14 additions and 11 deletions
@@ -1,5 +1,5 @@
import React from 'react'
import {isNative} from 'platform/detection'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
export const withBreakpoints = <P extends object>(
@@ -8,12 +8,12 @@ export const withBreakpoints = <P extends object>(
Desktop: React.ComponentType<P>,
): React.FC<P> =>
function WithBreakpoints(props: P) {
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
const {isMobile, isTablet} = useWebMediaQueries()
if (isMobile || isNative) {
if (isMobile) {
return <Mobile {...props} />
}
if (isTabletOrMobile) {
if (isTablet) {
return <Tablet {...props} />
}
return <Desktop {...props} />
@@ -1,13 +1,14 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import Animated from 'react-native-reanimated'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useMediaQuery} from 'react-responsive'
import {HITSLOP_20} from 'lib/constants'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {colors} from 'lib/styles'
import {HITSLOP_20} from 'lib/constants'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity)
import {isWeb} from 'platform/detection'
@@ -72,10 +73,12 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
loadLatestInline: {
// @ts-ignore web only
left: 'calc(50vw - 282px)',
},
loadLatestInline: isWeb
? {
// @ts-ignore web only
left: 'calc(50vw - 282px)',
}
: {},
loadLatestOutOfLine: {
// @ts-ignore web only
left: 'calc(50vw - 382px)',