this repo has no description
Merge pull request #3178 from bluesky-social/scrolltotop-overlap
Move scroll to top button inline if viewport is narrow (vertically)
authored by
Samuel Newman
and committed by
GitHub
17d921fd
c1c7a55f
+12
-5
+12
-5
src/view/com/util/load-latest/LoadLatestBtn.tsx
+12
-5
src/view/com/util/load-latest/LoadLatestBtn.tsx
···
1
1
import React from 'react'
2
2
import {StyleSheet, TouchableOpacity, View} from 'react-native'
3
3
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
4
+
import Animated from 'react-native-reanimated'
5
+
import {useMediaQuery} from 'react-responsive'
4
6
import {usePalette} from 'lib/hooks/usePalette'
5
7
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
6
8
import {colors} from 'lib/styles'
7
9
import {HITSLOP_20} from 'lib/constants'
8
10
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
9
-
import Animated from 'react-native-reanimated'
10
11
const AnimatedTouchableOpacity =
11
12
Animated.createAnimatedComponent(TouchableOpacity)
12
13
import {isWeb} from 'platform/detection'
···
26
27
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
27
28
const {fabMinimalShellTransform} = useMinimalShellMode()
28
29
30
+
// move button inline if it starts overlapping the left nav
31
+
const isTallViewport = useMediaQuery({minHeight: 700})
32
+
29
33
// Adjust height of the fab if we have a session only on mobile web. If we don't have a session, we want to adjust
30
34
// it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
31
35
const showBottomBar = hasSession ? isMobile : isTabletOrMobile
···
34
38
<AnimatedTouchableOpacity
35
39
style={[
36
40
styles.loadLatest,
37
-
isDesktop && styles.loadLatestDesktop,
38
-
isTablet && styles.loadLatestTablet,
41
+
isDesktop &&
42
+
(isTallViewport
43
+
? styles.loadLatestOutOfLine
44
+
: styles.loadLatestInline),
45
+
isTablet && styles.loadLatestInline,
39
46
pal.borderDark,
40
47
pal.view,
41
48
showBottomBar && fabMinimalShellTransform,
···
65
72
alignItems: 'center',
66
73
justifyContent: 'center',
67
74
},
68
-
loadLatestTablet: {
75
+
loadLatestInline: {
69
76
// @ts-ignore web only
70
77
left: 'calc(50vw - 282px)',
71
78
},
72
-
loadLatestDesktop: {
79
+
loadLatestOutOfLine: {
73
80
// @ts-ignore web only
74
81
left: 'calc(50vw - 382px)',
75
82
},