SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fixed expanded design of start page

Browse Source
This commit is contained in:
aleksandr-raw 2024-05-02 17:13:41 +04:00
parent 03b2bf2cc6
commit c6a73bf749
2 changed files with 52 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
View File

@ -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 = ({
<Box
sx={{
height: "100%",
width: alignType === "center"? "100%": "40%",
width: alignType === "center"? "100%": "42%",
display: "flex",
padding:
alignType === "center"

96
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

@ -27,8 +27,9 @@ export const StartPageViewPublication = () => {
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 = () => {
</Box>
</Box>)
const PenaBadge = (
<Box
component={Link}
target={"_blank"}
href={
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
}
sx={{
display: "flex",
alignItems: "center",
gap: "7px",
textDecoration: "none",
}}
>
<NameplateLogo
style={{
fontSize: "23px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: quizThemes[settings.cfg.theme].isLight
? "#151515"
: "#FFFFFF",
}}
/>
<Typography
sx={{
fontSize: "13px",
color:
settings.cfg.startpageType === "expanded"
? "#F5F7FF"
: quizThemes[settings.cfg.theme].isLight
? "#4D4D4D"
: "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>)
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",
}}
>
<Typography
@ -344,47 +386,7 @@ export const StartPageViewPublication = () => {
</Typography>
</Box>
{show_badge && (
<Box
component={Link}
target={"_blank"}
href={
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
}
sx={{
display: "flex",
alignItems: "center",
gap: "7px",
textDecoration: "none",
}}
>
<NameplateLogo
style={{
fontSize: "23px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: quizThemes[settings.cfg.theme].isLight
? "#151515"
: "#FFFFFF",
}}
/>
<Typography
sx={{
fontSize: "13px",
color:
settings.cfg.startpageType === "expanded"
? "#F5F7FF"
: quizThemes[settings.cfg.theme].isLight
? "#4D4D4D"
: "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>
)}
{show_badge && PenaBadge}
</Box>
</>
}