andrei/maternal-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add collapsible sections and mobile grid layout
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
Details
CI/CD Pipeline / E2E Tests (push) Has been cancelled
Details
CI/CD Pipeline / Build Application (push) Has been cancelled
Details

Browse Source 
- Convert Active Sessions and Trusted Devices to collapsible Accordion components
- Display count badge in collapsed state
- Show loading state in accordion header
- Implement 2-card grid layout on mobile (xs=6)
- Responsive card sizing and spacing
- Centered layout on mobile, horizontal on desktop
- Hide full birthdate on mobile, show age only

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andrei
2025-10-04 08:08:24 +00:00
parent ec3f0264a0
commit 426b5a309e
5 changed files with 79 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
maternal-web/app/children/page.tsx
View File

@@ -214,9 +214,9 @@ export default function ChildrenPage() {
</Grid>
</Grid>
) : (
<Grid container spacing={3}>
<Grid container spacing={{ xs: 2, sm: 3 }}>
{children.map((child, index) => (
<Grid item xs={12} sm={6} key={child.id}>
<Grid item xs={6} sm={6} md={4} key={child.id}>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@@ -225,43 +225,43 @@ export default function ChildrenPage() {
<Paper
elevation={0}
sx={{
p: 3,
p: { xs: 2, sm: 3 },
borderRadius: 3,
bgcolor: 'background.paper',
border: 1,
borderColor: 'divider'
}}
>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'center', sm: 'flex-start' }, gap: { xs: 1, sm: 2 } }}>
<Avatar
src={child.photoUrl}
sx={{
width: 64,
height: 64,
width: { xs: 48, sm: 64 },
height: { xs: 48, sm: 64 },
bgcolor: 'primary.light',
fontSize: 24
fontSize: { xs: 20, sm: 24 }
}}
>
{child.name[0]}
</Avatar>
<Box sx={{ flexGrow: 1 }}>
<Typography variant="h6" fontWeight="600">{child.name}</Typography>
<Typography variant="body2" color="text.secondary">
<Box sx={{ flexGrow: 1, textAlign: { xs: 'center', sm: 'left' }, width: '100%' }}>
<Typography variant="h6" fontWeight="600" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>{child.name}</Typography>
<Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
{t(`gender.${child.gender}`)}
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 1 }}>
<Box sx={{ display: { xs: 'none', sm: 'flex' }, alignItems: 'center', gap: 1, mt: 1 }}>
<CalendarToday fontSize="small" color="action" />
<Typography variant="caption">
{formatDate(child.birthDate, 'PPP')}
</Typography>
</Box>
<Typography variant="caption" color="primary.main">
<Typography variant="caption" color="primary.main" sx={{ display: 'block', mt: 0.5 }}>
{t('age')}: {calculateAge(child.birthDate)}
</Typography>
</Box>
</Box>
<Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
<Box sx={{ display: 'flex', gap: 1, mt: 2, justifyContent: { xs: 'center', sm: 'flex-start' } }}>
<IconButton size="small" color="primary" onClick={() => handleEditChild(child)}>
<Edit />
</IconButton>

10
maternal-web/app/settings/page.tsx
View File

@@ -266,10 +266,9 @@ export default function SettingsPage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.3 }}
style={{ marginBottom: '24px' }}
>
<Box sx={{ mb: 3 }}>
<SessionsManagement />
</Box>
<SessionsManagement />
</motion.div>
{/* Device Trust Management */}
@@ -277,10 +276,9 @@ export default function SettingsPage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.33 }}
style={{ marginBottom: '24px' }}
>
<Box sx={{ mb: 3 }}>
<DeviceTrustManagement />
</Box>
<DeviceTrustManagement />
</motion.div>
{/* Biometric Authentication */}