andrei/biblical-guide.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate all pages from Grid to Box components using flexbox layout

Browse Source 
- Migrated search page to use Box with flexbox for responsive layout
- Updated bible reader controls to use Box instead of Grid
- Converted home page hero, features, and stats sections to flexbox
- Removed Grid imports and replaced with Box components across all pages
- Maintained responsive behavior using sx breakpoints and flex properties
This commit is contained in:
andupetcu
2025-09-22 08:57:13 +03:00
parent 5cbb20e96f
commit 82ace8d145
6 changed files with 115 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/[locale]/bible/reader.tsx
View File

@@ -596,9 +596,9 @@ export default function BibleReaderNew() {
border: `1px solid ${getThemeStyles().borderColor}`
}}
>
<Grid container spacing={2} alignItems="center" justifyContent="center">
{/* Books Selection */}
<Grid item xs={12} sm={4} md={3}>
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
{/* Books Selection */>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' }, minWidth: { sm: 200, md: 250 } }}>
<FormControl fullWidth size="small">
<InputLabel>{t('book')}</InputLabel>
<Select
@@ -617,10 +617,10 @@ export default function BibleReaderNew() {
))}
</Select>
</FormControl>
</Grid>
</Box>
{/* Chapter Selection */}
<Grid item xs={12} sm={3} md={2}>
<Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 120, md: 150 } }}>
<FormControl fullWidth size="small">
<InputLabel>{t('chapter')}</InputLabel>
<Select
@@ -646,10 +646,10 @@ export default function BibleReaderNew() {
))}
</Select>
</FormControl>
</Grid>
</Box>
{/* Font Size Controls */}
<Grid item xs={12} sm={3} md={2}>
{/* Font Size Controls */>
<Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 150 } }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<IconButton
size="small"
@@ -672,10 +672,10 @@ export default function BibleReaderNew() {
<Typography variant="h6">A⁺</Typography>
</IconButton>
</Box>
</Grid>
</Box>
{/* Action Buttons */}
<Grid item xs={12} sm={2} md={5}>
{/* Action Buttons */>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' } }}>
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
<Tooltip title={t('toggleFullscreen')}>
<IconButton
@@ -712,9 +712,9 @@ export default function BibleReaderNew() {
</IconButton>
</Tooltip>
</Box>
</Grid>
</Box>
</Grid>
</Box>
</Paper>
)

25
app/[locale]/bookmarks/page.tsx
View File

@@ -16,7 +16,6 @@ import {
Button,
Chip,
Divider,
Grid,
IconButton,
Alert,
CircularProgress,
@@ -222,8 +221,8 @@ export default function BookmarksPage() {
</Box>
{/* Stats */}
<Grid container spacing={3} sx={{ mb: 4 }}>
<Grid item xs={12} sm={4}>
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap', mb: 4 }}>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
<Card variant="outlined">
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant="h4" color="primary">
@@ -234,8 +233,8 @@ export default function BookmarksPage() {
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={4}>
</Box>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
<Card variant="outlined">
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant="h4" color="success.main">
@@ -246,8 +245,8 @@ export default function BookmarksPage() {
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={4}>
</Box>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
<Card variant="outlined">
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant="h4" color="warning.main">
@@ -258,8 +257,8 @@ export default function BookmarksPage() {
</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Box>
<Divider sx={{ mb: 3 }} />
@@ -309,9 +308,9 @@ export default function BookmarksPage() {
</Button>
</Box>
) : (
<Grid container spacing={3}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
{filteredBookmarks().map((bookmark) => (
<Grid item xs={12} key={bookmark.id}>
<Box key={bookmark.id}>
<Card variant="outlined" sx={{ transition: 'all 0.2s', '&:hover': { elevation: 2 } }}>
<CardContent>
<Box display="flex" justifyContent="space-between" alignItems="flex-start">
@@ -391,9 +390,9 @@ export default function BookmarksPage() {
</Box>
</CardContent>
</Card>
</Grid>
</Box>
))}
</Grid>
</Box>
)}
</Paper>
</Container>

37
app/[locale]/page.tsx
View File

@@ -1,7 +1,6 @@
'use client'
import {
Container,
Grid,
Card,
CardContent,
Typography,
@@ -70,8 +69,8 @@ export default function Home() {
}}
>
<Container maxWidth="lg">
<Grid container spacing={4} alignItems="center">
<Grid item xs={12} md={8}>
<Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', alignItems: 'center' }}>
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 60%' } }}>
<Typography variant="h2" component="h1" gutterBottom>
{t('hero.title')}
</Typography>
@@ -113,13 +112,13 @@ export default function Home() {
{t('hero.cta.askAI')}
</Button>
</Box>
</Grid>
<Grid item xs={12} md={4}>
</Box>
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 40%' } }}>
<Box sx={{ textAlign: 'center' }}>
<MenuBook sx={{ fontSize: 120, opacity: 0.8 }} />
</Box>
</Grid>
</Grid>
</Box>
</Box>
</Container>
</Box>
@@ -137,9 +136,9 @@ export default function Home() {
{t('features.subtitle')}
</Typography>
<Grid container spacing={4} justifyContent="center">
<Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
{features.map((feature, index) => (
<Grid item xs={12} md={6} key={index} sx={{ display: 'flex', justifyContent: 'center' }}>
<Box key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 16px)' }, display: 'flex', justifyContent: 'center' }}>
<Card
sx={{
height: '100%',
@@ -195,34 +194,34 @@ export default function Home() {
</Box>
</CardContent>
</Card>
</Grid>
</Box>
))}
</Grid>
</Box>
</Container>
{/* Stats Section */}
<Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
<Container maxWidth="lg">
<Grid container spacing={4} textAlign="center" justifyContent="center">
<Grid item xs={12} sm={4}>
<Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', textAlign: 'center', justifyContent: 'center' }}>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
<Typography variant="h3" color="primary.main" gutterBottom>
66
</Typography>
<Typography variant="h6">{t('stats.books')}</Typography>
</Grid>
<Grid item xs={12} sm={4}>
</Box>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
<Typography variant="h3" color="secondary.main" gutterBottom>
31,000+
</Typography>
<Typography variant="h6">{t('stats.verses')}</Typography>
</Grid>
<Grid item xs={12} sm={4}>
</Box>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
<Typography variant="h3" color="success.main" gutterBottom>
24/7
</Typography>
<Typography variant="h6">{t('stats.aiAvailable')}</Typography>
</Grid>
</Grid>
</Box>
</Box>
</Container>
</Paper>

13
app/[locale]/profile/page.tsx
View File

@@ -12,7 +12,6 @@ import {
TextField,
Button,
Avatar,
Grid,
Card,
CardContent,
Divider,
@@ -117,9 +116,9 @@ export default function ProfilePage() {
<Divider sx={{ mb: 4 }} />
{/* Profile Information */}
<Grid container spacing={3}>
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
{/* Personal Information Card */}
<Grid item xs={12} md={8}>
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(66.67% - 12px)' } }}>
<Card variant="outlined">
<CardContent>
<Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
@@ -189,10 +188,10 @@ export default function ProfilePage() {
)}
</CardContent>
</Card>
</Grid>
</Box>
{/* Account Details Card */}
<Grid item xs={12} md={4}>
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(33.33% - 12px)' } }}>
<Card variant="outlined">
<CardContent>
<Typography variant="h6" component="h2" gutterBottom>
@@ -221,8 +220,8 @@ export default function ProfilePage() {
</Box>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Box>
{/* Success/Error Message */}
{message && (

112
app/[locale]/search/page.tsx
View File

@@ -13,7 +13,6 @@ import {
Paper,
Card,
CardContent,
Grid,
Chip,
List,
ListItem,
@@ -654,52 +653,56 @@ export default function SearchPage() {
{/* Advanced Filters */}
<Collapse in={filtersOpen}>
<Paper elevation={2} sx={{ p: 3, mb: 4, borderRadius: 2 }}>
<Grid container spacing={3}>
<Grid item xs={12} sm={6} md={3}>
<FormControl fullWidth size="small">
<InputLabel>{t('filters.version')}</InputLabel>
<Select
value={filters.version}
label={t('filters.version')}
onChange={(e) => setFilters(prev => ({ ...prev, version: e.target.value }))}
>
{versions.map(v => (
<MenuItem key={v.abbreviation} value={v.abbreviation}>
{v.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
{/* First row of filters */}
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 auto' }, minWidth: { md: 200 } }}>
<FormControl fullWidth size="small">
<InputLabel>{t('filters.version')}</InputLabel>
<Select
value={filters.version}
label={t('filters.version')}
onChange={(e) => setFilters(prev => ({ ...prev, version: e.target.value }))}
>
{versions.map(v => (
<MenuItem key={v.abbreviation} value={v.abbreviation}>
{v.name}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
<Grid item xs={12} sm={6} md={3}>
<FormControl fullWidth size="small">
<InputLabel>Sort by</InputLabel>
<Select
value={filters.sortBy}
label="Sort by"
onChange={(e) => setFilters(prev => ({ ...prev, sortBy: e.target.value as any }))}
>
<MenuItem value="relevance">Relevance</MenuItem>
<MenuItem value="book">Book order</MenuItem>
<MenuItem value="reference">Reference</MenuItem>
</Select>
</FormControl>
</Grid>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 auto' }, minWidth: { md: 200 } }}>
<FormControl fullWidth size="small">
<InputLabel>Sort by</InputLabel>
<Select
value={filters.sortBy}
label="Sort by"
onChange={(e) => setFilters(prev => ({ ...prev, sortBy: e.target.value as any }))}
>
<MenuItem value="relevance">Relevance</MenuItem>
<MenuItem value="book">Book order</MenuItem>
<MenuItem value="reference">Reference</MenuItem>
</Select>
</FormControl>
</Box>
<Grid item xs={12} sm={6} md={3}>
<FormControlLabel
control={
<Checkbox
checked={filters.showContext}
onChange={(e) => setFilters(prev => ({ ...prev, showContext: e.target.checked }))}
/>
}
label="Show context"
/>
</Grid>
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 auto' }, display: 'flex', alignItems: 'center' }}>
<FormControlLabel
control={
<Checkbox
checked={filters.showContext}
onChange={(e) => setFilters(prev => ({ ...prev, showContext: e.target.checked }))}
/>
}
label="Show context"
/>
</Box>
</Box>
<Grid item xs={12}>
{/* Popular searches */}
<Box>
<Typography variant="subtitle2" gutterBottom>
{t('popular.title')}
</Typography>
@@ -718,9 +721,10 @@ export default function SearchPage() {
/>
))}
</Box>
</Grid>
</Box>
<Grid item xs={12}>
{/* Book selection */}
<Box>
<Typography variant="subtitle2" gutterBottom>
{t('filters.specificBooks')}
</Typography>
@@ -742,14 +746,14 @@ export default function SearchPage() {
/>
))}
</Box>
</Grid>
</Grid>
</Box>
</Box>
</Paper>
</Collapse>
<Grid container spacing={4}>
<Box sx={{ display: 'flex', gap: 4, flexDirection: { xs: 'column', md: 'row' } }}>
{/* Sidebar */}
<Grid item xs={12} md={3}>
<Box sx={{ width: { xs: '100%', md: '25%' }, flexShrink: 0 }}>
{/* Search History */}
{searchHistory.length > 0 && (
<Card sx={{ mb: 3 }}>
@@ -776,10 +780,10 @@ export default function SearchPage() {
</Card>
)}
</Grid>
</Box>
{/* Main Results */}
<Grid item xs={12} md={9}>
<Box sx={{ flex: 1, width: { xs: '100%', md: '75%' } }}>
<Box ref={resultsRef}>
{/* Results Header */}
{(results.length > 0 || loading) && (
@@ -959,8 +963,8 @@ export default function SearchPage() {
</Paper>
)}
</Box>
</Grid>
</Grid>
</Box>
</Box>
{/* Scroll to Top */}
{results.length > 5 && (

17
app/[locale]/settings/page.tsx
View File

@@ -15,7 +15,6 @@ import {
MenuItem,
FormControl,
InputLabel,
Grid,
Card,
CardContent,
Divider,
@@ -79,9 +78,9 @@ export default function SettingsPage() {
<Divider sx={{ mb: 4 }} />
<Grid container spacing={3}>
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
{/* Appearance Settings */}
<Grid item xs={12} md={6}>
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
<Card variant="outlined">
<CardContent>
<Box display="flex" alignItems="center" mb={3}>
@@ -123,10 +122,10 @@ export default function SettingsPage() {
</Box>
</CardContent>
</Card>
</Grid>
</Box>
{/* Language & Notifications */}
<Grid item xs={12} md={6}>
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
<Card variant="outlined">
<CardContent>
<Box display="flex" alignItems="center" mb={3}>
@@ -175,10 +174,10 @@ export default function SettingsPage() {
</Box>
</CardContent>
</Card>
</Grid>
</Box>
{/* Security Settings */}
<Grid item xs={12}>
<Box sx={{ flex: '1 1 100%' }}>
<Card variant="outlined">
<CardContent>
<Box display="flex" alignItems="center" mb={3}>
@@ -197,8 +196,8 @@ export default function SettingsPage() {
</Button>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Box>
{/* Save Button */}
<Box textAlign="center" mt={4}>