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

fix: StartPage PC and tablet design

Browse Source
This commit is contained in:
IlyaDoronin 2024-02-28 15:33:24 +03:00
parent 112d13acd0
commit 33e0492719
1 changed files with 31 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
lib/components/ViewPublicationPage/StartPageViewPublication.tsx
View File

@ -24,7 +24,7 @@ export const StartPageViewPublication = () => {
const theme = useTheme();
const { settings } = useQuizData();
const { isMobileDevice } = useUADevice();
const isMobile = useRootContainerSize() < 650;
const isMobile = useRootContainerSize() < 700;
const isTablet = useRootContainerSize() < 800;
const handleCopyNumber = () => {
@ -102,6 +102,7 @@ export const StartPageViewPublication = () => {
sx={{
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: "30px",
mb: "7px",
}}
@ -145,7 +146,7 @@ export const StartPageViewPublication = () => {
? "center"
: "start"
: "start",
mt: "28px",
marginTop: "28px",
width: "100%",
}}
>
@ -216,6 +217,7 @@ export const StartPageViewPublication = () => {
sx={{
mt: "46px",
display: "flex",
flexGrow: settings.cfg.startpageType === "centered" ? 1 : 0,
gap: "20px",
alignItems: "flex-end",
justifyContent: "space-between",
@ -223,12 +225,7 @@ export const StartPageViewPublication = () => {
flexWrap: "wrap",
}}
>
<Box
sx={{
maxWidth: isTablet ? "240px" : "300px",
marginBottom: "10px",
}}
>
<Box sx={{ maxWidth: isTablet ? "240px" : "300px" }}>
{settings.cfg.info.site && (
<Link mb="16px" href={settings.cfg.info.site}>
<Typography
@ -323,7 +320,6 @@ export const StartPageViewPublication = () => {
/>
<Typography
sx={{
fontSize: "20px",
color:
settings.cfg.startpageType === "expanded" && !isMobile
? "#F5F7FF"
@ -360,7 +356,8 @@ function QuizPreviewLayoutByType({
startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType;
}) {
const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 1100;
const isMobile = useRootContainerSize() < 700;
function StartPageMobile() {
return (
@ -379,6 +376,7 @@ function QuizPreviewLayoutByType({
sx={{
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
@ -399,6 +397,7 @@ function QuizPreviewLayoutByType({
sx={{
height: "80%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
width: "100%",
@ -439,7 +438,6 @@ function QuizPreviewLayoutByType({
: "row-reverse",
flexGrow: 1,
justifyContent: isMobile ? "flex-end" : undefined,
height: "100%",
minHeight: "100vh",
"&::-webkit-scrollbar": { width: 0 },
overflow: "auto",
@ -479,32 +477,31 @@ function QuizPreviewLayoutByType({
{isMobile ? (
<StartPageMobile />
) : (
<Box>
<Box
sx={{
overflow: "auto",
position: "relative",
display: "flex",
justifyContent: startpageAlignTypeToJustifyContent[alignType],
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
minHeight: "100vh",
width: "40%",
padding: "16px",
zIndex: 3,
}}
>
<Box
sx={{
width: "40%",
position: "relative",
padding: "16px",
zIndex: 3,
minHeight: "calc(100vh - 32px)",
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start",
borderRight: "1px solid #9A9AAF80",
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
</Box>
<Box
sx={{
position: "absolute",
@ -535,9 +532,8 @@ function QuizPreviewLayoutByType({
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
minHeight: "100vh",
"&::-webkit-scrollbar": { width: 0 },
}}
>
@ -545,11 +541,12 @@ function QuizPreviewLayoutByType({
{backgroundBlock && (
<Box
sx={{
width: "60%",
height: "275px",
// overflow: "hidden",
width: "100%",
maxWidth: "844px",
height: isTablet ? "530px" : "306px",
display: "flex",
justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" },
}}
>
{backgroundBlock}