Fix sizing on smaller phones
parent
fec1589f7c
commit
0b7b91d5fd
|
@ -222,7 +222,7 @@ PODS:
|
||||||
- glog
|
- glog
|
||||||
- react-native-pager-view (6.0.2):
|
- react-native-pager-view (6.0.2):
|
||||||
- React-Core
|
- React-Core
|
||||||
- react-native-safe-area-context (4.3.4):
|
- react-native-safe-area-context (4.4.1):
|
||||||
- RCT-Folly
|
- RCT-Folly
|
||||||
- RCTRequired
|
- RCTRequired
|
||||||
- RCTTypeSafety
|
- RCTTypeSafety
|
||||||
|
@ -495,7 +495,7 @@ SPEC CHECKSUMS:
|
||||||
React-jsinspector: c5989c77cb89ae6a69561095a61cce56a44ae8e8
|
React-jsinspector: c5989c77cb89ae6a69561095a61cce56a44ae8e8
|
||||||
React-logger: a0833912d93b36b791b7a521672d8ee89107aff1
|
React-logger: a0833912d93b36b791b7a521672d8ee89107aff1
|
||||||
react-native-pager-view: 592421df0259bf7a7a4fe85b74c24f3f39905605
|
react-native-pager-view: 592421df0259bf7a7a4fe85b74c24f3f39905605
|
||||||
react-native-safe-area-context: dfe5aa13bee37a0c7e8059d14f72ffc076d120e9
|
react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
|
||||||
react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
|
react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
|
||||||
React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6
|
React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6
|
||||||
React-RCTActionSheet: 547fe42fdb4b6089598d79f8e1d855d7c23e2162
|
React-RCTActionSheet: 547fe42fdb4b6089598d79f8e1d855d7c23e2162
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
"react-native-reanimated": "^2.9.1",
|
"react-native-reanimated": "^2.9.1",
|
||||||
"react-native-root-siblings": "^4.1.1",
|
"react-native-root-siblings": "^4.1.1",
|
||||||
"react-native-root-toast": "^3.4.0",
|
"react-native-root-toast": "^3.4.0",
|
||||||
"react-native-safe-area-context": "^4.3.1",
|
"react-native-safe-area-context": "^4.4.1",
|
||||||
"react-native-screens": "^3.13.1",
|
"react-native-screens": "^3.13.1",
|
||||||
"react-native-splash-screen": "^3.3.0",
|
"react-native-splash-screen": "^3.3.0",
|
||||||
"react-native-svg": "^12.4.0",
|
"react-native-svg": "^12.4.0",
|
||||||
|
|
|
@ -3,6 +3,7 @@ import React, {useState, useEffect} from 'react'
|
||||||
import {RootSiblingParent} from 'react-native-root-siblings'
|
import {RootSiblingParent} from 'react-native-root-siblings'
|
||||||
import {GestureHandlerRootView} from 'react-native-gesture-handler'
|
import {GestureHandlerRootView} from 'react-native-gesture-handler'
|
||||||
import SplashScreen from 'react-native-splash-screen'
|
import SplashScreen from 'react-native-splash-screen'
|
||||||
|
import {SafeAreaProvider} from 'react-native-safe-area-context'
|
||||||
import {whenWebCrypto} from './platform/polyfills.native'
|
import {whenWebCrypto} from './platform/polyfills.native'
|
||||||
import * as view from './view/index'
|
import * as view from './view/index'
|
||||||
import {RootStoreModel, setupState, RootStoreProvider} from './state'
|
import {RootStoreModel, setupState, RootStoreProvider} from './state'
|
||||||
|
@ -35,7 +36,9 @@ function App() {
|
||||||
<GestureHandlerRootView style={{flex: 1}}>
|
<GestureHandlerRootView style={{flex: 1}}>
|
||||||
<RootSiblingParent>
|
<RootSiblingParent>
|
||||||
<RootStoreProvider value={rootStore}>
|
<RootStoreProvider value={rootStore}>
|
||||||
<MobileShell />
|
<SafeAreaProvider>
|
||||||
|
<MobileShell />
|
||||||
|
</SafeAreaProvider>
|
||||||
</RootStoreProvider>
|
</RootStoreProvider>
|
||||||
</RootSiblingParent>
|
</RootSiblingParent>
|
||||||
</GestureHandlerRootView>
|
</GestureHandlerRootView>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react'
|
import React, {useMemo} from 'react'
|
||||||
import {StyleSheet, Text, View} from 'react-native'
|
import {StyleSheet, useWindowDimensions, Text, View} from 'react-native'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {Link} from '../util/Link'
|
import {Link} from '../util/Link'
|
||||||
import {PostDropdownBtn} from '../util/DropdownBtn'
|
import {PostDropdownBtn} from '../util/DropdownBtn'
|
||||||
|
@ -16,11 +16,16 @@ interface PostMetaOpts {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function PostMeta(opts: PostMetaOpts) {
|
export function PostMeta(opts: PostMetaOpts) {
|
||||||
|
const winDim = useWindowDimensions()
|
||||||
|
const maxWidth = useMemo(
|
||||||
|
() => ({maxWidth: ((winDim.width * 3) / 5) | 0}),
|
||||||
|
[winDim.width],
|
||||||
|
)
|
||||||
return (
|
return (
|
||||||
<View style={styles.meta}>
|
<View style={styles.meta}>
|
||||||
<View style={styles.metaNames}>
|
<View style={[styles.metaNames, maxWidth]}>
|
||||||
<Link
|
<Link
|
||||||
style={styles.metaItem}
|
style={[styles.metaItem, maxWidth]}
|
||||||
href={opts.authorHref}
|
href={opts.authorHref}
|
||||||
title={opts.authorHandle}>
|
title={opts.authorHandle}>
|
||||||
<Text style={[s.f17, s.bold]} numberOfLines={1}>
|
<Text style={[s.f17, s.bold]} numberOfLines={1}>
|
||||||
|
@ -28,7 +33,7 @@ export function PostMeta(opts: PostMetaOpts) {
|
||||||
</Text>
|
</Text>
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
style={styles.metaItem}
|
style={[styles.metaItem, maxWidth]}
|
||||||
href={opts.authorHref}
|
href={opts.authorHref}
|
||||||
title={opts.authorHandle}>
|
title={opts.authorHandle}>
|
||||||
<Text style={[s.f15, s.gray5]} numberOfLines={1}>
|
<Text style={[s.f15, s.gray5]} numberOfLines={1}>
|
||||||
|
@ -37,7 +42,7 @@ export function PostMeta(opts: PostMetaOpts) {
|
||||||
</Link>
|
</Link>
|
||||||
</View>
|
</View>
|
||||||
<Text style={[styles.metaItem, s.f15, s.gray5]}>
|
<Text style={[styles.metaItem, s.f15, s.gray5]}>
|
||||||
· {ago(opts.timestamp)}
|
{ago(opts.timestamp)}
|
||||||
</Text>
|
</Text>
|
||||||
<View style={s.flex1} />
|
<View style={s.flex1} />
|
||||||
<PostDropdownBtn
|
<PostDropdownBtn
|
||||||
|
@ -61,11 +66,9 @@ const styles = StyleSheet.create({
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
flexWrap: 'wrap',
|
flexWrap: 'wrap',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
maxWidth: 240,
|
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
metaItem: {
|
metaItem: {
|
||||||
maxWidth: 240,
|
|
||||||
paddingRight: 5,
|
paddingRight: 5,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {
|
||||||
TouchableWithoutFeedback,
|
TouchableWithoutFeedback,
|
||||||
View,
|
View,
|
||||||
} from 'react-native'
|
} from 'react-native'
|
||||||
|
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||||
import Animated, {
|
import Animated, {
|
||||||
useSharedValue,
|
useSharedValue,
|
||||||
useAnimatedStyle,
|
useAnimatedStyle,
|
||||||
|
@ -27,6 +28,7 @@ export const MainMenu = observer(
|
||||||
({active, onClose}: {active: boolean; onClose: () => void}) => {
|
({active, onClose}: {active: boolean; onClose: () => void}) => {
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
const initInterp = useSharedValue<number>(0)
|
const initInterp = useSharedValue<number>(0)
|
||||||
|
const insets = useSafeAreaInsets()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (active) {
|
if (active) {
|
||||||
|
@ -167,7 +169,12 @@ export const MainMenu = observer(
|
||||||
<TouchableWithoutFeedback onPress={onClose}>
|
<TouchableWithoutFeedback onPress={onClose}>
|
||||||
<View style={styles.bg} />
|
<View style={styles.bg} />
|
||||||
</TouchableWithoutFeedback>
|
</TouchableWithoutFeedback>
|
||||||
<Animated.View style={[styles.wrapper, wrapperAnimStyle]}>
|
<Animated.View
|
||||||
|
style={[
|
||||||
|
styles.wrapper,
|
||||||
|
{bottom: insets.bottom + 55},
|
||||||
|
wrapperAnimStyle,
|
||||||
|
]}>
|
||||||
<SafeAreaView>
|
<SafeAreaView>
|
||||||
<View style={[styles.topSection]}>
|
<View style={[styles.topSection]}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
|
@ -251,7 +258,6 @@ const styles = StyleSheet.create({
|
||||||
wrapper: {
|
wrapper: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 0,
|
top: 0,
|
||||||
bottom: 75,
|
|
||||||
width: '100%',
|
width: '100%',
|
||||||
backgroundColor: '#fff',
|
backgroundColor: '#fff',
|
||||||
},
|
},
|
||||||
|
|
|
@ -220,7 +220,7 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
</ScreenContainer>
|
</ScreenContainer>
|
||||||
</GestureDetector>
|
</GestureDetector>
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
<View style={styles.bottomBar}>
|
<SafeAreaView style={styles.bottomBar}>
|
||||||
<Btn icon="house" onPress={onPressHome} />
|
<Btn icon="house" onPress={onPressHome} />
|
||||||
<Btn icon="search" onPress={onPressSearch} />
|
<Btn icon="search" onPress={onPressSearch} />
|
||||||
<Btn icon="menu" onPress={onPressMenu} />
|
<Btn icon="menu" onPress={onPressMenu} />
|
||||||
|
@ -230,7 +230,7 @@ export const MobileShell: React.FC = observer(() => {
|
||||||
notificationCount={store.me.notificationCount}
|
notificationCount={store.me.notificationCount}
|
||||||
/>
|
/>
|
||||||
<Btn icon={['far', 'clone']} onPress={onPressTabs} />
|
<Btn icon={['far', 'clone']} onPress={onPressTabs} />
|
||||||
</View>
|
</SafeAreaView>
|
||||||
<MainMenu
|
<MainMenu
|
||||||
active={isMainMenuActive}
|
active={isMainMenuActive}
|
||||||
onClose={() => setMainMenuActive(false)}
|
onClose={() => setMainMenuActive(false)}
|
||||||
|
@ -373,7 +373,6 @@ const styles = StyleSheet.create({
|
||||||
borderTopColor: colors.gray2,
|
borderTopColor: colors.gray2,
|
||||||
paddingLeft: 5,
|
paddingLeft: 5,
|
||||||
paddingRight: 15,
|
paddingRight: 15,
|
||||||
paddingBottom: 20,
|
|
||||||
},
|
},
|
||||||
ctrl: {
|
ctrl: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
|
|
@ -10233,10 +10233,10 @@ react-native-root-toast@^3.4.0:
|
||||||
prop-types "^15.5.10"
|
prop-types "^15.5.10"
|
||||||
react-native-root-siblings "^4.0.0"
|
react-native-root-siblings "^4.0.0"
|
||||||
|
|
||||||
react-native-safe-area-context@^4.3.1:
|
react-native-safe-area-context@^4.4.1:
|
||||||
version "4.3.4"
|
version "4.4.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.4.tgz#79060fcc02ef38d6fd7afdf87b2301b06bd99fe9"
|
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
|
||||||
integrity sha512-4dFZPDHRigZ+uw8HCmMLyC/IT1BG0B9QLvuwsBQAMDCRSrxISIYza9VIbsIn2FGvZiQ1gOoXBHDmy9WFihQsTg==
|
integrity sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA==
|
||||||
|
|
||||||
react-native-screens@^3.13.1:
|
react-native-screens@^3.13.1:
|
||||||
version "3.17.0"
|
version "3.17.0"
|
||||||
|
|
Loading…
Reference in New Issue