Nearle/nearle_console
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated the ui for the mobile view

Browse Source
This commit is contained in:
Thiru-tenext
2026-06-09 13:12:18 +05:30
parent 8513c7c2ec
commit f18b680247
29 changed files with 3664 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/nearle/riders/editRider.js
View File

@@ -13,7 +13,9 @@ import {
Stack,
TextField,
Typography,
Autocomplete
Autocomplete,
useMediaQuery,
useTheme
} from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
@@ -34,6 +36,8 @@ import dayjs from 'dayjs';
import CircularLoader from 'components/CircularLoader';
const EditRider = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const location = useLocation();
const [riderdata, setRiderdata] = useState(null);
const navigate = useNavigate();
@@ -347,15 +351,17 @@ const EditRider = () => {
<MainCard
title={
<Stack
direction="row"
direction={{ xs: 'column', sm: 'row' }}
justifyContent="space-between"
alignItems="center"
alignItems={{ xs: 'stretch', sm: 'center' }}
spacing={{ xs: 1.5, sm: 0 }}
sx={{ backgroundColor: 'secondary.lighter', width: '100%', height: '100%', p: 2 }}
>
<Typography variant="h3">Edit Rider </Typography>
<Button
startIcon={<ArrowBackIcon />}
variant="outlined"
fullWidth={isMobile}
onClick={() => {
setRiderdata(null);
navigate('/nearle/riders');
@@ -375,7 +381,7 @@ const EditRider = () => {
scrollBehavior: 'smooth'
}}
>
<Stack display={'flex'} spacing={5}>
<Stack display={'flex'} spacing={{ xs: 2.5, sm: 5 }}>
{/* || =========================================== || Contact Information || =========================================== || */}
<MainCard
title={
@@ -384,7 +390,7 @@ const EditRider = () => {
</Typography>
}
>
<Grid container spacing={3}>
<Grid container spacing={{ xs: 2, sm: 3 }}>
{/* ========================== || First Name || ========================== */}
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
@@ -582,7 +588,7 @@ const EditRider = () => {
id="combo-box-demo"
options={partnerlist}
getOptionLabel={(option) => `${option.locationname}`}
sx={{ width: 300, height: '30px', ml: 3, zIndex: '100' }}
sx={{ width: { xs: '100%', sm: 300 }, height: '30px', ml: { xs: 0, sm: 3 }, zIndex: '100' }}
onChange={(event, value) => {
if (value) {
console.log(value);
@@ -630,7 +636,7 @@ const EditRider = () => {
</Typography>
}
>
<Grid container spacing={3}>
<Grid container spacing={{ xs: 2, sm: 3 }}>
{/* ========================== || Shift Type || ========================== */}
<Grid item xs={12} sm={6}>
@@ -754,7 +760,7 @@ const EditRider = () => {
</Typography>
}
>
<Grid container spacing={3}>
<Grid container spacing={{ xs: 2, sm: 3 }}>
{' '}
{/* ========================== || Account No|| ========================== */}
<Grid item xs={12} sm={6}>
@@ -903,7 +909,7 @@ const EditRider = () => {
</Typography>
}
>
<Grid container spacing={3}>
<Grid container spacing={{ xs: 2, sm: 3 }}>
{/* ========================== || Vehicle Name || ========================== */}
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
@@ -1080,12 +1086,13 @@ const EditRider = () => {
borderTop: 'none'
}}
>
<Stack direction="row" justifyContent="flex-end" spacing={2}>
<Button startIcon={<ArrowBackIcon />} variant="outlined" onClick={() => navigate('/nearle/riders')}>
<Stack direction={{ xs: 'column-reverse', sm: 'row' }} justifyContent="flex-end" spacing={2}>
<Button startIcon={<ArrowBackIcon />} variant="outlined" fullWidth={isMobile} onClick={() => navigate('/nearle/riders')}>
Back to Riders
</Button>
<Button
variant="contained"
fullWidth={isMobile}
onClick={() => {
updateRider();
}}