fix: responsiveness of setting page and correct the width and height size of those pages
This commit is contained in:
Koosha Lahouti
@@ -59,115 +59,149 @@ export function Setting() {
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
px: { xs: 0, sm: 3 },
|
||||
mx: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<CardContainer
|
||||
title={t('settings.title')}
|
||||
subtitle={t('settings.description')}
|
||||
highlighted={isEditing}
|
||||
action={
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||
{isEditing && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
px: { xs: 0, sm: 3 },
|
||||
mx: 0,
|
||||
}}
|
||||
>
|
||||
<CardContainer
|
||||
title={t('settings.title')}
|
||||
subtitle={t('settings.description')}
|
||||
highlighted={isEditing}
|
||||
action={
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||
{isEditing && (
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={handleCancel}
|
||||
size="large"
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
textTransform: 'none',
|
||||
width: { xs: '100%', sm: 'auto' },
|
||||
fontSize: { xs: '0.85rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
{t('settings.rejectButton')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={handleCancel}
|
||||
onClick={handleEditToggle}
|
||||
size="large"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
textTransform: 'none',
|
||||
width: { xs: '100%', sm: 'auto' },
|
||||
fontSize: { xs: '0.85rem', sm: '1rem' },
|
||||
border: '1px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '4px',
|
||||
bgcolor: isEditing ? 'primary.main' : 'background.paper',
|
||||
color: isEditing ? 'primary.contrastText' : 'primary.main',
|
||||
px: { xs: 2, sm: '22px' },
|
||||
py: { xs: '6px', sm: '8px' },
|
||||
width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
|
||||
fontSize: { xs: '0.9rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
{t('settings.rejectButton')}
|
||||
{isEditing
|
||||
? t('settings.saveButton')
|
||||
: t('settings.editButton')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={handleEditToggle}
|
||||
size="large"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
border: '1px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '4px',
|
||||
bgcolor: isEditing ? 'primary.main' : 'background.paper',
|
||||
color: isEditing ? 'primary.contrastText' : 'primary.main',
|
||||
px: { xs: 2, sm: '22px' },
|
||||
py: { xs: '6px', sm: '8px' },
|
||||
width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
|
||||
fontSize: { xs: '0.9rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
{isEditing
|
||||
? t('settings.saveButton')
|
||||
: t('settings.editButton')}
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
bgcolor: 'background.paper',
|
||||
width: '100%',
|
||||
}}
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
mt: 2,
|
||||
bgcolor: 'background.paper',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
{isEditing ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body1">
|
||||
{t('settings.theme')}
|
||||
</Typography>
|
||||
<ThemeToggleButton />
|
||||
</Box>
|
||||
) : (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.theme')}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{mode === 'light'
|
||||
? t('settings.light')
|
||||
: t('settings.dark')}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: 2,
|
||||
mt: 2,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
{isEditing ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body1">
|
||||
{t('settings.theme')}
|
||||
</Typography>
|
||||
<ThemeToggleButton />
|
||||
</Box>
|
||||
) : (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.theme')}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{mode === 'light'
|
||||
? t('settings.light')
|
||||
: t('settings.dark')}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={languageOptions}
|
||||
getOptionLabel={(o) => o.label}
|
||||
value={
|
||||
languageOptions.find((o) => o.code === draftLanguage) ||
|
||||
null
|
||||
}
|
||||
onChange={handleDraftLanguageChange}
|
||||
renderInput={(p) => (
|
||||
<TextField {...p} label={t('settings.language')} />
|
||||
)}
|
||||
size="medium"
|
||||
fullWidth
|
||||
/>
|
||||
) : (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.language')}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{
|
||||
languageOptions.find((o) => o.code === savedLanguage)
|
||||
?.label
|
||||
}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ mt: 2, width: { xs: '100%', md: '50%' } }}>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={languageOptions}
|
||||
getOptionLabel={(o) => o.label}
|
||||
value={
|
||||
languageOptions.find((o) => o.code === draftLanguage) ||
|
||||
null
|
||||
}
|
||||
onChange={handleDraftLanguageChange}
|
||||
options={calendarOptions}
|
||||
value={selectedCalendar}
|
||||
onChange={(_, v) => v && setSelectedCalendar(v)}
|
||||
renderInput={(p) => (
|
||||
<TextField {...p} label={t('settings.language')} />
|
||||
<TextField {...p} label={t('settings.calendar')} />
|
||||
)}
|
||||
size="medium"
|
||||
fullWidth
|
||||
@@ -175,41 +209,15 @@ export function Setting() {
|
||||
) : (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.language')}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{
|
||||
languageOptions.find((o) => o.code === savedLanguage)
|
||||
?.label
|
||||
}
|
||||
{t('settings.calendar')}
|
||||
</Typography>
|
||||
<Typography variant="body1">{selectedCalendar}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ mt: 2, width: '100%' }}>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={calendarOptions}
|
||||
value={selectedCalendar}
|
||||
onChange={(_, v) => v && setSelectedCalendar(v)}
|
||||
renderInput={(p) => (
|
||||
<TextField {...p} label={t('settings.calendar')} />
|
||||
)}
|
||||
size="medium"
|
||||
fullWidth
|
||||
/>
|
||||
) : (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.calendar')}
|
||||
</Typography>
|
||||
<Typography variant="body1">{selectedCalendar}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContainer>
|
||||
</CardContainer>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageWrapper>
|
||||
);
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import { Box } from '@mui/material';
|
||||
import { PersonalInformation } from './PersonalInformation';
|
||||
import { PhoneNumber } from './PhoneNumber';
|
||||
import { SocialMedia } from './SocialMedia';
|
||||
|
||||
export function UserForm() {
|
||||
return (
|
||||
<Box sx={{ width: '100%', overflowX: 'clip' }}>
|
||||
<PersonalInformation />
|
||||
<PhoneNumber />
|
||||
<SocialMedia />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
createBrowserRouter,
|
||||
RouterProvider,
|
||||
@@ -71,7 +71,7 @@ export function Layout() {
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
|
||||
const contentMaxWidth = '100%';
|
||||
const contentWidthMd = '810px';
|
||||
// const contentWidthMd = '810px';
|
||||
const navWidthMd = '274px';
|
||||
|
||||
const navConfig: NavItemConfig[] = [
|
||||
@@ -183,68 +183,78 @@ export function Layout() {
|
||||
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
minHeight="100vh"
|
||||
px={{ xs: 2, sm: 3 }}
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
px: '185px',
|
||||
py: '105px',
|
||||
boxSizing: 'border-box',
|
||||
backgroundColor: 'background.default',
|
||||
}}
|
||||
>
|
||||
{!isMdUp && (
|
||||
<AppBar position="static">
|
||||
<Toolbar sx={{ backgroundColor: 'background.paper' }}>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
>
|
||||
<Menu size={24} color="#1976d2" variant="Bold" />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)}
|
||||
<Box display="flex" width="100%" maxWidth="100vw">
|
||||
{isMdUp && (
|
||||
<Box flex="0 0 auto" width={navWidthMd} position="relative">
|
||||
<SideNav
|
||||
navConfig={navConfig}
|
||||
header={<Header />}
|
||||
activePath={location.pathname + location.hash}
|
||||
sideNavVariant="full"
|
||||
positioning="absolute"
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
width={1100}
|
||||
height={800}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
bgcolor="background.paper"
|
||||
overflow="hidden"
|
||||
borderRadius={2}
|
||||
>
|
||||
{!isMdUp && (
|
||||
<AppBar position="static">
|
||||
<Toolbar sx={{ backgroundColor: 'background.paper' }}>
|
||||
<IconButton edge="start" onClick={() => setDrawerOpen(true)}>
|
||||
<Menu size={24} color="#1976d2" variant="Bold" />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)}
|
||||
<Box
|
||||
flexGrow={1}
|
||||
width={1070}
|
||||
maxWidth={1070}
|
||||
height={{ xs: 'auto', md: '814px' }}
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
px: { xs: 2, sm: 3 },
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
<Outlet />
|
||||
</Box>
|
||||
</Box>
|
||||
{!isMdUp && (
|
||||
<Drawer
|
||||
anchor="left"
|
||||
open={drawerOpen}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
>
|
||||
<Box width={navWidthMd}>
|
||||
<SideNav
|
||||
navConfig={navConfig}
|
||||
header={<Header />}
|
||||
activePath={location.pathname + location.hash}
|
||||
sideNavVariant="full"
|
||||
/>
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
{isMdUp && (
|
||||
<Box sx={{ width: navWidthMd, flexShrink: 0 }}>
|
||||
<SideNav
|
||||
navConfig={navConfig}
|
||||
header={<Header />}
|
||||
activePath={location.pathname + location.hash}
|
||||
sideNavVariant="full"
|
||||
positioning="absolute"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
overflowY: 'auto',
|
||||
px: 3,
|
||||
}}
|
||||
>
|
||||
<Outlet />
|
||||
</Box>
|
||||
</Drawer>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{!isMdUp && (
|
||||
<Drawer
|
||||
anchor="left"
|
||||
open={drawerOpen}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
>
|
||||
<Box width={navWidthMd}>
|
||||
<SideNav
|
||||
navConfig={navConfig}
|
||||
header={<Header />}
|
||||
activePath={location.pathname + location.hash}
|
||||
sideNavVariant="full"
|
||||
/>
|
||||
</Box>
|
||||
</Drawer>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user