SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

селектор для мобилки

Browse Source
This commit is contained in:
Nastya 2025-06-02 18:53:46 +03:00
parent 14bfc6750f
commit cc6d78935c
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
View File

@ -1,4 +1,4 @@
import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button } from "@mui/material"; import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery } from "@mui/material";
import { InfoPopover } from '@ui_kit/InfoPopover'; import { InfoPopover } from '@ui_kit/InfoPopover';
import CheckboxIcon from "@icons/Checkbox"; import CheckboxIcon from "@icons/Checkbox";
import { useState } from "react"; import { useState } from "react";
@ -16,6 +16,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
const [gender, setGender] = useState<string>(''); const [gender, setGender] = useState<string>('');
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { enqueueSnackbar } = useSnackbar(); const { enqueueSnackbar } = useSnackbar();
const isMobile = useMediaQuery(theme.breakpoints.down(800));
const isFormValid = gender && age; const isFormValid = gender && age;
@ -58,11 +59,11 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
}; };
return ( return (
<Box sx={{ display: 'flex', gap: 4, alignItems: "center" }}> <Box sx={{ display: 'flex', gap: 4, alignItems: "end", flexWrap: "wrap" }}>
<Box> <Box sx={{display: "inline-flex", flexWrap: isMobile ? "wrap" : "initial"}}>
<FormControl component="fieldset" variant="standard"> <FormControl component="fieldset" variant="standard">
<Box sx={{ display: 'flex', alignItems: "center", gap: '4px' }}> <Box sx={{ display: 'flex', alignItems: "end", gap: '4px' }}>
<FormLabel <FormLabel
sx={{ sx={{
'&.Mui-focused': { '&.Mui-focused': {
@ -82,7 +83,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
sx={{ sx={{
width: "155px", width: "155px",
justifyContent: "space-between", justifyContent: "space-between",
mt: "9px", mt: "20px",
ml: "-9px" ml: "-9px"
}} }}
row row
@ -151,10 +152,10 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
<FormControl sx={{ minWidth: "420px", marginLeft: "15px" }} variant="filled"> <FormControl sx={{ maxWidth: "420px", width: "100%", marginLeft: isMobile ? "0" : "120px" }} variant="filled">
<Box sx={{ <Box sx={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'end',
gap: '4px' gap: '4px'
}}> }}>
<FormLabel sx={{ <FormLabel sx={{
@ -177,6 +178,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
sx={{ sx={{
height: "48px", height: "48px",
maxWidth: "420px", maxWidth: "420px",
width: "100%",
borderRadius: "8px", borderRadius: "8px",
border: "1px solid #9A9AAF", border: "1px solid #9A9AAF",
'& .MuiSelect-filled': { '& .MuiSelect-filled': {
@ -211,7 +213,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
</Box> </Box>
<Button <Button
onClick={addItem} onClick={addItem}
variant="contained" variant="contained"
disabled={!isFormValid} disabled={!isFormValid}
sx={{ sx={{

2
src/pages/PersonalizationAI/PersonalizationAI.tsx
View File

@ -98,7 +98,7 @@ export default function PersonalizationAI() {
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&'); .join('&');
setUtmParams(paramString); setUtmParams(paramString ? `&${paramString}` : "");
}; };
return ( return (