SQuiz/frontAnswerer
3
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'fix-current-design' into 'dev'

Browse Source 
Fix current design

See merge request frontend/squzanswerer!131
This commit is contained in:
Nastya 2024-05-02 14:48:57 +00:00
commit 75691a564b
4 changed files with 78 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,8 @@ const StandartLayout = ({
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: LayoutProps) => { }: LayoutProps) => {
const isTablet = useRootContainerSize() < 1100; const size = useRootContainerSize();
const isTablet = size >= 700 && size < 1100;
const { settings } = useQuizData(); const { settings } = useQuizData();
return ( return (
@ -59,7 +60,7 @@ const StandartLayout = ({
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "flex-start", alignItems: "flex-start",
p: "25px", p: isTablet? "25px" : alignType === 'left'? "25px 25px 25px 35px" : "25px 35px 25px 25px" ,
overflowY: "auto", overflowY: "auto",
background: background:
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
@ -100,7 +101,7 @@ const ExpandedLayout = ({
<Box <Box
sx={{ sx={{
height: "100%", height: "100%",
width: alignType === "center"? "100%": "40%", width: alignType === "center"? "100%": "42%",
display: "flex", display: "flex",
padding: padding:
alignType === "center" alignType === "center"

3
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
View File

@ -49,7 +49,7 @@ const StandartMobileLayout = ({
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "flex-start", alignItems: "flex-start",
p: "25px", p: "20px",
height: "100%", height: "100%",
overflowY: "auto", overflowY: "auto",
overflowX: "hidden", overflowX: "hidden",
@ -91,6 +91,7 @@ const StandartMobileLayout = ({
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
width: "100%", width: "100%",
marginTop: "30px"
}} }}
> >
{quizMainBlock} {quizMainBlock}

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

@ -27,8 +27,9 @@ export const StartPageViewPublication = () => {
const { isMobileDevice } = useUADevice(); const { isMobileDevice } = useUADevice();
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep); const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
const isMobile = useRootContainerSize() < 700; const size = useRootContainerSize();
const isTablet = useRootContainerSize() < 800; const isMobile = size < 700;
const isTablet = size >= 700 && size < 1100;
const handleCopyNumber = () => { const handleCopyNumber = () => {
navigator.clipboard.writeText(settings.cfg.info.phonenumber); navigator.clipboard.writeText(settings.cfg.info.phonenumber);
@ -93,7 +94,7 @@ export const StartPageViewPublication = () => {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" : "wrap", 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", mb: settings.cfg.startpageType === "centered" ? "25px" : "7px",
}} }}
> >
@ -101,7 +102,7 @@ export const StartPageViewPublication = () => {
<img <img
src={settings.cfg.startpage.logo} src={settings.cfg.startpage.logo}
style={{ style={{
height: "40px", maxHeight: isMobile? "30px" : "40px",
maxWidth: "110px", maxWidth: "110px",
objectFit: "cover", objectFit: "cover",
}} }}
@ -123,6 +124,47 @@ export const StartPageViewPublication = () => {
</Box> </Box>
</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; const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length;
return ( return (
@ -135,10 +177,10 @@ export const StartPageViewPublication = () => {
background: background:
settings.cfg.startpageType === "expanded" settings.cfg.startpageType === "expanded"
? settings.cfg.startpage.position === "left" ? 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" : settings.cfg.startpage.position === "center"
? "linear-gradient(180deg,transparent,#272626)" ? "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(270deg,#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%)"
: theme.palette.background.default, : theme.palette.background.default,
color: settings.cfg.startpageType === "expanded" ? "white" : "black", color: settings.cfg.startpageType === "expanded" ? "white" : "black",
@ -153,7 +195,7 @@ export const StartPageViewPublication = () => {
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: settings.cfg.startpageType === "standard" && isMobile? "start" : "center",
flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1, flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1,
alignItems: alignItems:
settings.cfg.startpageType === "centered" settings.cfg.startpageType === "centered"
@ -164,13 +206,13 @@ export const StartPageViewPublication = () => {
: "start" : "start"
: "start", : "start",
marginTop: settings.cfg.startpageType === "centered" ? "30px" : "5px", 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 <Typography
sx={{ sx={{
fontWeight: "700", fontWeight: "700",
fontSize: "26px", fontSize: "27px",
fontStyle: "normal", fontStyle: "normal",
fontStretch: "normal", fontStretch: "normal",
lineHeight: "1.2", lineHeight: "1.2",
@ -193,7 +235,7 @@ export const StartPageViewPublication = () => {
sx={{ sx={{
fontSize: "17px", fontSize: "17px",
fontWeight: "400", fontWeight: "400",
margin: "16px 0 30px", margin: "12px 0 30px",
overflowWrap: "break-word", overflowWrap: "break-word",
width: "100%", width: "100%",
textAlign: textAlign:
@ -242,31 +284,31 @@ export const StartPageViewPublication = () => {
? 0 ? 0
: 1 : 1
: 0, : 0,
gap: "20px", gap: isMobile? "30px" : "40px",
alignItems: "flex-end", 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%", width: "100%",
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? isMobile ? "wrap-reverse" : "nowrap" : "wrap", 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} {settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile && quizHeaderBlock}
<Box sx={{ maxWidth: "300px", <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", flexDirection: "column",
alignItems: "center", alignItems: "center",
order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "2" : "0"}}> order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "2" : "0"}}>
{settings.cfg.info.site && ( {settings.cfg.info.site && (
<Link href={settings.cfg.info.site} <Link href={settings.cfg.info.site}
sx={{marginBottom: settings.cfg.startpageType === "centered" && isMobile ? "0" : "16px"}}
> >
<Typography <Typography
sx={{ sx={{
lineHeight: "19px",
fontSize: "16px", fontSize: "16px",
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? "end" : "none",
color: theme.palette.primary.main, color: theme.palette.primary.main,
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis", textOverflow: "ellipsis",
whiteSpace: "nowrap", whiteSpace: "nowrap",
maxWidth: isTablet ? "200px" : "300px",
}} }}
> >
{settings.cfg.info.site} {settings.cfg.info.site}
@ -278,6 +320,8 @@ export const StartPageViewPublication = () => {
<Link href={`tel:${settings.cfg.info.phonenumber}`}> <Link href={`tel:${settings.cfg.info.phonenumber}`}>
<Typography <Typography
sx={{ sx={{
lineHeight: "19px",
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
fontSize: "16px", fontSize: "16px",
color: color:
settings.cfg.startpageType === "expanded" settings.cfg.startpageType === "expanded"
@ -292,7 +336,9 @@ export const StartPageViewPublication = () => {
<ButtonBase onClick={handleCopyNumber}> <ButtonBase onClick={handleCopyNumber}>
<Typography <Typography
sx={{ sx={{
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
fontSize: "16px", fontSize: "16px",
lineHeight: "19px",
color: color:
settings.cfg.startpageType === "expanded" settings.cfg.startpageType === "expanded"
? "#FFFFFF" ? "#FFFFFF"
@ -306,8 +352,10 @@ export const StartPageViewPublication = () => {
) : ( ) : (
<Typography <Typography
sx={{ sx={{
lineHeight: "19px",
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
fontSize: "16px", fontSize: "16px",
marginTop: "5px", marginTop: "10px",
color: color:
settings.cfg.startpageType === "expanded" settings.cfg.startpageType === "expanded"
? "#FFFFFF" ? "#FFFFFF"
@ -319,12 +367,14 @@ export const StartPageViewPublication = () => {
)} )}
<Typography <Typography
sx={{ sx={{
lineHeight: "14px",
width: "100%", width: "100%",
overflowWrap: "break-word", overflowWrap: "break-word",
fontSize: "12px", fontSize: "12px",
textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
maxHeight: "120px", maxHeight: "120px",
overflow: "auto", overflow: "auto",
marginTop: "5px", marginTop: "10px",
"&::-webkit-scrollbar": { width: 0 }, "&::-webkit-scrollbar": { width: 0 },
color: color:
settings.cfg.startpageType === "expanded" settings.cfg.startpageType === "expanded"
@ -336,47 +386,7 @@ export const StartPageViewPublication = () => {
</Typography> </Typography>
</Box> </Box>
{show_badge && ( {show_badge && 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>
)}
</Box> </Box>
</> </>
} }

6
lib/utils/themes/generic.ts
View File

@ -1,5 +1,5 @@
import { createTheme } from "@mui/material"; import {createTheme} from "@mui/material";
import { fontFaces } from "./fontFace"; import {fontFaces} from "./fontFace";
declare module '@mui/material/Button' { declare module '@mui/material/Button' {
interface ButtonPropsVariantOverrides { interface ButtonPropsVariantOverrides {
@ -100,8 +100,8 @@ const theme = createTheme({
fontWeight: 500, fontWeight: 500,
}, },
fontFamily: [ fontFamily: [
"Twemoji Country Flags",
'"Lato"', '"Lato"',
"Twemoji Country Flags",
"-apple-system", "-apple-system",
"BlinkMacSystemFont", "BlinkMacSystemFont",
"Arial", "Arial",