Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-29 00:20:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

mobile: optimize screens for very small displays (#2885)

Browse Source
This commit is contained in:
Ammar Ahmed
2023-07-05 11:52:13 +05:00
committed by GitHub
parent 580af33caf
commit 7ab4088331
6 changed files with 37 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/mobile/app/components/auth/auth-modal.js
View File

@@ -90,11 +90,7 @@ const AuthModal = () => {
style={{
width: "100%"
}}
contentContainerStyle={{
height: Platform.OS === "android" ? "100%" : "100%"
}}
keyboardShouldPersistTaps="handled"
bounces={false}
>
{currentAuthMode !== AuthMode.login ? (
<Signup

15
apps/mobile/app/components/auth/login.js
View File

@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useEffect, useState } from "react";
import { TouchableOpacity, View } from "react-native";
import { TouchableOpacity, View, useWindowDimensions } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { DDS } from "../../services/device-detection";
import { eSendEvent } from "../../services/event-manager";
@@ -71,7 +71,7 @@ export const Login = ({ changeMode }) => {
}, 5000);
});
const deviceMode = useSettingStore((state) => state.deviceMode);
const { width, height } = useWindowDimensions();
useEffect(() => {
async () => {
setStep(LoginSteps.emailAuth);
@@ -95,14 +95,11 @@ export const Login = ({ changeMode }) => {
backgroundColor: colors.bg,
zIndex: 10,
width: "100%",
alignSelf: "center",
height: "100%",
minHeight: "100%"
alignSelf: "center"
}}
>
<View
style={{
flexGrow: 0.8,
justifyContent: "flex-end",
paddingHorizontal: 20,
backgroundColor: colors.nav,
@@ -114,7 +111,8 @@ export const Login = ({ changeMode }) => {
borderColor: deviceMode !== "mobile" ? colors.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null,
width: deviceMode === "mobile" ? null : "50%"
width: deviceMode === "mobile" ? null : "50%",
minHeight: height * 0.4
}}
>
<View
@@ -164,8 +162,7 @@ export const Login = ({ changeMode }) => {
: "99.9%",
backgroundColor: colors.bg,
alignSelf: "center",
paddingHorizontal: 20,
flexGrow: 1
paddingHorizontal: 20
}}
>
<Input

14
apps/mobile/app/components/auth/signup.js
View File

@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useRef, useState } from "react";
import { TouchableOpacity, View } from "react-native";
import { TouchableOpacity, View, useWindowDimensions } from "react-native";
import { db } from "../../common/database";
import { DDS } from "../../services/device-detection";
import { ToastEvent } from "../../services/event-manager";
@@ -49,7 +49,7 @@ export const Signup = ({ changeMode, trial }) => {
const setUser = useUserStore((state) => state.setUser);
const setLastSynced = useUserStore((state) => state.setLastSynced);
const deviceMode = useSettingStore((state) => state.deviceMode);
const { width, height } = useWindowDimensions();
const validateInfo = () => {
if (!password.current || !email.current || !confirmPassword.current) {
ToastEvent.show({
@@ -101,13 +101,11 @@ export const Signup = ({ changeMode, trial }) => {
backgroundColor: colors.bg,
zIndex: 10,
width: "100%",
alignSelf: "center",
height: "100%"
alignSelf: "center"
}}
>
<View
style={{
flexGrow: 1,
justifyContent: "flex-end",
paddingHorizontal: 20,
backgroundColor: colors.nav,
@@ -119,7 +117,8 @@ export const Signup = ({ changeMode, trial }) => {
borderColor: deviceMode !== "mobile" ? colors.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null,
width: deviceMode === "mobile" ? null : "50%"
width: deviceMode === "mobile" ? null : "50%",
minHeight: height * 0.4
}}
>
<View
@@ -163,8 +162,7 @@ export const Signup = ({ changeMode, trial }) => {
width: DDS.isTab ? "50%" : "100%",
paddingHorizontal: 20,
backgroundColor: colors.bg,
alignSelf: "center",
flexGrow: 0.5
alignSelf: "center"
}}
>
<Input

24
apps/mobile/app/components/intro/index.js
View File

@@ -20,6 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import {
Linking,
ScrollView,
TouchableOpacity,
useWindowDimensions,
View
@@ -34,15 +35,16 @@ import { SIZE } from "../../utils/size";
import { Button } from "../ui/button";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
const Intro = ({ navigation }) => {
const colors = useThemeStore((state) => state.colors);
const isTelemetryEnabled = useSettingStore(
(state) => state.settings.telemetry
);
const { width } = useWindowDimensions();
const { width, height } = useWindowDimensions();
const deviceMode = useSettingStore((state) => state.deviceMode);
const insets = useGlobalSafeAreaInsets();
const renderItem = React.useCallback(
({ item }) => (
<View
@@ -80,7 +82,6 @@ const Intro = ({ navigation }) => {
<View
style={{
marginTop: 10,
marginBottom: 20,
maxWidth: "90%",
width: "100%"
}}
@@ -120,16 +121,14 @@ const Intro = ({ navigation }) => {
);
return (
<View
<ScrollView
testID="notesnook.splashscreen"
style={{
width: "100%",
height: "100%"
width: "100%"
}}
>
<View
style={{
flex: 0.65,
width: deviceMode !== "mobile" ? width / 2 : "100%",
backgroundColor: colors.nav,
marginBottom: 20,
@@ -139,7 +138,10 @@ const Intro = ({ navigation }) => {
borderWidth: deviceMode !== "mobile" ? 1 : null,
borderColor: deviceMode !== "mobile" ? colors.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null
marginTop: deviceMode !== "mobile" ? 50 : null,
paddingTop: insets.top + 10,
paddingBottom: insets.top + 10,
minHeight: height * 0.7
}}
>
<SwiperFlatList
@@ -184,8 +186,8 @@ const Intro = ({ navigation }) => {
<View
style={{
width: "100%",
flex: 0.3,
justifyContent: "center"
justifyContent: "center",
minHeight: height * 0.3
}}
>
<Button
@@ -242,7 +244,7 @@ const Intro = ({ navigation }) => {
</Paragraph>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
};

15
apps/mobile/app/screens/settings/app-lock.js
View File

@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from "react";
import { Platform, View } from "react-native";
import { Platform, ScrollView, View } from "react-native";
import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { AuthMode } from "../../components/auth";
@@ -141,7 +141,8 @@ const AppLock = ({ route }) => {
borderColor: deviceMode !== "mobile" ? colors.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null,
width: deviceMode === "mobile" ? null : "50%"
width: deviceMode === "mobile" ? null : "50%",
minHeight: 180
}}
>
<View
@@ -188,7 +189,7 @@ const AppLock = ({ route }) => {
)}
<Seperator />
<View
<ScrollView
style={{
paddingHorizontal: 12,
width: DDS.isTab && welcome ? "50%" : "100%",
@@ -203,7 +204,8 @@ const AppLock = ({ route }) => {
onPress={async () => {
if (
!(await BiometicService.isBiometryAvailable()) &&
!useUserStore.getState().user
!useUserStore.getState().user &&
item.value !== modes[0].value
) {
ToastEvent.show({
heading: "Biometrics not enrolled",
@@ -276,13 +278,14 @@ const AppLock = ({ route }) => {
alignSelf: "center",
...getElevationStyle(5),
marginTop: 30,
borderRadius: 100
borderRadius: 100,
marginBottom: 30
}}
type="accent"
title="Next"
/>
)}
</View>
</ScrollView>
</>
</Animated.View>
</>

4
apps/mobile/app/utils/size/index.js
View File

@@ -42,7 +42,9 @@ const getDpi = (pd) => {
};
const correction = (size, multiplier) => {
let dSize = getDeviceSize();
if (dSize >= 4 && dSize <= 5.3 && pixelDensity <= 3) {
if (dSize <= 4.5 && pixelDensity <= 3) {
return size * 0.85;
} else if (dSize <= 5.3 && pixelDensity <= 3) {
return size * 0.93;
} else if (dSize > 5.3 && dSize < 7 && pixelDensity < 3 && !DDS.isTab) {
if (Platform.OS === "ios") {