From b82579777a3b33a23a062f5d2ecb59e2d86194bc Mon Sep 17 00:00:00 2001 From: Daniil Chemerkin Date: Sat, 20 Jul 2024 21:06:15 +0000 Subject: [PATCH] Develop --- .../v1/components/Questionnaire/index.tsx | 6 +++++ .../Questionnaire/styles.module.css | 1 + .../ABDesign/v1/data/stepsQuestionary.tsx | 4 +++ .../v1/pages/AllRight/styles.module.css | 2 +- .../ABDesign/v1/pages/AlmostThere/index.tsx | 1 + .../v1/pages/AlmostThere/styles.module.css | 27 ++++++++++++++----- .../ABDesign/v1/pages/Both/styles.module.css | 1 + .../styles.module.css | 1 + .../v1/pages/LoadingInRelationship/index.tsx | 2 ++ .../v1/pages/NoBirthtime/styles.module.css | 1 + .../ABDesign/v1/pages/NotAlone/index.tsx | 1 + .../v1/pages/NotAlone/styles.module.css | 24 +++++++++++++---- .../pages/PartnerRightPlace/styles.module.css | 1 + .../v1/pages/PartnerThing/styles.module.css | 1 + .../PartnerTotallyNormal/styles.module.css | 1 + .../v1/pages/Problems/styles.module.css | 1 + .../pages/RelationshipAlmostThere/index.tsx | 1 + .../RelationshipAlmostThere/styles.module.css | 18 +++++++++++++ .../v1/pages/RelationshipZodiacInfo/index.tsx | 1 + .../RelationshipZodiacInfo/styles.module.css | 18 +++++++++++++ .../ABDesign/v1/pages/Satisfied/index.tsx | 13 ++++----- .../v1/pages/Satisfied/styles.module.css | 23 ++++++++++++---- .../v1/pages/SingleZodiacInfo/index.tsx | 3 ++- .../pages/SingleZodiacInfo/styles.module.css | 19 +++++++++---- .../v1/pages/WithHead/styles.module.css | 1 + .../v1/pages/WithHeart/styles.module.css | 1 + src/data.tsx | 19 ++++++------- src/hooks/touchAction/useTouchAction.ts | 11 ++++++++ src/index.css | 4 +++ 29 files changed, 168 insertions(+), 39 deletions(-) create mode 100644 src/hooks/touchAction/useTouchAction.ts diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx b/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx index 361fe8f..b703abe 100644 --- a/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx +++ b/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx @@ -16,6 +16,7 @@ import Stepper from "../Stepper"; import { useLottie } from "@/hooks/lottie/useLottie"; import { useMetricABFlags } from "@/services/metric/metricService.ts"; import { preloadImages } from "@/hooks/preload/images"; +import { useTouchAction } from "@/hooks/touchAction/useTouchAction"; function QuestionnairePage(): JSX.Element { const { question, stepId } = useParams(); @@ -36,6 +37,11 @@ function QuestionnairePage(): JSX.Element { useLottie({ preloadKey: currentQuestion?.lottie?.preloadKey, }); + useTouchAction( + currentQuestion?.answers?.length && currentQuestion?.answers?.length < 3 + ? "none" + : currentQuestion?.touchAction + ); useEffect(() => { if (currentQuestion?.preloadImages?.length) { diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css b/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css index e8f06ca..f48c0b5 100644 --- a/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css +++ b/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css @@ -13,6 +13,7 @@ background-repeat: no-repeat; color: #fff; padding-top: 26px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx b/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx index b3c2f68..22093f8 100644 --- a/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx +++ b/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx @@ -188,6 +188,7 @@ export const stepsQuestionary: IStep[] = [ id: "birthdate", question: "What's your date of birth?", preloadImages: ["/single-zodiac-info.webp"], + touchAction: "none", answersElement: , navigateToUrl: routes.client.singleZodiacInfoV1(), }, @@ -226,6 +227,7 @@ export const stepsQuestionary: IStep[] = [ question: "Where were you born?", description: "This determines the time zone at the place of your birth.", + touchAction: "none", answersElement: , backgroundImage: "/birthPlace.webp", backgroundColor: "#0000004d", @@ -544,6 +546,7 @@ export const stepsQuestionary: IStep[] = [ { id: "partnerBirthdate", question: "What’s your partner’s date of birth?", + touchAction: "none", answersElement: , }, // TODO: add compatibility page @@ -575,6 +578,7 @@ export const stepsQuestionary: IStep[] = [ { id: "partnerBirthPlace", question: "Where was your partner born?", + touchAction: "none", description: "If you don’t know the exact place of birth just type in the country of birth.", answersElement: , diff --git a/src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css b/src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css index f00c543..9a10aca 100644 --- a/src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css @@ -11,9 +11,9 @@ background-position-x: center; background-size: cover; color: #fff; - padding-top: 64px; background-color: #0F1323; padding-top: 32px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx index 1fdef86..893aa75 100644 --- a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx @@ -39,6 +39,7 @@ function AlmostTherePage() { return (
+
* { + z-index: 1; +} + +.background_wrap { + z-index: 0; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-image: url("/almost-there.webp"); background-position-y: top; background-position-x: center; background-size: contain; background-repeat: no-repeat; - color: #fff; - padding-top: 64px; - background-color: #0F1323; - padding-top: 32px; - background-image: url("/almost-there.webp"); - width: 100%; - max-width: 460px; } .header-title { diff --git a/src/components/pages/ABDesign/v1/pages/Both/styles.module.css b/src/components/pages/ABDesign/v1/pages/Both/styles.module.css index de9eb2a..a4f57fc 100644 --- a/src/components/pages/ABDesign/v1/pages/Both/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/Both/styles.module.css @@ -12,6 +12,7 @@ background-size: cover; color: #fff; padding-top: 32px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/styles.module.css b/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/styles.module.css index a73ec70..f5429c3 100644 --- a/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/styles.module.css @@ -9,6 +9,7 @@ background-repeat: no-repeat; color: #fff; padding: 33px 16px; + padding-bottom: calc(0dvh + 64px); background-color: #171717; width: 100%; max-width: 460px; diff --git a/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx b/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx index b88bd18..8b7966d 100644 --- a/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx @@ -13,6 +13,7 @@ import BackgroundTopBlob from "../../ui/BackgroundTopBlob"; import Header from "../../components/Header"; import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; import { usePreloadImages } from "@/hooks/preload/images"; +import { useTouchAction } from "@/hooks/touchAction/useTouchAction"; function LoadingInRelationshipPage() { const navigate = useNavigate(); @@ -51,6 +52,7 @@ function LoadingInRelationshipPage() { "/crystal_ball.webp", "/technologist.webp", ]); + useTouchAction("none"); useLottie({ preloadKey: ELottieKeys.key, diff --git a/src/components/pages/ABDesign/v1/pages/NoBirthtime/styles.module.css b/src/components/pages/ABDesign/v1/pages/NoBirthtime/styles.module.css index ec2a81c..9e274ed 100644 --- a/src/components/pages/ABDesign/v1/pages/NoBirthtime/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/NoBirthtime/styles.module.css @@ -9,6 +9,7 @@ background: #0F1323; color: #fff; padding-top: 32px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx b/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx index f6c1db9..ac002e2 100644 --- a/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx @@ -29,6 +29,7 @@ function NotAlonePage() { return (
+
* { + z-index: 1; +} + +.background_wrap { + z-index: 0; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-size: cover; + background-image: url("/DeWatermark2.webp"); + background-position-y: bottom; + background-position-x: center; + background-repeat: no-repeat; +} .header-title { color: #fff !important; diff --git a/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/styles.module.css b/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/styles.module.css index cf7815e..c1f5696 100644 --- a/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/styles.module.css @@ -12,6 +12,7 @@ background-size: cover; color: #fff; padding-top: 32px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/components/pages/ABDesign/v1/pages/PartnerThing/styles.module.css b/src/components/pages/ABDesign/v1/pages/PartnerThing/styles.module.css index b4cd587..fb89077 100644 --- a/src/components/pages/ABDesign/v1/pages/PartnerThing/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/PartnerThing/styles.module.css @@ -12,6 +12,7 @@ background-size: cover; color: #fff; padding-top: 32px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/components/pages/ABDesign/v1/pages/PartnerTotallyNormal/styles.module.css b/src/components/pages/ABDesign/v1/pages/PartnerTotallyNormal/styles.module.css index 957c331..175f3db 100644 --- a/src/components/pages/ABDesign/v1/pages/PartnerTotallyNormal/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/PartnerTotallyNormal/styles.module.css @@ -12,6 +12,7 @@ background-size: cover; color: #fff; padding-top: 32px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/components/pages/ABDesign/v1/pages/Problems/styles.module.css b/src/components/pages/ABDesign/v1/pages/Problems/styles.module.css index c172e99..bc5fbc4 100644 --- a/src/components/pages/ABDesign/v1/pages/Problems/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/Problems/styles.module.css @@ -12,6 +12,7 @@ background-repeat: no-repeat; color: #fff; padding-top: 32px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx index 1be54ad..52304f3 100644 --- a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx @@ -25,6 +25,7 @@ function RelationshipAlmostTherePage() { return (
+
* { + z-index: 1; +} + +.background_wrap { + z-index: 0; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-image: url("/almost-there.webp"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + .title { font-size: 28px; line-height: auto; diff --git a/src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/index.tsx b/src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/index.tsx index 11ba9ba..495d73a 100644 --- a/src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/index.tsx @@ -55,6 +55,7 @@ function RelationshipZodiacInfoPage() { return (
+
* { + z-index: 1; +} + +.background_wrap { + z-index: 0; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-size: cover; + background-image: url("/single-zodiac-info.webp"); + background-position: center; + background-repeat: no-repeat; +} + .image-container { display: grid; align-items: center; diff --git a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx index 96033d2..2b4c90e 100644 --- a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx @@ -39,12 +39,13 @@ function Satisfied() { }; return ( -
+
+
* { + z-index: 1; +} + +.background_wrap { + z-index: 0; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-image: url(/satisfied-yes.webp); + background-position-y: top; + background-position-x: center; + background-repeat: no-repeat; + background-size: contain; +} + .title { font-size: 27px; line-height: 125%; diff --git a/src/components/pages/ABDesign/v1/pages/SingleZodiacInfo/index.tsx b/src/components/pages/ABDesign/v1/pages/SingleZodiacInfo/index.tsx index 8b4a402..38cada5 100644 --- a/src/components/pages/ABDesign/v1/pages/SingleZodiacInfo/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/SingleZodiacInfo/index.tsx @@ -15,7 +15,7 @@ function SingleZodiacInfoPage() { const birthdate = useSelector(selectors.selectQuestionnaire).birthdate; const gender = useSelector(selectors.selectQuestionnaire).gender; const zodiac = getZodiacSignByDate(birthdate); - const zodiacInfo = zodiacSignsInfo[gender as keyof IZodicSignsInfo].find( + const zodiacInfo = zodiacSignsInfo[gender as keyof IZodicSignsInfo]?.find( (sign) => sign.name === zodiac ); @@ -27,6 +27,7 @@ function SingleZodiacInfoPage() { return (
+
* { z-index: 1; } + +.background_wrap { + z-index: 0; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-size: cover; + background-image: url("/single-zodiac-info.webp"); + background-position: center; + background-repeat: no-repeat; +} .image { height: 285px; diff --git a/src/components/pages/ABDesign/v1/pages/WithHead/styles.module.css b/src/components/pages/ABDesign/v1/pages/WithHead/styles.module.css index 18f0e16..f6ea178 100644 --- a/src/components/pages/ABDesign/v1/pages/WithHead/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/WithHead/styles.module.css @@ -12,6 +12,7 @@ background-size: cover; color: #fff; padding-top: 32px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/components/pages/ABDesign/v1/pages/WithHeart/styles.module.css b/src/components/pages/ABDesign/v1/pages/WithHeart/styles.module.css index 18f0e16..f6ea178 100644 --- a/src/components/pages/ABDesign/v1/pages/WithHeart/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/WithHeart/styles.module.css @@ -12,6 +12,7 @@ background-size: cover; color: #fff; padding-top: 32px; + padding-bottom: calc(0dvh + 64px); width: 100%; max-width: 460px; } diff --git a/src/data.tsx b/src/data.tsx index 6d2a0ce..7143479 100755 --- a/src/data.tsx +++ b/src/data.tsx @@ -55,6 +55,7 @@ export interface IStep { export interface IQuestion { id: string; question: string; + touchAction?: string; answers?: IAnswer[]; answersElement?: JSX.Element; answerClassName?: string; @@ -106,8 +107,8 @@ export const aboutUsAnswersA: IAnswer[] = [ id: "other", answer: "Other", icon: "", - } -] + }, +]; export const aboutUsAnswersB: IAnswer[] = [ { id: "forbes", @@ -128,8 +129,8 @@ export const aboutUsAnswersB: IAnswer[] = [ id: "other", answer: "Other", icon: "", - } -] + }, +]; export const aboutUsAnswersNormal: IAnswer[] = [ { @@ -210,12 +211,12 @@ export const aboutUsAnswersNormal: IAnswer[] = [ ]; export const aboutUsAnswers: { - [key: string]: IAnswer[] + [key: string]: IAnswer[]; } = { - 'aboutUsAnswersA': aboutUsAnswersNormal, - 'aboutUsAnswersB': aboutUsAnswersB, - 'aboutUsAnswersNormal': aboutUsAnswersA -} + aboutUsAnswersA: aboutUsAnswersNormal, + aboutUsAnswersB: aboutUsAnswersB, + aboutUsAnswersNormal: aboutUsAnswersA, +}; const currentlyAffectingAnswers: IAnswer[] = [ { diff --git a/src/hooks/touchAction/useTouchAction.ts b/src/hooks/touchAction/useTouchAction.ts new file mode 100644 index 0000000..4f3a8b3 --- /dev/null +++ b/src/hooks/touchAction/useTouchAction.ts @@ -0,0 +1,11 @@ +import { useEffect } from "react" + + +export const useTouchAction = (touchAction = 'pan-y') => { + useEffect(() => { + document.body.style.touchAction = touchAction + return () => { + document.body.style.touchAction = 'pan-y' + } + }, [touchAction]) +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 1d033b7..3cfdfc3 100644 --- a/src/index.css +++ b/src/index.css @@ -255,4 +255,8 @@ html { input, textarea { font-size: 16px !important; +} + +html, body { + touch-action: pan-y; } \ No newline at end of file