ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 00:24:53 +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

59
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,34 +235,36 @@ const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
style={{ minHeight: 800, borderRadius: 9.11 }}
width={355}
>
{noDateToDos.length > 0 && (
<View key="No Date">
<View row spread paddingH-19 marginB-12>
<Text
text70
style={{
fontWeight: "bold",
}}
>
Unscheduled
</Text>
<AntDesign
name={expandNoDate ? "caretdown" : "caretright"}
size={24}
color="#fd1575"
onPress={() => {
setExpandNoDate(!expandNoDate);
}}
/>
<ScrollView>
{noDateToDos.length > 0 && (
<View key="No Date">
<View row spread paddingH-19 marginB-12>
<Text
text70
style={{
fontWeight: "bold",
}}
>
Unscheduled
</Text>
<AntDesign
name={expandNoDate ? "caretdown" : "caretright"}
size={24}
color="#fd1575"
onPress={() => {
setExpandNoDate(!expandNoDate);
}}
/>
</View>
{expandNoDate &&
noDateToDos
.sort((a, b) => Number(a.done) - Number(b.done))
.map((item) => <ToDoItem key={item.id} item={item} />)}
</View>
{expandNoDate &&
noDateToDos
.sort((a, b) => Number(a.done) - Number(b.done))
.map((item) => <ToDoItem key={item.id} item={item} />)}
</View>
)}
)}
{datedToDos.map(renderTodoGroup)}
{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"

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

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" },
});