From f3619cf9f9f74fb744bfdf074bbc470d8118dc4a Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 12 Mar 2024 00:21:48 +0000
Subject: [PATCH] move button inline if viewport is small (vertically)
---
src/view/com/util/load-latest/LoadLatestBtn.tsx | 15 +++++++++++----
1 file changed, 11 insertions(+), 4 deletions(-)
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx
index 5fad1176..41a1f106 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx
@@ -11,6 +11,7 @@ const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity)
import {isWeb} from 'platform/detection'
import {useSession} from 'state/session'
+import {useMediaQuery} from 'react-responsive'
export function LoadLatestBtn({
onPress,
@@ -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)',
},