правки на соответствие макету - фотофоны, кнопки, текстовые поля
This commit is contained in:
Tamara
parent
dd65ea2091
commit
6f5a641053
@ -16,6 +16,7 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||
import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
|
||||
|
||||
|
||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
||||
@ -153,6 +154,11 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
},
|
||||
scrollbarWidth: "none",
|
||||
msOverflowStyle: "none",
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -239,6 +245,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
disabled={!(ready && !fire)}
|
||||
variant="contained"
|
||||
onClick={handleShowResultsClick}
|
||||
sx={{
|
||||
border: `1px solid ${theme.palette.primary.main}`,
|
||||
"&:disabled": {
|
||||
border: "1px solid #9A9AAF",
|
||||
color: "#9A9AAF"
|
||||
}
|
||||
}}
|
||||
>
|
||||
{settings.cfg.formContact?.button || "Получить результаты"}
|
||||
</Button>
|
||||
@ -417,6 +430,9 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
|
||||
onChange={onChange}
|
||||
sx={{
|
||||
width: isMobile ? "300px" : "350px",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: "#9A9AAF"
|
||||
}
|
||||
}}
|
||||
placeholder={desc}
|
||||
InputProps={{
|
||||
|
||||
@ -13,7 +13,7 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
||||
import type { QuizQuestionResult } from "../../model/questionTypes/result";
|
||||
import { setCurrentQuizStep } from "@stores/quizView";
|
||||
|
||||
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
|
||||
|
||||
type ResultFormProps = {
|
||||
resultQuestion: QuizQuestionResult;
|
||||
@ -22,6 +22,7 @@ type ResultFormProps = {
|
||||
export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useRootContainerSize() < 650;
|
||||
const isTablet = useRootContainerSize() < 1000;
|
||||
const { settings, show_badge } = useQuizData();
|
||||
const spec = settings.cfg.spec
|
||||
|
||||
@ -38,6 +39,11 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
pt: "28px",
|
||||
overflow: "auto",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -45,8 +51,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
width: isMobile ? "100%" : "490px",
|
||||
padding: isMobile ? "0 16px" : undefined,
|
||||
maxWidth: "844px",
|
||||
width: "100%",
|
||||
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
|
||||
}}
|
||||
>
|
||||
{
|
||||
@ -66,8 +73,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
component="img"
|
||||
src={resultQuestion.content.back}
|
||||
sx={{
|
||||
width: spec ? "100%" : isMobile ? "100%" : "490px",
|
||||
height: spec ? "auto" : isMobile ? "100%" : "280px",
|
||||
width: "100%",
|
||||
maxWidth: "844px",
|
||||
height: spec ? "auto" : isMobile ? "100%" : "306px",
|
||||
borderRadius: "8px"
|
||||
}}
|
||||
></Box>
|
||||
)
|
||||
|
||||
@ -128,7 +128,7 @@ const CenteredLayout = ({
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
const isTablet = useRootContainerSize() < 1100;
|
||||
|
||||
const { settings } = useQuizData();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -138,11 +138,16 @@ const CenteredLayout = ({
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
minHeight: "100vh",
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{backgroundBlock && (
|
||||
{backgroundBlock && settings.cfg.startpage.background.desktop && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
|
||||
@ -157,59 +157,69 @@ const CenteredMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100vh",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
padding: "10px 25px 25px",
|
||||
height: "100%",
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
"&::-webkit-scrollbar": { width: "4px" },
|
||||
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
"& > img": { width: "100%", borderRadius: "12px" },
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
height: "80%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}: MobileLayoutProps) => {
|
||||
const {settings} = useQuizData();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100vh",
|
||||
height: "100%",
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
"&::-webkit-scrollbar": {width: 0},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
padding: "10px 25px 25px",
|
||||
height: "100%",
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
"&::-webkit-scrollbar": {width: "4px"},
|
||||
"&::-webkit-scrollbar-thumb": {backgroundColor: "#b8babf"},
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
"& > img": {width: "100%", borderRadius: "12px"},
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
height: "80%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export const StartPageMobile = ({
|
||||
quizHeaderBlock,
|
||||
|
||||
@ -87,7 +87,7 @@ export const StartPageViewPublication = () => {
|
||||
className="settings-preview-draghandle"
|
||||
sx={{
|
||||
borderRadius: 0,
|
||||
height: "100%",
|
||||
// height: "100%",
|
||||
minHeight: "100vh",
|
||||
width: "100%",
|
||||
background:
|
||||
|
||||
@ -414,6 +414,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
borderColor: "#9A9AAF"
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@ -441,6 +442,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
borderColor: "#9A9AAF"
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@ -457,6 +459,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
borderColor: "#9A9AAF"
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -158,6 +158,9 @@ const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
|
||||
: "rgba(154,154,175, 0.2)"
|
||||
: "transparent",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: "#9A9AAF"
|
||||
},
|
||||
"&:focus-visible": { borderColor: theme.palette.primary.main },
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -7,7 +7,7 @@ import QuizAnswerer from "../lib/components/QuizAnswerer";
|
||||
import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";
|
||||
|
||||
// const defaultQuizId = "45ef7f9c-784d-4e58-badb-f6b337f08ba0"; // branching
|
||||
const defaultQuizId = "cde381db-8ccb-402c-b55f-2c814be9bf25"; //looooong header
|
||||
const defaultQuizId = "eb1a0fd5-8484-4c96-8d73-4af747eaf02d"; //looooong header
|
||||
// const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear
|
||||
|
||||
export default function App() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user