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

feat: https to every link

Browse Source
This commit is contained in:
IlyaDoronin 2024-04-17 16:27:29 +03:00
parent 88d1d904a8
commit 49258e859b
1 changed files with 256 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -1,9 +1,4 @@
import { import { Box, Button, Link, Typography, useTheme } from "@mui/material";
Box,
Button, Link,
Typography,
useTheme
} from "@mui/material";
import { NameplateLogo } from "@icons/NameplateLogo"; import { NameplateLogo } from "@icons/NameplateLogo";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe"; import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
@ -24,7 +19,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 1000; const isTablet = useRootContainerSize() < 1000;
const { settings, show_badge, quizId } = useQuizData(); const { settings, show_badge, quizId } = useQuizData();
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep); const setCurrentQuizStep = useQuizViewStore(
(state) => state.setCurrentQuizStep
);
const spec = settings.cfg.spec; const spec = settings.cfg.spec;
console.log(quizThemes[settings.cfg.theme].isLight); console.log(quizThemes[settings.cfg.theme].isLight);
@ -41,10 +38,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design && !isMobile backgroundImage:
settings.cfg.design && !isMobile
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null, : null,
}} }}
> >
<Box <Box
@ -57,7 +54,8 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
width: "100%", width: "100%",
height: "100%", height: "100%",
overflow: "auto", overflow: "auto",
background: settings.cfg.design && !isMobile background:
settings.cfg.design && !isMobile
? quizThemes[settings.cfg.theme].isLight ? quizThemes[settings.cfg.theme].isLight
? "transparent" ? "transparent"
: "linear-gradient(90deg,#272626, transparent)" : "linear-gradient(90deg,#272626, transparent)"
@ -77,7 +75,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
mb: "7px", mb: "7px",
}} }}
> >
{settings.cfg.startpage.logo && {settings.cfg.startpage.logo && (
<img <img
src={settings.cfg.startpage.logo} src={settings.cfg.startpage.logo}
style={{ style={{
@ -87,7 +85,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
}} }}
alt="" alt=""
/> />
} )}
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
@ -106,9 +104,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
width: "100%", width: "100%",
maxWidth: "844px", maxWidth: "844px",
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined, padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
}}> }}
{ >
!resultQuestion?.content.useImage && resultQuestion.content.video && ( {!resultQuestion?.content.useImage &&
resultQuestion.content.video && (
<YoutubeEmbedIframe <YoutubeEmbedIframe
videoUrl={resultQuestion.content.video} videoUrl={resultQuestion.content.video}
containerSX={{ containerSX={{
@ -117,11 +116,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
height: isMobile ? "100%" : "306px", height: isMobile ? "100%" : "306px",
}} }}
/> />
) )}
} {resultQuestion?.content.useImage && resultQuestion.content.back && (
{ <Box
resultQuestion?.content.useImage && resultQuestion.content.back && ( sx={{ width: "100%", display: "flex", justifyContent: "center" }}
<Box sx={{width: "100%", display: "flex", justifyContent: "center"}}> >
<Box <Box
component="img" component="img"
src={resultQuestion.content.back} src={resultQuestion.content.back}
@ -134,9 +133,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
}} }}
/> />
</Box> </Box>
)}
)
}
{resultQuestion.description !== "" && {resultQuestion.description !== "" &&
resultQuestion.description !== " " && ( resultQuestion.description !== " " && (
<Typography <Typography
@ -145,7 +142,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
fontWeight: 700, fontWeight: 700,
m: "20px 0", m: "20px 0",
color: theme.palette.text.primary, color: theme.palette.text.primary,
wordBreak: "break-word" wordBreak: "break-word",
}} }}
> >
{resultQuestion.description} {resultQuestion.description}
@ -156,14 +153,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
sx={{ sx={{
m: "20px 0", m: "20px 0",
color: theme.palette.text.primary, color: theme.palette.text.primary,
wordBreak: "break-word" wordBreak: "break-word",
}} }}
> >
{resultQuestion.title} {resultQuestion.title}
</Typography> </Typography>
{ {resultQuestion.content.text !== "" &&
resultQuestion.content.text !== "" &&
resultQuestion.content.text !== " " && ( resultQuestion.content.text !== " " && (
<Typography <Typography
sx={{ sx={{
@ -173,15 +169,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
> >
{ {resultQuestion.content.text}
resultQuestion.content.text
}
</Typography> </Typography>
) )}
}
</Box> </Box>
<Box width="100%"> <Box width="100%">
<Box <Box
sx={{ sx={{
@ -191,40 +183,43 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
px: "20px", px: "20px",
}} }}
> >
{show_badge && {show_badge && (
<Box <Box
component={Link} component={Link}
target={"_blank"} target={"_blank"}
href={ href={`https://${
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}` window.location.hostname.includes("s") ? "s" : ""
} }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
mt: "15px", mt: "15px",
gap: "10px", gap: "10px",
textDecoration: "none", textDecoration: "none",
mb: "15px" mb: "15px",
}} }}
> >
<NameplateLogo <NameplateLogo
style={{ style={{
fontSize: "23px", fontSize: "23px",
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF", color: quizThemes[settings.cfg.theme].isLight
? "#000000"
: "#F5F7FF",
}} }}
/> />
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF", color: quizThemes[settings.cfg.theme].isLight
? "#4D4D4D"
: "#F5F7FF",
whiteSpace: "nowrap", whiteSpace: "nowrap",
}} }}
> >
Сделано на PenaQuiz Сделано на PenaQuiz
</Typography> </Typography>
</Box> </Box>
} )}
</Box> </Box>
<Box <Box
@ -237,18 +232,16 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
alignItems: "center", alignItems: "center",
borderTop: "1px solid #9A9AAF80", borderTop: "1px solid #9A9AAF80",
p: p:
( (settings.cfg.resultInfo.showResultForm === "before" &&
settings.cfg.resultInfo.showResultForm === "before" && !settings.cfg.score) ||
!settings.cfg.score (settings.cfg.resultInfo.showResultForm === "after" &&
) || resultQuestion.content.redirect)
( ? "20px"
settings.cfg.resultInfo.showResultForm === "after" && : "0",
resultQuestion.content.redirect
)
? "20px" : "0",
}} }}
> >
{settings.cfg.resultInfo.showResultForm === "before" && !settings.cfg.score && ( {settings.cfg.resultInfo.showResultForm === "before" &&
!settings.cfg.score && (
<Button <Button
onClick={() => setCurrentQuizStep("contactform")} onClick={() => setCurrentQuizStep("contactform")}
variant="contained" variant="contained"
@ -264,7 +257,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
{settings.cfg.resultInfo.showResultForm === "after" && {settings.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect && ( resultQuestion.content.redirect && (
<Button <Button
href={resultQuestion.content.redirect} href={
resultQuestion.content.redirect.includes("https")
? resultQuestion.content.redirect
: `https://${resultQuestion.content.redirect}`
}
variant="contained" variant="contained"
sx={{ p: "10px 20px", width: "auto", height: "50px" }} sx={{ p: "10px 20px", width: "auto", height: "50px" }}
> >