ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-17 02:25:10 +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

2
app/(auth)/_layout.tsx
View File

@ -50,7 +50,7 @@ export default function TabLayout() {
},
headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
drawerStyle: {
width: "90%",
width: Device.deviceType === DeviceType.TABLET ? "50%" : "90%",
backgroundColor: "#f9f8f7",
height: "100%",
},

104
app/(unauth)/get_started.tsx
View File

@ -1,19 +1,50 @@
import { SafeAreaView } from "react-native-safe-area-context";
import {Button, Colors, Dialog, LoaderScreen, Text, View} from "react-native-ui-lib";
import React, {useCallback, useState} from "react";
import {
Button,
Colors,
Dialog,
LoaderScreen,
Text,
View,
} from "react-native-ui-lib";
import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "expo-router";
import QRIcon from "@/assets/svgs/QRIcon";
import { Camera, CameraView } from "expo-camera";
import { useLoginWithQrCode } from "@/hooks/firebase/useLoginWithQrCode";
import { useAuthContext } from "@/contexts/AuthContext";
import debounce from "debounce";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
import { Dimensions } from "react-native";
export default function Screen() {
const router = useRouter()
const {setRedirectOverride} = useAuthContext()
const router = useRouter();
const { setRedirectOverride } = useAuthContext();
const [hasPermission, setHasPermission] = useState<boolean | null>(null);
const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
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 { mutateAsync: signInWithQrCode, isLoading } = useLoginWithQrCode();
const debouncedRouterReplace = useCallback(
@ -28,9 +59,9 @@ export default function Screen() {
setRedirectOverride(true);
try {
await signInWithQrCode({ userId: data });
debouncedRouterReplace()
debouncedRouterReplace();
} catch (err) {
console.log(err)
console.log(err);
}
};
@ -44,13 +75,21 @@ export default function Screen() {
const handleOpenQrCodeDialog = () => {
getCameraPermissions(() => setShowCameraDialog(true));
}
};
return (
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%", alignItems: "center"}}>
<SafeAreaView style={{ flex: 1, alignItems: "center" }}>
<View
style={{
flex: 1,
padding: 21,
paddingBottom: 45,
paddingTop: isLoading ? "20%" : getTopPadding(),
width: isTablet ? 629 : '100%'
}}
>
<View center>
<Text style={{fontSize: 30, fontFamily: 'Manrope_600SemiBold'}}>
<Text style={{ fontSize: 30, fontFamily: "Manrope_600SemiBold" }}>
Get started with Cally
</Text>
</View>
@ -63,7 +102,7 @@ export default function Screen() {
labelStyle={{
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
marginLeft: 10
marginLeft: 10,
}}
iconSource={() => <QRIcon color={"#07B8C7"} />}
onPress={handleOpenQrCodeDialog}
@ -76,7 +115,13 @@ export default function Screen() {
<View row center gap-20>
<View flexG style={{ backgroundColor: "#E2E2E2", height: 2 }} />
<Text style={{fontSize: 16, fontFamily: 'PlusJakartaSans_300Light', color: "#7A7A7A"}}>
<Text
style={{
fontSize: 16,
fontFamily: "PlusJakartaSans_300Light",
color: "#7A7A7A",
}}
>
or
</Text>
<View flexG style={{ backgroundColor: "#E2E2E2", height: 2 }} />
@ -84,29 +129,40 @@ export default function Screen() {
<View>
<Button
label="Contine with Email"
label="Continue with Email"
labelStyle={{
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
marginLeft: 10
marginLeft: 10,
}}
onPress={() => router.push("/(unauth)/sign_up")}
style={{height: 50, borderStyle: "solid", borderColor: "#E2E2E2", borderWidth: 2}}
style={{
height: 50,
borderStyle: "solid",
borderColor: "#E2E2E2",
borderWidth: 2,
}}
color={Colors.black}
backgroundColor={"transparent"}
/>
</View>
</View>
{isTablet ? (
<View marginT-30 />
) : (
<View flexG />
)}
<View row centerH gap-5>
<Text style={{
<Text
style={{
fontFamily: "PlusJakartaSans_300Light",
fontSize: 16,
color: "#484848"
}} center>
color: "#484848",
}}
center
>
Already have an account?
</Text>
@ -160,10 +216,14 @@ export default function Screen() {
/>
</Dialog>
{isLoading && (
<LoaderScreen overlay message={"Signing in..."} backgroundColor={Colors.white} color={Colors.grey40}/>
<LoaderScreen
overlay
message={"Signing in..."}
backgroundColor={Colors.white}
color={Colors.grey40}
/>
)}
</SafeAreaView>
)
);
}

7
components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx
View File

@ -12,6 +12,7 @@ import { AntDesign } from "@expo/vector-icons";
import { IToDo } from "@/hooks/firebase/types/todoData";
import ToDoItem from "../../todos/ToDoItem";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { ScrollView } from "react-native-gesture-handler";
const groupToDosByDate = (toDos: IToDo[]) => {
let sortedTodos = toDos.sort((a, b) => a.date - b.date);
@ -77,9 +78,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
const filterToDosByUser = (toDos: IToDo[], uid: string | undefined) => {
if (!uid) return [];
return toDos.filter((todo) =>
todo.assignees?.includes(uid)
);
return toDos.filter((todo) => todo.assignees?.includes(uid));
};
const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
@ -236,6 +235,7 @@ const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
style={{ minHeight: 800, borderRadius: 9.11 }}
width={355}
>
<ScrollView>
{noDateToDos.length > 0 && (
<View key="No Date">
<View row spread paddingH-19 marginB-12>
@ -264,6 +264,7 @@ const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
)}
{datedToDos.map(renderTodoGroup)}
</ScrollView>
</View>
);
};

1
components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
View File

@ -34,6 +34,7 @@ const styles = StyleSheet.create({
flex: 1,
flexDirection: 'row',
borderTopColor: "#a9a9a9",
width: '80%',
borderTopWidth: 1,
},
calendarContainer: {

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

@ -9,13 +9,15 @@ import {
TextFieldRef,
View,
} from "react-native-ui-lib";
import React, { useRef, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { useSignIn } from "@/hooks/firebase/useSignIn";
import { 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";
import { useRouter } from "expo-router";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
@ -24,6 +26,27 @@ const SignInPage = () => {
const [password, setPassword] = useState<string>("");
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 { mutateAsync: signIn, error, isError, isLoading } = useSignIn();
const router = useRouter();
@ -45,13 +68,19 @@ const SignInPage = () => {
};
return (
<SafeAreaView style={{ flex: 1 }}>
<SafeAreaView style={{ flex: 1, alignItems: isTablet ? "center" : undefined}}>
<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 ? '100%' : (isTablet ? 629 : undefined),
}}
>
<View gap-13 width={"100%"} marginB-20>
<Text style={{ fontSize: 40, fontFamily: "Manrope_600SemiBold" }}>
@ -95,7 +124,7 @@ const SignInPage = () => {
/>
</KeyboardAvoidingView>
<View flexG />
{isTablet ? <View /> : <View flexG />}
<Button
label="Log in"

52
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" }}>
@ -191,7 +231,11 @@ const SignUpPage = () => {
</View>
</View>
{isTablet ? (
<View height={50} />
) : (
<View flexG style={{ minHeight: 50 }} />
)}
<View>
<Button

22
components/shared/DrawerButton.tsx
View File

@ -1,6 +1,8 @@
import React from "react";
import { StyleSheet } from "react-native";
import { Button, View, Text } from "react-native-ui-lib";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
interface IDrawerButtonProps {
bgColor: string;
@ -11,6 +13,17 @@ interface IDrawerButtonProps {
}
const DrawerButton = (props: IDrawerButtonProps) => {
const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
const styles = StyleSheet.create({
iconContainer: {
width: "70%",
aspectRatio: 1,
borderRadius: 50,
},
labelStyle: { fontSize: 15, fontFamily: "Poppins_400Regular" },
});
return (
<Button
onPress={props.pressFunc}
@ -40,12 +53,3 @@ const DrawerButton = (props: IDrawerButtonProps) => {
);
};
export default DrawerButton;
const styles = StyleSheet.create({
iconContainer: {
width: "70%",
aspectRatio: 1,
borderRadius: 50,
},
labelStyle: { fontSize: 15, fontFamily: "Poppins_400Regular" },
});