mobile respo

aju-alen · Sep 20, 2024 · d5298c6 · d5298c6
1 parent 0b0bcb7
commit d5298c6
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 7 deletions.
diff --git a/client/src/components/SelectMultiScalePoint.jsx b/client/src/components/SelectMultiScalePoint.jsx
@@ -117,7 +117,7 @@ const SelectMultiScalePoint = ({ onSaveForm, data, id, options, disableForm, dis
   return (
     <React.Fragment>
       <CssBaseline />
-      <Container sx={{ display: { xs: "none", md: "block" } }} maxWidth='xl' >
+      <Container sx={{ display: { xs: "", md: "block" } }} maxWidth='xl' >
         <Box sx={{
           bgcolor: 'white',
           display: 'flex',
@@ -160,6 +160,7 @@ const SelectMultiScalePoint = ({ onSaveForm, data, id, options, disableForm, dis
         }}>
           <TextField
             fullWidth
+            multiline
             id="standard-basic"
             label={!disableText ? "Insert input" : ''}
             variant="standard"
@@ -334,7 +335,7 @@ const SelectMultiScalePoint = ({ onSaveForm, data, id, options, disableForm, dis
           </Stack>
         </Box>
       </Container>
-      <Container
+      {/* <Container
         sx={{ display: { xs: "block", md: "none" } }}
       >
         <Box sx={{
@@ -450,7 +451,7 @@ const SelectMultiScalePoint = ({ onSaveForm, data, id, options, disableForm, dis
           </Stack>
         </Box>
 
-      </Container>
+      </Container> */}
     </React.Fragment>
   )
 }

diff --git a/client/src/components/SelectSingleCheckBox.jsx b/client/src/components/SelectSingleCheckBox.jsx
@@ -140,14 +140,15 @@ const SelectSingleCheckBox = ({ onSaveForm, data, id, options, disableForm, disa
             fullWidth id="standard-basic"
             label={!disableText ? "Insert input" : ''}
             variant="standard"
+            multiline
             value={formData.question}
             onChange={(e) => setFormData({ ...formData, question: e.target.value })}
             InputProps={{
               readOnly: disableText,
             }}
           />
            <Stack spacing={1} sx={{
-            width: '20%',
+            width: { xs: '100%', md: '20%' },
             marginRight: 'auto',
           }} >
             {formData.options.map((opt) => {
@@ -176,6 +177,7 @@ const SelectSingleCheckBox = ({ onSaveForm, data, id, options, disableForm, disa
                     id="standard-basic"
                     placeholder={!disableText ? "Type Your Response Here" : ''}
                     variant="standard"
+                    multiline
                     value={opt.value}
                     onChange={(e) =>
                       setFormData({

diff --git a/client/src/components/SelectSingleRadio.jsx b/client/src/components/SelectSingleRadio.jsx
@@ -133,7 +133,7 @@ const SelectSingleRadio = ({ onSaveForm, data, id, options, disableForm, disable
     backgroundColor:'#F4FFF8',
   },
 }}>
-          <TextField fullWidth id="standard-basic" label={!disableText ? "Insert input" : ''} variant='standard' size='small' required name='question' value={formData.question}
+          <TextField fullWidth multiline id="standard-basic" label={!disableText ? "Insert input" : ''} variant='standard' size='small' required name='question' value={formData.question}
             sx={{
               '& .MuiInputBase-root': {
                 fontWeight: isBold? 'bold' : 'normal',
@@ -152,7 +152,7 @@ const SelectSingleRadio = ({ onSaveForm, data, id, options, disableForm, disable
           </Button> */}
 
           <Stack spacing={1} sx={{
-            width: '20%',
+            width: { xs: '100%', md: '20%' },
             marginRight: 'auto',
           }} >
             {formData.options.map((option) => (
@@ -176,6 +176,7 @@ const SelectSingleRadio = ({ onSaveForm, data, id, options, disableForm, disable
              >
                <TextField
   fullWidth
+  multiline
   id="standard-basic"
   placeholder={!disableText ? "Type Your Response Here" : ''}
   variant="standard"

diff --git a/client/src/pages/UserSubmitSurvey.jsx b/client/src/pages/UserSubmitSurvey.jsx
@@ -42,12 +42,22 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
+import MenuIcon from '@mui/icons-material/Menu';
+import Drawer from '@mui/material/Drawer';
+import Divider from '@mui/material/Divider';
+import MenuItem from '@mui/material/MenuItem';
 
 
 const UserSubmitSurvey = () => {
     const { surveyId } = useParams();
     const navigate = useNavigate();
 
+    const [openDrawer, setOpenDrawer] = React.useState(false);
+
+    const toggleDrawer = (newOpen) => () => {
+      setOpenDrawer(newOpen);
+    };
+
     const [surveyData, setSurveyData] = React.useState({});
     const [currentIndex, setCurrentIndex] = useState(0);
     const [introduction, setIntroduction] = useState(true)
@@ -1200,7 +1210,7 @@ const UserSubmitSurvey = () => {
                 {(surveyData.surveyForms && !introduction) && renderCurrentComponent()}
 
             </div>
-            <AppBar position="fixed" >
+            <AppBar position="fixed" sx={{ display: { xs: "none", md: "block" } }} >
         <Toolbar sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="inherit">
             Powered by 
@@ -1221,6 +1231,58 @@ const UserSubmitSurvey = () => {
           </Button>
         </Toolbar>
       </AppBar>
+
+            <AppBar position="fixed" sx={{ display: { xs: "", md: "none" } }} >
+        <Toolbar sx={{ justifyContent: 'space-between' }}>
+          <Typography variant="body2" color="inherit">
+            Powered by 
+            <Button onClick={()=>navigate('/')} variant='text' sx={{color:'white'}}>
+            Dubai Analytica
+            </Button>
+          </Typography>
+
+          <Button
+              variant="text"
+              color="error"
+              aria-label="menu"
+              onClick={toggleDrawer(true)}
+              sx={{ minWidth: '30px', p: '4px' }}
+            >
+               <MenuIcon />
+
+             </Button>
+
+             <Drawer anchor="right" open={openDrawer} onClose={toggleDrawer(false)}>
+
+<Box
+     sx={{
+       minWidth: '60dvw',
+       p: 2,
+       backgroundColor: 'background.paper',
+       flexGrow: 1,
+     }}
+   >
+
+      <Divider />
+
+
+
+        <MenuItem>
+           <Button variant="body2" color="inherit" onClick={() => navigate('/login')}>
+              Create Your Own Survey
+            </Button>
+    </MenuItem>
+
+        <MenuItem>
+           <Button variant="body2" color="inherit" onClick={handleClickOpen}>
+            Report Abuse
+          </Button>
+    </MenuItem>
+
+    </Box>
+  </Drawer>
+        </Toolbar>
+      </AppBar>
       <Dialog
         open={open}
         onClose={handleClose}