Merge branch 'dev' into 'staging'
Dev See merge request frontend/squzanswerer!133
This commit is contained in:
commit
bccdbe06c5
@ -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 (
|
||||
@ -59,7 +60,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
|
||||
@ -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"
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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);
|
||||
@ -93,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",
|
||||
}}
|
||||
>
|
||||
@ -101,7 +102,7 @@ export const StartPageViewPublication = () => {
|
||||
<img
|
||||
src={settings.cfg.startpage.logo}
|
||||
style={{
|
||||
height: "40px",
|
||||
maxHeight: isMobile? "30px" : "40px",
|
||||
maxWidth: "110px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
@ -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",
|
||||
@ -153,7 +195,7 @@ export const StartPageViewPublication = () => {
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
justifyContent: settings.cfg.startpageType === "standard" && isMobile? "start" : "center",
|
||||
flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1,
|
||||
alignItems:
|
||||
settings.cfg.startpageType === "centered"
|
||||
@ -164,13 +206,13 @@ 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
|
||||
sx={{
|
||||
fontWeight: "700",
|
||||
fontSize: "26px",
|
||||
fontSize: "27px",
|
||||
fontStyle: "normal",
|
||||
fontStretch: "normal",
|
||||
lineHeight: "1.2",
|
||||
@ -193,7 +235,7 @@ export const StartPageViewPublication = () => {
|
||||
sx={{
|
||||
fontSize: "17px",
|
||||
fontWeight: "400",
|
||||
margin: "16px 0 30px",
|
||||
margin: "12px 0 30px",
|
||||
overflowWrap: "break-word",
|
||||
width: "100%",
|
||||
textAlign:
|
||||
@ -242,31 +284,31 @@ 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",
|
||||
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}
|
||||
<Box sx={{ maxWidth: "300px",
|
||||
display: settings.cfg.startpageType === "centered" || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile ? "flex" : "block",
|
||||
display: settings.cfg.startpageType === "centered" && isMobile || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile ? "flex" : "block",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "2" : "0"}}>
|
||||
{settings.cfg.info.site && (
|
||||
<Link href={settings.cfg.info.site}
|
||||
sx={{marginBottom: settings.cfg.startpageType === "centered" && isMobile ? "0" : "16px"}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
lineHeight: "19px",
|
||||
fontSize: "16px",
|
||||
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? "end" : "none",
|
||||
color: theme.palette.primary.main,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
maxWidth: isTablet ? "200px" : "300px",
|
||||
}}
|
||||
>
|
||||
{settings.cfg.info.site}
|
||||
@ -278,6 +320,8 @@ export const StartPageViewPublication = () => {
|
||||
<Link href={`tel:${settings.cfg.info.phonenumber}`}>
|
||||
<Typography
|
||||
sx={{
|
||||
lineHeight: "19px",
|
||||
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
|
||||
fontSize: "16px",
|
||||
color:
|
||||
settings.cfg.startpageType === "expanded"
|
||||
@ -292,7 +336,9 @@ export const StartPageViewPublication = () => {
|
||||
<ButtonBase onClick={handleCopyNumber}>
|
||||
<Typography
|
||||
sx={{
|
||||
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
color:
|
||||
settings.cfg.startpageType === "expanded"
|
||||
? "#FFFFFF"
|
||||
@ -306,8 +352,10 @@ export const StartPageViewPublication = () => {
|
||||
) : (
|
||||
<Typography
|
||||
sx={{
|
||||
lineHeight: "19px",
|
||||
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
|
||||
fontSize: "16px",
|
||||
marginTop: "5px",
|
||||
marginTop: "10px",
|
||||
color:
|
||||
settings.cfg.startpageType === "expanded"
|
||||
? "#FFFFFF"
|
||||
@ -319,12 +367,14 @@ export const StartPageViewPublication = () => {
|
||||
)}
|
||||
<Typography
|
||||
sx={{
|
||||
lineHeight: "14px",
|
||||
width: "100%",
|
||||
overflowWrap: "break-word",
|
||||
fontSize: "12px",
|
||||
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
|
||||
maxHeight: "120px",
|
||||
overflow: "auto",
|
||||
marginTop: "5px",
|
||||
marginTop: "10px",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
color:
|
||||
settings.cfg.startpageType === "expanded"
|
||||
@ -336,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>
|
||||
</>
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user