From 1bd93fa2d75e664910253c7315839afb467a54bb Mon Sep 17 00:00:00 2001 From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com> Date: Thu, 2 May 2024 12:20:01 +0400 Subject: [PATCH 1/4] fixed standart start page design --- .../StartPageViewPublication/StartPageDesktop.tsx | 2 +- .../StartPageViewPublication/StartPageMobile.tsx | 3 ++- .../StartPageViewPublication/index.tsx | 12 ++++++------ lib/utils/themes/generic.ts | 6 +++--- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx index 11061de..323ab8d 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx @@ -59,7 +59,7 @@ const StandartLayout = ({ flexDirection: "column", justifyContent: "space-between", alignItems: "flex-start", - p: "25px", + p: isTablet? "25px" : alignType === 'left'? "25px 25px 25px 35px" : "25px 35px 25px 25px" , overflowY: "auto", background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx index 166465f..0871df4 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx @@ -49,7 +49,7 @@ const StandartMobileLayout = ({ flexDirection: "column", justifyContent: "space-between", alignItems: "flex-start", - p: "25px", + p: "20px", height: "100%", overflowY: "auto", overflowX: "hidden", @@ -91,6 +91,7 @@ const StandartMobileLayout = ({ flexDirection: "column", justifyContent: "space-between", width: "100%", + marginTop: "30px" }} > {quizMainBlock} diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx index 0efafba..85f7b40 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx @@ -153,7 +153,7 @@ export const StartPageViewPublication = () => { sx={{ display: "flex", flexDirection: "column", - justifyContent: "center", + justifyContent: isMobile? "start" : "center", flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1, alignItems: settings.cfg.startpageType === "centered" @@ -170,7 +170,7 @@ export const StartPageViewPublication = () => { { sx={{ fontSize: "17px", fontWeight: "400", - margin: "16px 0 30px", + margin: "12px 0 30px", overflowWrap: "break-word", width: "100%", textAlign: @@ -242,7 +242,7 @@ export const StartPageViewPublication = () => { ? 0 : 1 : 0, - gap: "20px", + gap: isMobile? "30px" : "40px", alignItems: "flex-end", justifyContent: settings.cfg.startpageType === "centered" || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile? "center" : "space-between", width: "100%", @@ -307,7 +307,7 @@ export const StartPageViewPublication = () => { { fontSize: "12px", maxHeight: "120px", overflow: "auto", - marginTop: "5px", + marginTop: "10px", "&::-webkit-scrollbar": { width: 0 }, color: settings.cfg.startpageType === "expanded" diff --git a/lib/utils/themes/generic.ts b/lib/utils/themes/generic.ts index 33c01e1..77fb98b 100644 --- a/lib/utils/themes/generic.ts +++ b/lib/utils/themes/generic.ts @@ -1,5 +1,5 @@ -import { createTheme } from "@mui/material"; -import { fontFaces } from "./fontFace"; +import {createTheme} from "@mui/material"; +import {fontFaces} from "./fontFace"; declare module '@mui/material/Button' { interface ButtonPropsVariantOverrides { @@ -100,8 +100,8 @@ const theme = createTheme({ fontWeight: 500, }, fontFamily: [ - "Twemoji Country Flags", '"Lato"', + "Twemoji Country Flags", "-apple-system", "BlinkMacSystemFont", "Arial", From 03b2bf2cc64ae3e2004144cebfe2179b3bb366ac Mon Sep 17 00:00:00 2001 From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com> Date: Thu, 2 May 2024 14:39:09 +0400 Subject: [PATCH 2/4] fixed centered start page design --- .../StartPageViewPublication/index.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx index 85f7b40..37a2700 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx @@ -153,7 +153,7 @@ export const StartPageViewPublication = () => { sx={{ display: "flex", flexDirection: "column", - justifyContent: isMobile? "start" : "center", + justifyContent: settings.cfg.startpageType === "standard" && isMobile? "start" : "center", flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1, alignItems: settings.cfg.startpageType === "centered" @@ -244,29 +244,29 @@ export const StartPageViewPublication = () => { : 0, gap: isMobile? "30px" : "40px", alignItems: "flex-end", - justifyContent: settings.cfg.startpageType === "centered" || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile? "center" : "space-between", + justifyContent: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile || settings.cfg.startpageType === "centered" && isMobile ? "center" : "space-between", width: "100%", flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? isMobile ? "wrap-reverse" : "nowrap" : "wrap", }} > {settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile && quizHeaderBlock} {settings.cfg.info.site && ( {settings.cfg.info.site} @@ -278,6 +278,8 @@ export const StartPageViewPublication = () => { { { ) : ( { )} Date: Thu, 2 May 2024 17:13:41 +0400 Subject: [PATCH 3/4] fixed expanded design of start page --- .../StartPageDesktop.tsx | 5 +- .../StartPageViewPublication/index.tsx | 96 ++++++++++--------- 2 files changed, 52 insertions(+), 49 deletions(-) diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx index 323ab8d..0915a7d 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx @@ -28,7 +28,8 @@ const StandartLayout = ({ quizMainBlock, backgroundBlock, }: LayoutProps) => { - const isTablet = useRootContainerSize() < 1100; + const size = useRootContainerSize(); + const isTablet = size >= 700 && size < 1100; const { settings } = useQuizData(); return ( @@ -100,7 +101,7 @@ const ExpandedLayout = ({ { const { isMobileDevice } = useUADevice(); const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep); - const isMobile = useRootContainerSize() < 700; - const isTablet = useRootContainerSize() < 800; + const size = useRootContainerSize(); + const isMobile = size < 700; + const isTablet = size >= 700 && size < 1100; const handleCopyNumber = () => { navigator.clipboard.writeText(settings.cfg.info.phonenumber); @@ -123,6 +124,47 @@ export const StartPageViewPublication = () => { ) + const PenaBadge = ( + + + + Сделано на PenaQuiz + + ) + const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length; return ( @@ -135,10 +177,10 @@ export const StartPageViewPublication = () => { background: settings.cfg.startpageType === "expanded" ? settings.cfg.startpage.position === "left" - ? "linear-gradient(90deg,#272626,transparent)" + ? "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)" : settings.cfg.startpage.position === "center" - ? "linear-gradient(180deg,transparent,#272626)" - : "linear-gradient(270deg,#272626,transparent)" + ? "linear-gradient(0deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)" + : "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)" : theme.palette.background.default, color: settings.cfg.startpageType === "expanded" ? "white" : "black", @@ -164,7 +206,7 @@ export const StartPageViewPublication = () => { : "start" : "start", marginTop: settings.cfg.startpageType === "centered" ? "30px" : "5px", - width:settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile? "50%" : settings.cfg.startpageType === "centered" && !isMobile? "50%" : "100%", + maxWidth: isMobile? "100%" : settings.cfg.startpageType === "centered" ? "700px" : isTablet && settings.cfg.startpageType !== "expanded" && settings.cfg.startpage.position !== "center" ? "380px" : "531px", }} > { - {show_badge && ( - - - - Сделано на PenaQuiz - - - )} + {show_badge && PenaBadge} } From 5ca3cff1c7e4d39b55db76c736b52e1e25514598 Mon Sep 17 00:00:00 2001 From: aleksandr-raw <104529174+aleksandr-raw@users.noreply.github.com> Date: Thu, 2 May 2024 17:39:38 +0400 Subject: [PATCH 4/4] fixed logoSize and gap for start page design --- .../ViewPublicationPage/StartPageViewPublication/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx index 0db64bc..5cfe129 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx @@ -94,7 +94,7 @@ export const StartPageViewPublication = () => { display: "flex", alignItems: "center", flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" : "wrap", - gap:"30px", + gap: isMobile? "20px" : "30px", mb: settings.cfg.startpageType === "centered" ? "25px" : "7px", }} > @@ -102,7 +102,7 @@ export const StartPageViewPublication = () => {