feat: https to every link

This commit is contained in:
IlyaDoronin 2024-04-17 16:27:29 +03:00
parent 88d1d904a8
commit 49258e859b

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