From cbc55c661adf7dc703ebc31ee4a1ff03e70dea59 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Thu, 3 Mar 2022 23:09:14 +0330 Subject: [PATCH] reza fixed tablet mode at many page --- navigation/index.js | 50 +- package.json | 1 - .../BottomSheetComponents/ProductQuestion.js | 49 +- .../BottomSheetComponents/ProductReview.js | 24 +- .../ProductSpecifications.js | 26 +- src/components/CustomTextInput.js | 34 +- src/components/Header.js | 11 +- src/components/Or.js | 4 +- src/components/Pressable.js | 14 +- src/components/Redirect.js | 34 +- src/screens/AR/components/Book.js | 18 +- src/screens/AR/index.js | 14 +- src/screens/Address/index.js | 25 +- src/screens/DeliveryForm/Address/index.js | 19 +- .../DeliveryForm/TransportDate/index.js | 23 +- .../DeliveryForm/TransportMethod/index.js | 21 +- src/screens/DeliveryForm/index.js | 1 - src/screens/Home/index.js | 5 +- src/screens/OrderDetails/index.js | 1 - .../OrdersFollowUp/components/Order.js | 52 +- src/screens/OrdersFollowUp/index.js | 1 - src/screens/OrdersFollowUp/left.svg | 8 - src/screens/Product/components/Book.js | 39 +- src/screens/Product/components/Description.js | 45 +- src/screens/Product/components/LinkBox.js | 27 +- src/screens/Product/components/Rates.js | 77 +-- src/screens/Product/index.js | 1 - src/screens/Products/components/Main.js | 37 +- src/screens/Profile/components/List.js | 27 +- .../components/ProfileAddress/index.js | 33 +- .../components/ProfileBookmark/index.js | 12 +- src/screens/Profile/components/User.js | 40 +- src/screens/Profile/index.js | 9 - .../ShoppingCart/components/Product.js | 82 +++- src/screens/ShoppingCart/index.js | 1 - src/screens/Video/components/Season.js | 21 +- src/screens/Video/index.js | 24 +- .../VideoDisplay/components/Season/index.js | 36 +- src/screens/VideoDisplay/index.js | 12 +- .../Videos/components/MostViewedVideo.js | 41 +- src/screens/Videos/components/NewestVideo.js | 30 +- src/screens/Videos/index.js | 26 +- yarn.lock | 454 +----------------- 43 files changed, 692 insertions(+), 817 deletions(-) delete mode 100644 src/screens/OrdersFollowUp/left.svg diff --git a/navigation/index.js b/navigation/index.js index 24645c0..f634017 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import Svg, { G, Path } from "react-native-svg"; -import { Appearance, Platform } from "react-native"; -import { NavigationContainer } from "@react-navigation/native"; +import { Appearance, Platform, Dimensions } from "react-native"; +import { NavigationContainer, DefaultTheme } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { connect } from "react-redux"; @@ -38,31 +38,33 @@ import Blog from "../src/screens/Blog"; //style import fontSize from "../src/constants/fontSize"; import Colors from "../src/constants/Colors"; -import tw from "tailwind-react-native-classnames"; const ios = Platform.OS === "ios"; +const colorScheme = Appearance.getColorScheme(); const Tab = createBottomTabNavigator(); const BottomTabNavigator = () => { const [height, setHeight] = React.useState(88); - const colorScheme = Appearance.getColorScheme(); React.useEffect(() => { setTimeout(() => { setHeight(89); - },1000); - },[]); + }, 1000); + }, []); return ( { ), + contentStyle: { + backgroundColor: "white", + }, }} /> { return ( @@ -364,7 +372,7 @@ const ProductsStackScreen = () => { @@ -377,7 +385,12 @@ const ProductsStackScreen = () => { const VODStack = createNativeStackNavigator(); const VODStackScreen = () => { return ( - + @@ -388,7 +401,12 @@ const VODStackScreen = () => { const CARTStack = createNativeStackNavigator(); const CARTStackScreen = () => { return ( - + @@ -399,8 +417,10 @@ const PROFILEStack = createNativeStackNavigator(); const PROFILEStackScreen = () => { return ( @@ -418,7 +438,7 @@ const Navigation = ({ getStatus, isLogin }) => { // initialRouteName="Root" screenOptions={{ headerShown: false, - contentStyle: { backgroundColor: "white" }, + contentStyle: { backgroundColor: Colors.theme1[colorScheme].white }, }} > diff --git a/package.json b/package.json index e13ad43..1d15f5e 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,6 @@ "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", "redux-thunk": "^2.4.1", - "tailwind-react-native-classnames": "^1.5.1", "tailwind-rn": "^3.0.1" }, "devDependencies": { diff --git a/src/components/BottomSheetComponents/ProductQuestion.js b/src/components/BottomSheetComponents/ProductQuestion.js index de775d9..6250f06 100644 --- a/src/components/BottomSheetComponents/ProductQuestion.js +++ b/src/components/BottomSheetComponents/ProductQuestion.js @@ -1,6 +1,13 @@ -import { View, Text, ScrollView, Dimensions, Appearance } from "react-native"; +import { + View, + Text, + ScrollView, + Dimensions, + Appearance, + Platform, +} from "react-native"; import Divider from "../Divider"; - +import { connect } from "react-redux"; import React from "react"; //style @@ -9,26 +16,29 @@ import tw from "tailwind-rn"; import Colors from "../../constants/Colors"; const { width } = Dimensions.get("window"); +const ios = Platform.OS === "ios"; -const ProductQuestion = ({ list }) => { +const ProductQuestion = ({ list, mobile }) => { const colorScheme = Appearance.getColorScheme(); const Question = ({ question }) => { return ( سوال {question.question} @@ -37,19 +47,22 @@ const ProductQuestion = ({ list }) => { <> پاسخ {question.question} @@ -67,7 +80,9 @@ const ProductQuestion = ({ list }) => { onPress={() => refRBSheet.current.open()} style={[ tw( - "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" + `flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 ${ + mobile ? "py-3" : "py-4" + } mb-4` ), { backgroundColor: Colors.theme1[colorScheme].greenFF1, @@ -77,9 +92,9 @@ const ProductQuestion = ({ list }) => { @@ -95,7 +110,11 @@ const ProductQuestion = ({ list }) => { ); }; -export default ProductQuestion; +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile, +}); + +export default connect(mapStateToProps)(ProductQuestion); ProductQuestion.defaultProps = { list: [ diff --git a/src/components/BottomSheetComponents/ProductReview.js b/src/components/BottomSheetComponents/ProductReview.js index c60b3bd..5f8290e 100644 --- a/src/components/BottomSheetComponents/ProductReview.js +++ b/src/components/BottomSheetComponents/ProductReview.js @@ -1,6 +1,6 @@ -import { View, Text, ScrollView, Dimensions, Appearance } from "react-native"; - +import { View, Text, ScrollView, Dimensions, Appearance, Platform } from "react-native"; import React from "react"; +import {connect} from 'react-redux'; //style import fontSize from "../../constants/fontSize"; @@ -8,8 +8,9 @@ import Colors from "../../constants/Colors"; import tw from "tailwind-rn"; const { width } = Dimensions.get("window"); +const ios = Platform.OS === "ios"; -const ProductReviews = ({ list }) => { +const ProductReviews = ({ list, mobile }) => { const colorScheme = Appearance.getColorScheme(); const Property = ({ question }) => { return ( @@ -18,7 +19,7 @@ const ProductReviews = ({ list }) => { onPress={() => refRBSheet.current.open()} style={[ tw( - "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" + `flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 ${mobile ? "py-3" : "py-4"} mb-4` ), { backgroundColor: Colors.theme1[colorScheme].greenFF1 + '66', @@ -28,7 +29,7 @@ const ProductReviews = ({ list }) => { { {question.text} @@ -85,7 +87,7 @@ const ProductReviews = ({ list }) => { { fontSize: fontSize.lg, color: Colors.theme1[colorScheme].green79, - fontFamily: "regular", + fontFamily: "demi", }, ]} > @@ -101,7 +103,11 @@ const ProductReviews = ({ list }) => { ); }; -export default ProductReviews; +const mapStateToProps = (state) => ({ + mobile : state.publicApi.mobile +}) + +export default connect(mapStateToProps)(ProductReviews); ProductReviews.defaultProps = { list: [ diff --git a/src/components/BottomSheetComponents/ProductSpecifications.js b/src/components/BottomSheetComponents/ProductSpecifications.js index 854be05..5c4aee6 100644 --- a/src/components/BottomSheetComponents/ProductSpecifications.js +++ b/src/components/BottomSheetComponents/ProductSpecifications.js @@ -1,6 +1,6 @@ -import { View, Text, ScrollView, Dimensions, Appearance } from "react-native"; - +import { View, Text, ScrollView, Dimensions, Appearance, Platform } from "react-native"; import React from "react"; +import {connect} from 'react-redux'; //style import fontSize from "../../constants/fontSize"; @@ -8,8 +8,9 @@ import Colors from "../../constants/Colors"; import tw from "tailwind-rn"; const { width } = Dimensions.get("window"); +const ios = Platform.OS === "ios"; -const ProductSpecifications = ({ list }) => { +const ProductSpecifications = ({ list, mobile }) => { const colorScheme = Appearance.getColorScheme(); const Property = ({ prop }) => { return ( @@ -22,11 +23,12 @@ const ProductSpecifications = ({ list }) => { > @@ -35,7 +37,7 @@ const ProductSpecifications = ({ list }) => { @@ -44,7 +46,7 @@ const ProductSpecifications = ({ list }) => { tw("text-right"), { fontFamily: "regular", - fontSize: fontSize.sm, + fontSize: mobile ? fontSize.tiny : fontSize.base, color: "#646464", }, ]} @@ -61,7 +63,7 @@ const ProductSpecifications = ({ list }) => { onPress={() => refRBSheet.current.open()} style={[ tw( - "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" + "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-3 py-3 mb-4" ), { backgroundColor: Colors.theme1[colorScheme].greenFF1 , @@ -73,7 +75,7 @@ const ProductSpecifications = ({ list }) => { { fontSize: fontSize.lg, color: Colors.theme1[colorScheme].green79 , - fontFamily: "regular", + fontFamily: "demi", }, ]} > @@ -89,7 +91,11 @@ const ProductSpecifications = ({ list }) => { ); }; -export default ProductSpecifications; +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile +}); + +export default connect(mapStateToProps)(ProductSpecifications); ProductSpecifications.defaultProps = { list: { diff --git a/src/components/CustomTextInput.js b/src/components/CustomTextInput.js index fb0c788..3544ecf 100644 --- a/src/components/CustomTextInput.js +++ b/src/components/CustomTextInput.js @@ -6,9 +6,11 @@ import { Dimensions, StyleSheet, useColorScheme, + Platform } from "react-native"; -import tw from "tailwind-rn"; +import {connect} from 'react-redux'; +import tw from "tailwind-rn"; import Colors from "../constants/Colors"; import fontSize from "../constants/fontSize"; @@ -27,16 +29,26 @@ const FloatingLabelInput = ({ maxLength, autoFocus, regex, + mobile, ...props }) => { const colorScheme = useColorScheme(); const [isFocused, setIsFocused] = useState(false); + const styles = StyleSheet.create({ labelStyle: { fontFamily: "regular", top: !isFocused ? "50%" : 1, - fontSize: !isFocused ? fontSize.tiny : fontSize.sm, - transform: [{ translateY: -fontSize.lg }], + fontSize: !isFocused + ? Math.floor(fontSize.base) + : Math.floor(fontSize.sm), + transform: [ + { + translateY: !isFocused + ? -Math.floor(fontSize.base - 2) + : -Math.floor(fontSize.sm), + }, + ], color: !isFocused ? Colors.theme1[colorScheme].gray2077 : Colors.theme1[colorScheme].green79, @@ -51,17 +63,17 @@ const FloatingLabelInput = ({ textAlign: textAlign, fontFamily: "regular", fontWeight: "900", - direction: direction ? direction : "rtl" + direction: direction ? direction : "rtl", }, }); React.useEffect(() => { - if(value) { + if (value) { setIsFocused(true); - }else{ + } else { setIsFocused(false); } - },[value]); + }, [value]); return ( onChange(name, (text = regex(text)))} placeholder={placeholder} onFocus={() => setIsFocused(true)} @@ -88,4 +100,8 @@ const FloatingLabelInput = ({ ); }; -export default FloatingLabelInput; +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile +}) + +export default connect(mapStateToProps)(FloatingLabelInput); diff --git a/src/components/Header.js b/src/components/Header.js index fb6d1b4..5ee3101 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,14 +1,15 @@ import { View, Text, Dimensions, ImageBackground } from "react-native"; +import { connect } from "react-redux"; import tw from "tailwind-rn"; import fontSize from "../constants/fontSize"; const height = Dimensions.get("window").height; -export default function Header({ title, description, background }) { +function Header({ title, description, background }) { return ( @@ -34,3 +35,9 @@ export default function Header({ title, description, background }) { ); } + +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile +}) + +export default connect(mapStateToProps)(Header); diff --git a/src/components/Or.js b/src/components/Or.js index b87d152..8d86309 100644 --- a/src/components/Or.js +++ b/src/components/Or.js @@ -1,13 +1,13 @@ import React, {useState} from 'react'; import {View, Text, Dimensions} from 'react-native'; -import tw from 'tailwind-react-native-classnames'; +import tw from 'tailwind-rn'; const width = Dimensions.get('window').width; function Or(props) { return ( + style={[tw('w-full flex flex-row justify-between items-center my-3')]}> یا diff --git a/src/components/Pressable.js b/src/components/Pressable.js index 4de8488..0815141 100644 --- a/src/components/Pressable.js +++ b/src/components/Pressable.js @@ -1,9 +1,12 @@ import React from "react"; import { TouchableOpacity, Text, ActivityIndicator } from "react-native"; +import {connect} from 'react-redux'; + +//style import tw from "tailwind-rn"; import fontSize from "../constants/fontSize"; -export default function Pressable1({ +function Pressable1({ title, backgroundColor, color, @@ -11,6 +14,7 @@ export default function Pressable1({ width, onPress, loading, + mobile }) { return ( ) : ( {title} @@ -37,3 +41,9 @@ export default function Pressable1({ ); } + +const mapStateToProps = (state) => ({ + mobile : state.publicApi.mobile +}) + +export default connect(mapStateToProps)(Pressable1); \ No newline at end of file diff --git a/src/components/Redirect.js b/src/components/Redirect.js index 85af824..e9705f6 100644 --- a/src/components/Redirect.js +++ b/src/components/Redirect.js @@ -1,29 +1,31 @@ -import React from 'react'; -import {View, Text, Dimensions, Image} from 'react-native'; -import tw from 'tailwind-react-native-classnames'; -import leftIcon from '../assets/icons/leftWhite.png'; +import React from "react"; +import { View, Text, Dimensions, Image } from "react-native"; +import tw from "tailwind-rn"; +import leftIcon from "../assets/icons/leftWhite.png"; -const width = Dimensions.get('window').width; -const height = Dimensions.get('window').height; +const width = Dimensions.get("window").width; +const height = Dimensions.get("window").height; -export default function Redirect({text}) { +export default function Redirect({ text }) { return ( - + tw("w-full flex flex-row-reverse items-center p-4 rounded-md mb-5"), + { backgroundColor: "#196EC0" }, + ]} + > + + tw("font-medium text-right"), + { fontSize: width / 30, color: "white" }, + ]} + > {text} - - + + ); diff --git a/src/screens/AR/components/Book.js b/src/screens/AR/components/Book.js index 47f57cc..ea86313 100644 --- a/src/screens/AR/components/Book.js +++ b/src/screens/AR/components/Book.js @@ -1,27 +1,31 @@ import { View, Text, Image, Dimensions, Appearance } from "react-native"; import React from "react"; +import { connect } from "react-redux"; //style import tw from "tailwind-rn"; import fontSize from "../../../constants/fontSize"; import Colors from "../../../constants/Colors"; -const { width } = Dimensions.get("window"); +const { width, height } = Dimensions.get("window"); -const Book = ({ book }) => { +const Book = ({ book, mobile }) => { const colorScheme = Appearance.getColorScheme(); return ( { ); }; -export default Book; +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile, +}); + +export default connect(mapStateToProps)(Book); diff --git a/src/screens/AR/index.js b/src/screens/AR/index.js index 0286276..d8c026c 100644 --- a/src/screens/AR/index.js +++ b/src/screens/AR/index.js @@ -6,7 +6,7 @@ import { LayoutAnimation, Platform, Dimensions, - View + View, } from "react-native"; import { connect } from "react-redux"; import { publicApi } from "../../redux/actions"; @@ -18,8 +18,9 @@ import Book from "./components/Book"; import tw from "tailwind-rn"; const { height } = Dimensions.get("window"); +const ios = Platform.OS === "ios"; -function AR({ getArList, arList }) { +function AR({ getArList, arList, mobile }) { const [position, setPosition] = useState("100%"); useEffect(() => { @@ -60,7 +61,13 @@ function AR({ getArList, arList }) { }} contentContainerStyle={{ paddingBottom: 100 }} > - + {arList.length > 0 && arList.map((book, index) => )} @@ -71,6 +78,7 @@ function AR({ getArList, arList }) { const mapStateToProps = (state) => ({ arList: state.publicApi.arList, + mobile: state.publicApi.mobile, }); const mapDispatchToProps = { diff --git a/src/screens/Address/index.js b/src/screens/Address/index.js index a8cca2f..5429cf6 100644 --- a/src/screens/Address/index.js +++ b/src/screens/Address/index.js @@ -46,6 +46,7 @@ const Address = ({ loading, setPhase, cityLoading, + mobile, }) => { const profilePage = route.params?.type === "profile"; const colorScheme = Appearance.getColorScheme(); @@ -209,16 +210,17 @@ const Address = ({ }; setProfile(data); navigation.goBack(); - } + }; const Header = ({ title, text }) => { return ( - + {title} @@ -226,8 +228,9 @@ const Address = ({ {text} @@ -246,10 +249,10 @@ const Address = ({ profilePage ? submitProfile() : submit()} + onPress={() => (profilePage ? submitProfile() : submit())} /> @@ -430,7 +435,6 @@ const styles = StyleSheet.create({ paddingBottom: 100, }, container: { - width: Dimensions.get("window").width, backgroundColor: "white", flexDirection: "column", paddingVertical: 5, @@ -447,6 +451,7 @@ const mapStateToProps = (state) => ({ cityLoading: state.publicApi.loading, user: state.user.status, profileFields: state.user.profileFields, + mobile: state.publicApi.mobile, }); const mapDispatchToProps = { @@ -454,7 +459,7 @@ const mapDispatchToProps = { getCity: publicApi.getCity, createAddress: userAddress.add, setProfileFields: user.setProfileFields, - setProfile: user.setProfile + setProfile: user.setProfile, }; export default connect(mapStateToProps, mapDispatchToProps)(Address); diff --git a/src/screens/DeliveryForm/Address/index.js b/src/screens/DeliveryForm/Address/index.js index d4547fe..af14a2f 100644 --- a/src/screens/DeliveryForm/Address/index.js +++ b/src/screens/DeliveryForm/Address/index.js @@ -5,6 +5,7 @@ import { TouchableOpacity, Appearance, ActivityIndicator, + Platform } from "react-native"; import React from "react"; import { connect } from "react-redux"; @@ -16,7 +17,9 @@ import tw from "tailwind-rn"; import Colors from "../../../constants/Colors"; import fontSize from "../../../constants/fontSize"; -const Address = ({ addresses, update, userId, userAddressId, loading }) => { +const ios = Platform.OS === "ios"; + +const Address = ({ addresses, update, userId, userAddressId, loading, mobile }) => { const colorScheme = Appearance.getColorScheme(); const navigation = useNavigation(); @@ -36,7 +39,7 @@ const Address = ({ addresses, update, userId, userAddressId, loading }) => { : Colors.theme1[colorScheme].grayE3, }, tw( - `flex flex-row-reverse items-center w-full px-3 py-2 rounded-md mt-2` + `flex flex-row-reverse items-center w-full px-3 rounded-md mt-2 ${mobile ? "py-2" : "py-4"}` ), ]} onPress={() => @@ -67,13 +70,14 @@ const Address = ({ addresses, update, userId, userAddressId, loading }) => { ]} > )} - + @@ -111,7 +115,7 @@ const Address = ({ addresses, update, userId, userAddressId, loading }) => { @@ -119,8 +123,8 @@ const Address = ({ addresses, update, userId, userAddressId, loading }) => { @@ -135,6 +139,7 @@ const mapStateToProps = (state) => ({ userId: state.user.status?.id, userAddressId: state.userFactor.info?.userAddressId, loading: state.userFactor.loading, + mobile: state.publicApi.mobile }); const mapDispatchToProps = { diff --git a/src/screens/DeliveryForm/TransportDate/index.js b/src/screens/DeliveryForm/TransportDate/index.js index c4dfaba..2c15b25 100644 --- a/src/screens/DeliveryForm/TransportDate/index.js +++ b/src/screens/DeliveryForm/TransportDate/index.js @@ -1,4 +1,4 @@ -import { View, Text, Pressable, Appearance } from "react-native"; +import { View, Text, Pressable, Appearance, Platform } from "react-native"; import React, { useCallback, useState } from "react"; import { connect } from "react-redux"; @@ -7,7 +7,9 @@ import tw from "tailwind-rn"; import Colors from "../../../constants/Colors"; import fontSize from "../../../constants/fontSize"; -const TransportDate = ({ transportDate }) => { +const ios = Platform.OS === "ios"; + +const TransportDate = ({ transportDate, mobile }) => { const colorScheme = Appearance.getColorScheme(); const [activeDate, setActiveDate] = useState(transportDate?.times[0]); @@ -15,7 +17,7 @@ const TransportDate = ({ transportDate }) => { return ( { { ); }, []); return ( - + - زمان ارسال را انتخاب کنید + زمان ارسال را انتخاب کنید. {transportDate?.times?.map((time, index) => ( @@ -73,7 +76,9 @@ const TransportDate = ({ transportDate }) => { ); }; -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile +}); const mapDispatchToProps = {}; diff --git a/src/screens/DeliveryForm/TransportMethod/index.js b/src/screens/DeliveryForm/TransportMethod/index.js index 6030490..eaa9715 100644 --- a/src/screens/DeliveryForm/TransportMethod/index.js +++ b/src/screens/DeliveryForm/TransportMethod/index.js @@ -5,6 +5,7 @@ import { TouchableOpacity, Appearance, ActivityIndicator, + Platform } from "react-native"; import React, { useEffect, useCallback } from "react"; import { connect } from "react-redux"; @@ -17,6 +18,9 @@ import tw from "tailwind-rn"; import Colors from "../../../constants/Colors"; import fontSize from "../../../constants/fontSize"; + +const ios = Platform.OS === "ios"; + const TransportMethod = ({ list, getList, @@ -24,6 +28,7 @@ const TransportMethod = ({ factorInfo, userId, loading, + mobile }) => { const colorScheme = Appearance.getColorScheme(); @@ -36,7 +41,7 @@ const TransportMethod = ({ return ( + - لطفا یک روش ارسال انتخاب کنید + لطفا یک روش ارسال انتخاب کنید. {list?.map((method, index) => ( @@ -124,6 +130,7 @@ const mapStateToProps = (state) => ({ factorInfo: state.userFactor.info, userId: state.user.status?.id, loading: state.userFactor.loading, + mobile: state.publicApi.mobile }); const mapDispatchToProps = { diff --git a/src/screens/DeliveryForm/index.js b/src/screens/DeliveryForm/index.js index bf84424..5996473 100644 --- a/src/screens/DeliveryForm/index.js +++ b/src/screens/DeliveryForm/index.js @@ -87,7 +87,6 @@ const styles = StyleSheet.create({ paddingBottom: 100, }, container: { - width: Dimensions.get("window").width, backgroundColor: "white", flexDirection: "column", paddingVertical: 5, diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js index a7d2785..30a563e 100644 --- a/src/screens/Home/index.js +++ b/src/screens/Home/index.js @@ -34,7 +34,6 @@ const Home = ({ getUserProducts, mobile, }) => { - const [width, setWidth] = useState(Dimensions.get("window").width); const [position, setPosition] = useState("100%"); useEffect(() => { @@ -71,8 +70,7 @@ const Home = ({ setWidth(Dimensions.get("window").width)} + style={[styles.container]} > {!mobile && } {userProduct?.length > 0 && } @@ -91,6 +89,7 @@ const Home = ({ const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 100, + // flex : 1, // alignItems: "", }, container: { diff --git a/src/screens/OrderDetails/index.js b/src/screens/OrderDetails/index.js index 773a561..f951b4f 100644 --- a/src/screens/OrderDetails/index.js +++ b/src/screens/OrderDetails/index.js @@ -453,7 +453,6 @@ const styles = StyleSheet.create({ alignItems: "flex-end", }, container: { - width: width, backgroundColor: "white", flexDirection: "column", paddingVertical: 0, diff --git a/src/screens/OrdersFollowUp/components/Order.js b/src/screens/OrdersFollowUp/components/Order.js index 99ec937..cae6a5c 100644 --- a/src/screens/OrdersFollowUp/components/Order.js +++ b/src/screens/OrdersFollowUp/components/Order.js @@ -9,7 +9,8 @@ import { Appearance, } from "react-native"; import { useNavigation } from "@react-navigation/native"; -import Svg, { Path } from "react-native-svg" +import { connect } from "react-redux"; +import Svg, { Path } from "react-native-svg"; import _ from "lodash"; //style @@ -33,7 +34,7 @@ const status = { 2: "ارسال شده", }; -function Order({ order }) { +function Order({ order, mobile }) { const colorScheme = Appearance.getColorScheme(); const navigation = useNavigation(); return ( @@ -48,7 +49,11 @@ function Order({ order }) { > @@ -56,9 +61,9 @@ function Order({ order }) { style={[ tw("font-medium"), { - fontSize: fontSize.base, + fontSize: mobile ? fontSize.base : fontSize.xl, color: Colors.theme1[colorScheme].green79, - fontFamily: "regular", + fontFamily: mobile ? "regular" : "demi", }, ]} > @@ -70,8 +75,8 @@ function Order({ order }) { tw("font-light"), { color: Colors.theme1[colorScheme].green79, - fontSize: fontSize.sm, - fontFamily: "bold", + fontSize: mobile ? fontSize.sm : fontSize.lg, + fontFamily: mobile ? "bold" : "demi", }, ]} > @@ -95,7 +100,10 @@ function Order({ order }) { source={item} style={[ tw("rounded-md ml-1.5"), - { width: width / 5, height: (width / 5) * (4 / 3) }, + { + width: mobile ? width / 5 : width / 7, + height: (mobile ? width / 5 : width / 7) * (4 / 3), + }, ]} /> )) @@ -107,7 +115,10 @@ function Order({ order }) { source={item} style={[ tw("rounded-md ml-1.5"), - { width: width / 5, height: (width / 5) * (4 / 3) }, + { + width: mobile ? width / 5 : width / 7, + height: (mobile ? width / 5 : width / 7) * (4 / 3), + }, ]} /> ))} @@ -117,7 +128,7 @@ function Order({ order }) { style={[ tw("p-2 rounded-md text-center"), { - fontSize: fontSize.sm, + fontSize: mobile ? fontSize.sm : fontSize.lg, fontFamily: "bold", backgroundColor: "#F0FFF1", color: Colors.theme1[colorScheme].green79, @@ -133,7 +144,7 @@ function Order({ order }) { style={[ tw("my-3"), { - fontSize: fontSize.tiny, + fontSize: mobile ? fontSize.tiny : fontSize.xl, color: Colors.theme1[colorScheme].gray20, fontFamily: "bold", }, @@ -144,7 +155,9 @@ function Order({ order }) { navigation.navigate("Order")} style={[ - tw("rounded-md flex flex-row-reverse justify-center px-5 py-2"), + tw( + "rounded-md flex flex-row-reverse justify-center items-center px-5 py-2" + ), { borderWidth: 1, borderColor: Colors.theme1[colorScheme].greenCF, @@ -153,7 +166,7 @@ function Order({ order }) { > ({ + mobile: state.publicApi.mobile, +}); + +export default connect(mapStateToProps)(Order); + const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 50, @@ -207,5 +227,3 @@ const styles = StyleSheet.create({ paddingHorizontal: 10, }, }); - -export default Order; diff --git a/src/screens/OrdersFollowUp/index.js b/src/screens/OrdersFollowUp/index.js index f072870..ea1c64d 100644 --- a/src/screens/OrdersFollowUp/index.js +++ b/src/screens/OrdersFollowUp/index.js @@ -60,7 +60,6 @@ const styles = StyleSheet.create({ alignItems: "flex-end", }, container: { - width: width, backgroundColor: "white", flexDirection: "column", paddingVertical: 0, diff --git a/src/screens/OrdersFollowUp/left.svg b/src/screens/OrdersFollowUp/left.svg deleted file mode 100644 index 744ff08..0000000 --- a/src/screens/OrdersFollowUp/left.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/screens/Product/components/Book.js b/src/screens/Product/components/Book.js index b0ee0d5..70301ca 100644 --- a/src/screens/Product/components/Book.js +++ b/src/screens/Product/components/Book.js @@ -7,7 +7,7 @@ import { TouchableOpacity, Dimensions, Appearance, - Pressable + Pressable, } from "react-native"; import { useNavigation } from "@react-navigation/native"; import { product, userProduct } from "../../../redux/actions"; @@ -31,7 +31,7 @@ import Colors from "../../../constants/Colors"; const { height } = Dimensions.get("window"); -function Book({ book, grades, pushToCart, userId, loading }) { +function Book({ book, grades, pushToCart, userId, loading, mobile }) { const colorScheme = Appearance.getColorScheme(); const navigation = useNavigation(); const [type, setType] = useState(1); @@ -46,6 +46,7 @@ function Book({ book, grades, pushToCart, userId, loading }) { }, [type]); return ( + {!mobile && } {pageLoading && ( } setImageSlider(true)} > {book.product[type].name} @@ -95,7 +99,7 @@ function Book({ book, grades, pushToCart, userId, loading }) { @@ -118,9 +122,9 @@ function Book({ book, grades, pushToCart, userId, loading }) { @@ -130,7 +134,7 @@ function Book({ book, grades, pushToCart, userId, loading }) { @@ -150,7 +154,7 @@ function Book({ book, grades, pushToCart, userId, loading }) { @@ -175,8 +179,8 @@ function Book({ book, grades, pushToCart, userId, loading }) { tw("w-full text-right"), { color: Colors.theme1[colorScheme].green79, - fontSize: fontSize.tiny, - fontFamily: "bold", + fontSize: mobile ? fontSize.tiny : fontSize.lg, + fontFamily: "demi", }, ]} > @@ -251,7 +255,7 @@ function Book({ book, grades, pushToCart, userId, loading }) { tw(""), { color: Colors.theme1[colorScheme].green79, - fontSize: fontSize.base, + fontSize: mobile ? fontSize.base : fontSize.lg, fontFamily: "bold", }, ]} @@ -310,6 +314,7 @@ function Book({ book, grades, pushToCart, userId, loading }) { const mapStateToProps = (state) => ({ userId: state.user.status?.id, loading: state.userProduct.loading, + mobile: state.publicApi.mobile, }); const mapDispatchToProps = { diff --git a/src/screens/Product/components/Description.js b/src/screens/Product/components/Description.js index d44be14..3b12fa8 100644 --- a/src/screens/Product/components/Description.js +++ b/src/screens/Product/components/Description.js @@ -1,31 +1,44 @@ -import React from 'react'; -import {View, Text, Dimensions, Image} from 'react-native'; -import tw from 'tailwind-react-native-classnames'; -import fontSize from '../../../constants/fontSize'; -import {Entypo} from '@expo/vector-icons'; +import React from "react"; +import { View, Text, Dimensions } from "react-native"; +import tw from "tailwind-rn"; +import fontSize from "../../../constants/fontSize"; +import { Entypo } from "@expo/vector-icons"; -const width = Dimensions.get('window').width; -const height = Dimensions.get('window').height; +const width = Dimensions.get("window").width; +const height = Dimensions.get("window").height; -export default function Description({description}) { +export default function Description({ description }) { return ( - + + style={tw("flex flex-row-reverse justify-between items-center mb-2")} + > + { fontSize: fontSize.sm, color: "#275077", fontFamily: "regular" }, + tw(""), + ]} + > توضیحات + tw("w-full text-right mt-2"), + { + fontSize: fontSize.sm, + color: "#323232bb", + lineHeight: 20, + fontFamily: "light", + }, + ]} + > {description} diff --git a/src/screens/Product/components/LinkBox.js b/src/screens/Product/components/LinkBox.js index 58cc0cd..ff03e63 100644 --- a/src/screens/Product/components/LinkBox.js +++ b/src/screens/Product/components/LinkBox.js @@ -1,14 +1,15 @@ import React, { useRef } from "react"; import { Text, TouchableOpacity, Appearance } from "react-native"; +import { connect } from "react-redux"; import RBSheet from "react-native-raw-bottom-sheet"; import { Entypo } from "@expo/vector-icons"; //style -import tw from "tailwind-react-native-classnames"; +import tw from "tailwind-rn"; import fontSize from "../../../constants/fontSize"; import Colors from "../../../constants/Colors"; -export default function Description({ title, component, height }) { +function Description({ title, component, height, mobile }) { const colorScheme = Appearance.getColorScheme(); const refRBSheet = useRef(); return ( @@ -16,23 +17,23 @@ export default function Description({ title, component, height }) { refRBSheet.current.open()} style={[ - tw.style( - "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 py-3" + tw( + `flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 ${mobile ? "py-3" : "py-4"}` ), { backgroundColor: Colors.theme1[colorScheme].greenCF, - // borderWidth : 1, + // borderWidth : 1, }, ]} > {title} @@ -50,7 +51,7 @@ export default function Description({ title, component, height }) { backgroundColor: "#00000077", }, container: { - padding : 0, + padding: 0, borderTopLeftRadius: 30, borderTopRightRadius: 30, }, @@ -59,8 +60,14 @@ export default function Description({ title, component, height }) { }, }} > - {component} + {component} ); } + +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile, +}); + +export default connect(mapStateToProps)(Description); diff --git a/src/screens/Product/components/Rates.js b/src/screens/Product/components/Rates.js index 0b6562e..199b8a5 100644 --- a/src/screens/Product/components/Rates.js +++ b/src/screens/Product/components/Rates.js @@ -1,29 +1,37 @@ -import React from 'react'; -import {View, Text, Dimensions} from 'react-native'; -import tw from 'tailwind-react-native-classnames'; -import fontSize from '../../../constants/fontSize'; +import React from "react"; +import { View, Text, Dimensions } from "react-native"; +import tw from "tailwind-rn"; +import fontSize from "../../../constants/fontSize"; -const width = Dimensions.get('window').width; +const width = Dimensions.get("window").width; -export default function Rates({rates}) { +export default function Rates({ rates }) { return ( - + + tw("flex flex-col items-center justify-center"), + { width: "25%" }, + ]} + > + { fontSize: fontSize.xl6, color: "#05335F", fontFamily: "bold" }, + ]} + > {rates.mid} - - {'از' + ' ' + rates.allRates + ' ' + 'نفر'} + + {"از" + " " + rates.allRates + " " + "نفر"} - + {rates.fields.map((field, index) => ( ))} @@ -32,30 +40,41 @@ export default function Rates({rates}) { ); } -const Progress = ({data}) => { +const Progress = ({ data }) => { return ( - - {data.name} + + + {data.name} + + tw("rounded-md ml-2 flex-1"), + { height: 6, backgroundColor: "#D3E9FF" }, + ]} + > + tw("h-full rounded-md my-auto"), + { width: data.value + "%", backgroundColor: "#2B8DEB" }, + ]} + > - {data.value + '%'} + textAlign: "center", + color: "#05335F", + }} + > + {data.value + "%"} ); diff --git a/src/screens/Product/index.js b/src/screens/Product/index.js index bc0536b..9e34078 100644 --- a/src/screens/Product/index.js +++ b/src/screens/Product/index.js @@ -61,7 +61,6 @@ const styles = StyleSheet.create({ paddingBottom: 100, }, container: { - width: Dimensions.get("window").width, backgroundColor: "white", flexDirection: "column", paddingVertical: 5, diff --git a/src/screens/Products/components/Main.js b/src/screens/Products/components/Main.js index 5bbf64b..8d1e496 100644 --- a/src/screens/Products/components/Main.js +++ b/src/screens/Products/components/Main.js @@ -17,10 +17,10 @@ import tw from "tailwind-rn"; import Colors from "../../../constants/Colors"; import fontSize from "../../../constants/fontSize"; -const width = Dimensions.get("window").width; const ios = Platform.OS === "ios"; -const Main = ({ books, filterOptions, grades }) => { +const Main = ({ books, filterOptions, grades, mobile }) => { + const [width, setWidth] = React.useState(Dimensions.get("window").width); const colorScheme = Appearance.getColorScheme(); const navigation = useNavigation(); const [filterLoading, setFilterLoading] = React.useState(false); @@ -73,9 +73,16 @@ const Main = ({ books, filterOptions, grades }) => { return filterOptions.productType === "دوره ویدئویی" ? bySearchFilter?.map((product, index) => ( navigation.navigate("Product")} + onPress={() => navigation.navigate("Video", { id: product.id })} > { }} style={[ tw("w-full rounded-md"), - { height: ((width - 25) * 9) / 16 }, + { height: ((mobile ? width - 25 : width / 2.2) * 9) / 16 }, ]} /> @@ -134,7 +141,7 @@ const Main = ({ books, filterOptions, grades }) => { key={product?.product[0]?.id} style={[ { - width: width / 2 - 25, + width: mobile ? width / 2 - 25 : width / 3.2, marginBottom: 15, borderWidth: 1, borderColor: Colors.theme1[colorScheme].grayE3, @@ -155,7 +162,10 @@ const Main = ({ books, filterOptions, grades }) => { }} style={[ tw("w-full rounded-md"), - { height: ((width / 2 - 25) * 16) / 14 }, + { + height: + ((mobile ? width / 2 - 25 : width / 3.2) * 16) / 14, + }, ]} /> { key={product?.product[1]?.id} style={[ { - width: width / 2 - 25, + width: mobile ? width / 2 - 25 : width / 3.2, marginBottom: 15, borderWidth: 1, borderColor: Colors.theme1[colorScheme].grayE3, @@ -240,7 +250,10 @@ const Main = ({ books, filterOptions, grades }) => { }} style={[ tw("w-full rounded-md"), - { height: ((width / 2 - 25) * 16) / 14 }, + { + height: + ((mobile ? width / 2 - 25 : width / 3.2) * 16) / 14, + }, ]} /> { return ( setWidth(Dimensions.get("window").width)} style={[ tw( - "flex w-full px-4 flex-row flex-wrap justify-between bg-white pb-20" + `flex w-full px-4 flex-wrap justify-between bg-white pb-20 ${ + ios ? "flex-row-reverse" : "flex-row" + }` ), ]} > @@ -324,6 +340,7 @@ const Main = ({ books, filterOptions, grades }) => { const mapStateToProps = (state) => ({ filterOptions: state.book.filterOptions, + mobile: state.publicApi.mobile, }); const mapDispatchToProps = {}; diff --git a/src/screens/Profile/components/List.js b/src/screens/Profile/components/List.js index 5a901ea..6f4a7d1 100644 --- a/src/screens/Profile/components/List.js +++ b/src/screens/Profile/components/List.js @@ -5,7 +5,7 @@ import { Appearance, Platform, TouchableOpacity, - Dimensions + Dimensions, } from "react-native"; import React from "react"; import { connect } from "react-redux"; @@ -20,9 +20,9 @@ import fontSize from "../../../constants/fontSize"; import Colors from "../../../constants/Colors"; const ios = Platform.OS === "ios"; -const {height} = Dimensions.get("window"); +const { height } = Dimensions.get("window"); -const List = ({}) => { +const List = ({ mobile }) => { const navigation = useNavigation(); const colorScheme = Appearance.getColorScheme(); @@ -162,7 +162,7 @@ const List = ({}) => { ), name: "لیست علاقه‌مندی‌ها", - onPress: () => navigation.push('ProfileBookmark'), + onPress: () => navigation.push("ProfileBookmark"), }, { icon: ( @@ -201,7 +201,11 @@ const List = ({}) => { ]; return ( - + {pages.map((page, index) => ( { ]} onPress={() => page.onPress()} > - + {page.icon} {page.name} @@ -249,6 +250,8 @@ const List = ({}) => { ); }; -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile, +}); export default connect(mapStateToProps)(List); diff --git a/src/screens/Profile/components/ProfileAddress/index.js b/src/screens/Profile/components/ProfileAddress/index.js index ec2ea01..18249c8 100644 --- a/src/screens/Profile/components/ProfileAddress/index.js +++ b/src/screens/Profile/components/ProfileAddress/index.js @@ -28,6 +28,7 @@ import Colors from "../../../../constants/Colors"; import fontSize from "../../../../constants/fontSize"; const { height, width } = Dimensions.get("window"); +const ios = Platform.OS === "ios"; const ProfileAddress = ({ addresses, @@ -38,12 +39,12 @@ const ProfileAddress = ({ getFactorInfo, loading, closeBottomSheet, + mobile, }) => { const colorScheme = Appearance.getColorScheme(); const navigation = useNavigation(); - + const [height, setHeight] = React.useState(Dimensions.get("window").height); const Location = ({ address, active }) => { - console.log(address); return ( @@ -125,10 +127,11 @@ const ProfileAddress = ({ @@ -137,10 +140,11 @@ const ProfileAddress = ({ @@ -149,10 +153,11 @@ const ProfileAddress = ({ @@ -218,7 +223,8 @@ const ProfileAddress = ({ /> setHeight(Dimensions.get("window").height)} > @@ -257,11 +263,11 @@ const ProfileAddress = ({ + @@ -277,6 +283,7 @@ const mapStateToProps = (state) => ({ userAddressId: state.userFactor.info?.userAddressId, loading: state.userFactor.loading, addresses: state.userAddress.list, + mobile: state.publicApi.mobile, }); const mapDispatchToProps = { @@ -291,10 +298,8 @@ const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 100, position: "relative", - minHeight: height - 150, }, container: { - width: Dimensions.get("window").width, backgroundColor: "white", flexDirection: "column", paddingVertical: 0, diff --git a/src/screens/Profile/components/ProfileBookmark/index.js b/src/screens/Profile/components/ProfileBookmark/index.js index 24a801a..4677b3a 100644 --- a/src/screens/Profile/components/ProfileBookmark/index.js +++ b/src/screens/Profile/components/ProfileBookmark/index.js @@ -10,11 +10,12 @@ import { Dimensions, StatusBar, Image, + mobile, } from "react-native"; import React from "react"; import { connect } from "react-redux"; import { useNavigation } from "@react-navigation/native"; -import Svg, { Path } from "react-native-svg" +import Svg, { Path } from "react-native-svg"; //components import Navbar from "../../../../components/Navbar"; @@ -28,6 +29,7 @@ import fontSize from "../../../../constants/fontSize"; import bookImage from "../../..//OrdersFollowUp/assets/b1.png"; const { height, width } = Dimensions.get("window"); +const ios = Platform.OS === "ios"; const ProfileBookmark = ({ bookmarkList }) => { const colorScheme = Appearance.getColorScheme(); @@ -48,13 +50,13 @@ const ProfileBookmark = ({ bookmarkList }) => { - + { const mapStateToProps = (state) => ({ loading: state.userFactor.loading, + mobile: state.publicApi.mobile, }); const mapDispatchToProps = {}; @@ -149,7 +152,6 @@ const styles = StyleSheet.create({ position: "relative", }, container: { - width: Dimensions.get("window").width, backgroundColor: "white", flexDirection: "column", paddingVertical: 0, diff --git a/src/screens/Profile/components/User.js b/src/screens/Profile/components/User.js index 7cec771..a97275d 100644 --- a/src/screens/Profile/components/User.js +++ b/src/screens/Profile/components/User.js @@ -17,7 +17,7 @@ import Colors from "../../../constants/Colors"; const ios = Platform.OS === "ios"; -const User = ({ user }) => { +const User = ({ user, mobile }) => { const colorScheme = Appearance.getColorScheme(); const [dropdown, setDropdown] = React.useState(true); return ( @@ -32,20 +32,28 @@ const User = ({ user }) => { {user?.picFileIds ? ( ) : ( )} { {user?.cellphone} @@ -79,7 +87,11 @@ const User = ({ user }) => { {dropdown && ( { {user?.picFileIds ? ( ) : ( { )} { > { const mapStateToProps = (state) => ({ user: state.user.status, + mobile: state.publicApi.mobile, }); export default connect(mapStateToProps)(User); diff --git a/src/screens/Profile/index.js b/src/screens/Profile/index.js index dce652d..e31a2be 100644 --- a/src/screens/Profile/index.js +++ b/src/screens/Profile/index.js @@ -21,13 +21,6 @@ import User from "./components/User"; import Trophy from "./components/Trophy"; import List from "./components/List"; -//style -import fontSize from "../../constants/fontSize"; -import Colors from "../../constants/Colors"; -import tw from "tailwind-rn"; - -const { width, height } = Dimensions.get("window"); - function Profile({}) { const navigation = useNavigation(); const colorScheme = Appearance.getColorScheme(); @@ -82,10 +75,8 @@ const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 100, position: "relative", - minHeight: height - 100 }, container: { - width: Dimensions.get("window").width, backgroundColor: "white", flexDirection: "column", paddingVertical: 5, diff --git a/src/screens/ShoppingCart/components/Product.js b/src/screens/ShoppingCart/components/Product.js index ac5ae8e..ce29017 100644 --- a/src/screens/ShoppingCart/components/Product.js +++ b/src/screens/ShoppingCart/components/Product.js @@ -7,10 +7,11 @@ import { Pressable, Appearance, ActivityIndicator, + Platform, } from "react-native"; import { connect } from "react-redux"; import { userProduct } from "../../../redux/actions"; -import separate from '../../../utils/separate'; +import separate from "../../../utils/separate"; import { AntDesign } from "@expo/vector-icons"; //style @@ -19,13 +20,16 @@ import fontSize from "../../../constants/fontSize"; import tw from "tailwind-rn"; const width = Dimensions.get("window").width; +const ios = Platform.OS === "ios"; -function Product({ product, grades, pushToCart, loading }) { +function Product({ product, grades, pushToCart, loading, mobile }) { const colorScheme = Appearance.getColorScheme(); return ( - + - + {product.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"} - - + + {" " + "تومان"} - + {separate(product?.product?.price)} - + pushToCart( @@ -101,7 +136,11 @@ function Product({ product, grades, pushToCart, loading }) { } /> - + pushToCart({ @@ -112,7 +151,7 @@ function Product({ product, grades, pushToCart, loading }) { } style={[ tw( - "rounded-md py-0 px-2 flex flex-row justify-center items-center border" + `rounded-md py-0 flex flex-row justify-center items-center border ${mobile ? 'px-2' : "px-3"}` ), { borderColor: Colors.theme1[colorScheme].greenCF, @@ -121,7 +160,7 @@ function Product({ product, grades, pushToCart, loading }) { > - + {" " + "تومان"} - + {separate(product.product.price * product.count)} @@ -194,6 +233,7 @@ function Product({ product, grades, pushToCart, loading }) { const mapStateToProps = (state) => ({ grades: state.publicApi.grades, + mobile: state.publicApi.mobile, }); const mapDispatchToProps = { diff --git a/src/screens/ShoppingCart/index.js b/src/screens/ShoppingCart/index.js index 3260c1c..9565d7c 100644 --- a/src/screens/ShoppingCart/index.js +++ b/src/screens/ShoppingCart/index.js @@ -267,7 +267,6 @@ const styles = StyleSheet.create({ position: "relative", }, container: { - width: Dimensions.get("window").width, backgroundColor: "white", flexDirection: "column", paddingVertical: 5, diff --git a/src/screens/Video/components/Season.js b/src/screens/Video/components/Season.js index 17ce7b0..7292935 100644 --- a/src/screens/Video/components/Season.js +++ b/src/screens/Video/components/Season.js @@ -26,7 +26,7 @@ const Season = ({ activeSeason, realSeasons, seasonName, - id, + mobile }) => { // const [selectedSeason, setSelectedSeason] = useState(null); const colorScheme = Appearance.getColorScheme(); @@ -45,7 +45,7 @@ const Season = ({ @@ -53,7 +53,7 @@ const Season = ({ style={[ { fontFamily: "bold", - fontSize: fontSize.base, + fontSize: mobile ? fontSize.base : fontSize.lg, color: Colors.theme1[colorScheme].green79, }, ]} @@ -65,7 +65,7 @@ const Season = ({ style={[ { fontFamily: "regular", - fontSize: fontSize.base, + fontSize: mobile ? fontSize.base : fontSize.lg, color: Colors.theme1[colorScheme].green79, }, ]} @@ -74,12 +74,12 @@ const Season = ({ @@ -131,7 +131,7 @@ const Season = ({ style={[ { fontFamily: "bold", - fontSize: fontSize.base, + fontSize: mobile ? fontSize.base : fontSize.xl, color: Colors.theme1[colorScheme].green79, }, ]} @@ -162,6 +162,7 @@ const mapStateToProps = (state) => ({ activeSeason: state.publicApi.activeCategory, realSeasons: state.publicApi.bookInfo?.categories, vodDuration: state.publicApi.bookInfo?.vodDuration, + mobile: state.publicApi.mobile }); const mapDispatchToProps = { diff --git a/src/screens/Video/index.js b/src/screens/Video/index.js index 8d77769..257603d 100644 --- a/src/screens/Video/index.js +++ b/src/screens/Video/index.js @@ -39,6 +39,7 @@ function Product({ userId, pushToCart, loading, + mobile, }) { const colorScheme = Appearance.getColorScheme(); const [position, setPosition] = useState("100%"); @@ -51,13 +52,11 @@ function Product({ LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setPosition(position === "100%" ? "0%" : "100%"); }; - return ( - + {!mobile && } + @@ -89,7 +89,7 @@ function Product({ source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }} style={[ tw("rounded-md h-full rounded-md ml-2"), - { width: ((height / 5) * 3) / 4, height: height / 5 }, + { height: mobile ? 160 : 300, width: mobile ? 110 : 210 }, ]} /> @@ -97,17 +97,17 @@ function Product({ style={{ marginTop: 5, color: Colors.theme1[colorScheme].green79, - fontSize: fontSize.xl, + fontSize: mobile ? fontSize.xl : fontSize.xl3, marginBottom: 0, - fontFamily: "bold", + fontFamily: "demi", }} > - {"دوره ویدئویی" + "" + book?.product[2]?.name} + {book?.name} ({ isLogin: state.user.status, userId: state.user.status?.id, loading: state.userProduct.loading, + mobile: state.publicApi.mobile, }); const mapDispatchToProps = { diff --git a/src/screens/VideoDisplay/components/Season/index.js b/src/screens/VideoDisplay/components/Season/index.js index 8fd4095..fc5b755 100644 --- a/src/screens/VideoDisplay/components/Season/index.js +++ b/src/screens/VideoDisplay/components/Season/index.js @@ -11,7 +11,7 @@ import Colors from "../../../../constants/Colors"; const { width } = Dimensions.get("window"); -const Season = ({ season, activeUnit, name, setVideoActive }) => { +const Season = ({ season, activeUnit, name, setVideoActive, mobile }) => { const colorScheme = Appearance.getColorScheme(); const navigation = useNavigation(); const duration = (value) => { @@ -38,7 +38,7 @@ const Season = ({ season, activeUnit, name, setVideoActive }) => { return ( { style={[ { fontFamily: "bold", - fontSize: fontSize.base, + fontSize: mobile ? fontSize.base : fontSize.xl, color: - activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79, + activeUnit === unit + ? "white" + : Colors.theme1[colorScheme].green79, }, ]} > @@ -76,10 +78,16 @@ const Season = ({ season, activeUnit, name, setVideoActive }) => { style={[ { fontFamily: "bold", - fontSize: fontSize.base, - color: activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79, + fontSize: mobile ? fontSize.base : fontSize.xl, + color: + activeUnit === unit + ? "white" + : Colors.theme1[colorScheme].green79, borderRightWidth: 1, - borderColor: activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79, + borderColor: + activeUnit === unit + ? "white" + : Colors.theme1[colorScheme].green79, paddingRight: 8, }, ]} @@ -89,18 +97,19 @@ const Season = ({ season, activeUnit, name, setVideoActive }) => { selectVideo()} > نمایش @@ -124,6 +133,7 @@ const mapStateToProps = (state) => ({ realSeasons: state.publicApi.bookInfo?.categories, vods: state.publicApi.bookSection?.vods, userid: state.user.status?.id, + mobile: state.publicApi.mobile, }); const mapDispatchToProps = { diff --git a/src/screens/VideoDisplay/index.js b/src/screens/VideoDisplay/index.js index 295edc7..0bc4790 100644 --- a/src/screens/VideoDisplay/index.js +++ b/src/screens/VideoDisplay/index.js @@ -26,12 +26,12 @@ import tw from "tailwind-rn"; import fontSize from "../../constants/fontSize"; import Colors from "../../constants/Colors"; -const { width } = Dimensions.get("window"); const ios = Platform.OS === "ios"; -function VideoDisplay({ route }) { +function VideoDisplay({ route, mobile }) { const colorScheme = Appearance.getColorScheme(); const video = React.useRef(null); + const [width, setWidth] = useState(Dimensions.get("window").width); const [status, setStatus] = React.useState({}); const [position, setPosition] = useState("100%"); @@ -75,7 +75,10 @@ function VideoDisplay({ route }) { setWidth(Dimensions.get("window").width)} > + {!mobile && } + - {'دوره ویدئویی' + ' ' + video?.name} + {"دوره ویدئویی" + " " + video?.name} @@ -89,7 +98,7 @@ function MostViewedVideo({ videos, grades }) { { color: Colors.theme1[colorScheme].gray20, fontFamily: "bold", - fontSize: fontSize.xl, + fontSize: mobile ? fontSize.xl : fontSize.xl3, }, ]} > @@ -99,9 +108,9 @@ function MostViewedVideo({ videos, grades }) { @@ -127,4 +136,8 @@ function MostViewedVideo({ videos, grades }) { ); } -export default MostViewedVideo; +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile, +}); + +export default connect(mapStateToProps)(MostViewedVideo); diff --git a/src/screens/Videos/components/NewestVideo.js b/src/screens/Videos/components/NewestVideo.js index b1be011..1c4abdc 100644 --- a/src/screens/Videos/components/NewestVideo.js +++ b/src/screens/Videos/components/NewestVideo.js @@ -6,8 +6,10 @@ import { Dimensions, Text, Appearance, + Platform, } from "react-native"; import { useNavigation } from "@react-navigation/native"; +import { connect } from "react-redux"; import separate from "../../../utils/separate"; //style @@ -16,10 +18,11 @@ import fontSize from "../../../constants/fontSize"; import Colors from "../../../constants/Colors"; const { width } = Dimensions.get("window"); +const ios = Platform.OS === "ios"; import Header from "../../Home/components/Header"; -const NewestVideo = ({ videos, grades }) => { +const NewestVideo = ({ videos, grades, mobile }) => { const colorScheme = Appearance.getColorScheme(); const navigation = useNavigation(); const Video = ({ video }) => { @@ -27,7 +30,7 @@ const NewestVideo = ({ videos, grades }) => { { source={{ uri: `https://dnvn.ir/api/v1/file/${video.fileIds}` }} style={[ tw("rounded-md"), - { width: "100%", height: ((width / 2.5) * 3) / 4 }, + { + width: "100%", + height: ((mobile ? width / 2.3 : width / 3.3) * 3) / 4, + }, ]} /> { style={{ color: Colors.theme1[colorScheme].gray20, fontFamily: "light", - fontSize: fontSize.tiny, + fontSize: mobile ? fontSize.tiny : fontSize.lg, marginTop: 5, }} > @@ -66,7 +72,13 @@ const NewestVideo = ({ videos, grades }) => { return (
- + {videos.map((video, index) => (