Merge pull request #3178 from bluesky-social/scrolltotop-overlap
Move scroll to top button inline if viewport is narrow (vertically)zio/stable
commit
17d921fd9d
|
@ -1,12 +1,13 @@
|
|||
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 {useMediaQuery} from 'react-responsive'
|
||||
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'
|
||||
import Animated from 'react-native-reanimated'
|
||||
const AnimatedTouchableOpacity =
|
||||
Animated.createAnimatedComponent(TouchableOpacity)
|
||||
import {isWeb} from 'platform/detection'
|
||||
|
@ -26,6 +27,9 @@ export function LoadLatestBtn({
|
|||
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
|
||||
const {fabMinimalShellTransform} = useMinimalShellMode()
|
||||
|
||||
// move button inline if it starts overlapping the left nav
|
||||
const isTallViewport = useMediaQuery({minHeight: 700})
|
||||
|
||||
// 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
|
||||
// it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
|
||||
const showBottomBar = hasSession ? isMobile : isTabletOrMobile
|
||||
|
@ -34,8 +38,11 @@ export function LoadLatestBtn({
|
|||
<AnimatedTouchableOpacity
|
||||
style={[
|
||||
styles.loadLatest,
|
||||
isDesktop && styles.loadLatestDesktop,
|
||||
isTablet && styles.loadLatestTablet,
|
||||
isDesktop &&
|
||||
(isTallViewport
|
||||
? styles.loadLatestOutOfLine
|
||||
: styles.loadLatestInline),
|
||||
isTablet && styles.loadLatestInline,
|
||||
pal.borderDark,
|
||||
pal.view,
|
||||
showBottomBar && fabMinimalShellTransform,
|
||||
|
@ -65,11 +72,11 @@ const styles = StyleSheet.create({
|
|||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
loadLatestTablet: {
|
||||
loadLatestInline: {
|
||||
// @ts-ignore web only
|
||||
left: 'calc(50vw - 282px)',
|
||||
},
|
||||
loadLatestDesktop: {
|
||||
loadLatestOutOfLine: {
|
||||
// @ts-ignore web only
|
||||
left: 'calc(50vw - 382px)',
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue