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

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 && (