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

fixed tablet view / spelling

Browse Source
This commit is contained in:
ivic00
2024-11-18 22:14:00 +01:00
parent 89d00cdead
commit 8763be4613
7 changed files with 340 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/pages/main/SignUpPage.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import {
Button,
ButtonSize,
@ -13,11 +13,18 @@ import {
View,
} from "react-native-ui-lib";
import { useSignUp } from "@/hooks/firebase/useSignUp";
import { KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
import {
Dimensions,
KeyboardAvoidingView,
Platform,
StyleSheet,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";
import KeyboardManager from "react-native-keyboard-manager";
import { SafeAreaView } from "react-native-safe-area-context";
import { useRouter } from "expo-router";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
@ -36,6 +43,27 @@ const SignUpPage = () => {
const emailRef = useRef<TextFieldRef>(null);
const passwordRef = useRef<TextFieldRef>(null);
const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
const [isPortrait, setIsPortrait] = useState(() => {
const dim = Dimensions.get("screen");
return dim.height >= dim.width;
});
useEffect(() => {
const subscription = Dimensions.addEventListener("change", ({ screen }) => {
setIsPortrait(screen.height >= screen.width);
});
return () => subscription.remove();
}, []);
const getTopPadding = () => {
if (Device.deviceType === DeviceType.TABLET) {
return isPortrait ? "50%" : "15%";
}
return "20%"; // non-tablet case, regardless of orientation
};
const router = useRouter();
const handleSignUp = async () => {
@ -44,13 +72,25 @@ const SignUpPage = () => {
};
return (
<SafeAreaView style={{ flex: 1 }}>
<SafeAreaView
style={{
flex: 1,
alignItems: isTablet ? "center" : undefined,
width: "100%",
}}
>
<KeyboardAwareScrollView
contentContainerStyle={{ flexGrow: 1 }}
enableOnAndroid
>
<View
style={{ flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%" }}
style={{
flex: 1,
padding: 21,
paddingBottom: 45,
paddingTop: isLoading ? "20%" : getTopPadding(),
width: isLoading ? undefined : (isTablet ? 629 : undefined),
}}
>
<View gap-13 width={"100%"} marginB-20>
<Text style={{ fontSize: 40, fontFamily: "Manrope_600SemiBold" }}>
@ -150,7 +190,7 @@ const SignUpPage = () => {
size={18}
borderRadius={3}
value={allowFaceID}
containerStyle={{borderRadius: 3, width: 18, height: 18}}
containerStyle={{ borderRadius: 3, width: 18, height: 18 }}
onValueChange={(value) => {
setAllowFaceID(value);
}}
@ -167,7 +207,7 @@ const SignUpPage = () => {
]}
color="#919191"
size={18}
containerStyle={{borderRadius: 3, width: 18, height: 18}}
containerStyle={{ borderRadius: 3, width: 18, height: 18 }}
borderRadius={3}
value={acceptTerms}
onValueChange={(value) => setAcceptTerms(value)}
@ -191,7 +231,11 @@ const SignUpPage = () => {
</View>
</View>
<View flexG style={{ minHeight: 50 }} />
{isTablet ? (
<View height={50} />
) : (
<View flexG style={{ minHeight: 50 }} />
)}
<View>
<Button