ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-14 09:17:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

tablet view fixes, grocery item fix

Browse Source
This commit is contained in:
ivic00
2024-11-27 20:17:48 +01:00
parent 4b5900c652
commit 01b4fc2e33
6 changed files with 171 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/pages/main/SignInPage.tsx
View File

@ -11,7 +11,12 @@ import {
} from "react-native-ui-lib";
import React, { useEffect, useRef, useState } from "react";
import { useSignIn } from "@/hooks/firebase/useSignIn";
import { Dimensions, KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
import {
Dimensions,
KeyboardAvoidingView,
Platform,
StyleSheet,
} from "react-native";
import Toast from "react-native-toast-message";
import KeyboardManager from "react-native-keyboard-manager";
import { SafeAreaView } from "react-native-safe-area-context";
@ -28,24 +33,24 @@ const SignInPage = () => {
const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
const [isPortrait, setIsPortrait] = useState(() => {
const dim = Dimensions.get('screen');
const dim = Dimensions.get("screen");
return dim.height >= dim.width;
});
useEffect(() => {
const subscription = Dimensions.addEventListener('change', ({ screen }) => {
});
useEffect(() => {
const subscription = Dimensions.addEventListener("change", ({ screen }) => {
setIsPortrait(screen.height >= screen.width);
});
return () => subscription.remove();
}, []);
const getTopPadding = () => {
return () => subscription.remove();
}, []);
const getTopPadding = () => {
if (Device.deviceType === DeviceType.TABLET) {
return isPortrait ? "50%" : "15%";
}
return "20%"; // non-tablet case, regardless of orientation
};
};
const { mutateAsync: signIn, error, isError, isLoading } = useSignIn();
@ -68,9 +73,12 @@ const SignInPage = () => {
};
return (
<SafeAreaView style={{ flex: 1, alignItems: isTablet ? "center" : undefined}}>
<SafeAreaView style={{ flex: 1 }}>
<KeyboardAwareScrollView
contentContainerStyle={{ flexGrow: 1 }}
contentContainerStyle={{
flexGrow: 1,
alignItems: isTablet ? "center" : undefined,
}}
enableOnAndroid
>
<View
@ -79,7 +87,7 @@ const SignInPage = () => {
padding: 21,
paddingBottom: 45,
paddingTop: isLoading ? "20%" : getTopPadding(),
width: isLoading ? '100%' : (isTablet ? 629 : undefined),
width: isLoading ? "100%" : isTablet ? 629 : undefined,
}}
>
<View gap-13 width={"100%"} marginB-20>
@ -92,9 +100,9 @@ const SignInPage = () => {
</View>
<KeyboardAvoidingView
style={{ width: "100%" }}
style={{ width: "100%", flex: 1 }}
contentContainerStyle={{ justifyContent: "center" }}
keyboardVerticalOffset={50}
keyboardVerticalOffset={Platform.OS === "ios" ? 50 : 200}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<TextField
@ -187,6 +195,7 @@ const SignInPage = () => {
<LoaderScreen
overlay
message={"Signing in..."}
containerStyle={{ width: Dimensions.get('screen').width }}
backgroundColor={Colors.white}
color={Colors.grey40}
/>