seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

Enhance responsive design across components by adjusting padding, margins, and layout properties for better mobile usability. Updated styles in Content, Header, Product, ProductFilters, ProductList, and SearchBar components to improve visual consistency and user experience on various screen sizes.

Browse Source
This commit is contained in:
seb
2025-07-04 04:51:15 +02:00
parent e16ae9f5a6
commit 8abf64ca38
6 changed files with 140 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Content.js
View File

@@ -441,7 +441,7 @@ class Content extends Component {
return (
<Container maxWidth="xl" sx={{ py: 2, flexGrow: 1, display: 'grid', gridTemplateRows: '1fr' }}>
<Container maxWidth="xl" sx={{ py: { xs: 0, sm: 2 }, px: { xs: 0, sm: 3 }, flexGrow: 1, display: 'grid', gridTemplateRows: '1fr' }}>
{showCategoryBoxes ? (
// Show category boxes layout when no products but have child categories
@@ -491,30 +491,20 @@ class Content extends Component {
</Box>
{/* Subcategories Grid */}
<Box sx={{ flex: 1, minWidth: 0 }}>
<CategoryBoxGrid
categories={this.state.childCategories}
showTitle={false}
spacing={3}
/>
<Box sx={{ flexGrow: 1 }}>
<CategoryBoxGrid categories={this.state.childCategories} />
</Box>
</Box>
);
} else {
// Just show subcategories without parent
return (
<CategoryBoxGrid
categories={this.state.childCategories}
showTitle={false}
spacing={3}
/>
);
// No parent category, just show subcategories
return <CategoryBoxGrid categories={this.state.childCategories} />;
}
})()}
</Box>
)}
{/* Show parent category navigation when in 2nd or 3rd level but no subcategories */}
{/* Show standalone parent category navigation when there are only products */}
{this.state.loaded &&
this.props.params.categoryId &&
!(this.state.unfilteredProducts.length > 0 && this.state.childCategories.length > 0) && (() => {
@@ -558,7 +548,7 @@ class Content extends Component {
<Box sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', sm: '1fr 2fr', md: '1fr 3fr', lg: '1fr 4fr', xl: '1fr 4fr' },
gap: 3
gap: { xs: 0, sm: 3 }
}}>
<Stack direction="row" spacing={0} sx={{

31
src/components/Header.js
View File

@@ -42,8 +42,12 @@ class Header extends Component {
return (
<AppBar position="sticky" color="primary" elevation={0} sx={{ zIndex: 1100 }}>
<Toolbar sx={{ minHeight: 64 }}>
<Container maxWidth="lg" sx={{ display: 'flex', alignItems: 'center' }}>
<Toolbar sx={{ minHeight: 64, py: { xs: 0.5, sm: 0 } }}>
<Container maxWidth="lg" sx={{
display: 'flex',
alignItems: 'center',
px: { xs: 0, sm: 3 }
}}>
{/* First row: Logo and ButtonGroup on xs, all items on larger screens */}
<Box sx={{
display: 'flex',
@@ -56,23 +60,36 @@ class Header extends Component {
display: 'flex',
alignItems: 'center',
width: '100%',
justifyContent: { xs: 'space-between', sm: 'flex-start' }
justifyContent: { xs: 'space-between', sm: 'flex-start' },
minHeight: { xs: 52, sm: 'auto' },
px: { xs: 0, sm: 0 }
}}>
<Logo />
{/* SearchBar visible on sm and up */}
<Box sx={{ display: { xs: 'none', sm: 'block' }, flexGrow: 1 }}>
<SearchBar />
</Box>
<ButtonGroupWithRouter socket={socket}/>
<Box sx={{
display: 'flex',
alignItems: { xs: 'flex-end', sm: 'center' },
transform: { xs: 'translateY(4px) translateX(9px)', sm: 'none' },
ml: { xs: 0, sm: 0 }
}}>
<ButtonGroupWithRouter socket={socket}/>
</Box>
</Box>
{/* Second row: SearchBar only on xs */}
{/* Second row: SearchBar only on xs - make it wider */}
<Box sx={{
display: { xs: 'block', sm: 'none' },
width: '100%',
mt: 1,mb: 1
mt: { xs: 1, sm: 0 },
mb: { xs: 0.5, sm: 0 },
px: { xs: 0, sm: 0 }
}}>
<SearchBar />
<Box sx={{ width: '100%' }}>
<SearchBar />
</Box>
</Box>
</Box>
</Container>

13
src/components/Product.js
View File

@@ -180,18 +180,21 @@ class Product extends Component {
<Card
sx={{
width: { xs: 'calc(100vw - 48px)', sm: '250px' },
minWidth: { xs: 'calc(100vw - 48px)', sm: '250px' },
width: { xs: '100vw', sm: '250px' },
minWidth: { xs: '100vw', sm: '250px' },
height: '100%',
display: 'flex',
flexDirection: 'column',
transition: 'transform 0.3s ease, box-shadow 0.3s ease',
position: 'relative',
overflow: 'hidden',
borderRadius: '8px',
borderRadius: { xs: 0, sm: '8px' },
border: { xs: 'none', sm: 'inherit' },
boxShadow: { xs: 'none', sm: 'inherit' },
mx: { xs: 0, sm: 'auto' },
'&:hover': {
transform: 'translateY(-5px)',
boxShadow: '0px 10px 20px rgba(0,0,0,0.1)'
transform: { xs: 'none', sm: 'translateY(-5px)' },
boxShadow: { xs: 'none', sm: '0px 10px 20px rgba(0,0,0,0.1)' }
}
}}
>

12
src/components/ProductFilters.js
View File

@@ -162,13 +162,17 @@ class ProductFilters extends Component {
return (
<Paper
id="filters-paper"
elevation={1}
elevation={window.innerWidth < 600 ? 0 : 1}
sx={{
p: 2,
borderRadius: 2,
p: { xs: 1, sm: 2 },
borderRadius: { xs: 0, sm: 2 },
bgcolor: 'background.paper',
display: 'flex',
flexDirection: 'column'
flexDirection: 'column',
border: { xs: 'none', sm: 'inherit' },
boxShadow: { xs: 'none', sm: 'inherit' },
mx: { xs: 0, sm: 'auto' },
width: { xs: '100%', sm: 'auto' }
}}
>

109
src/components/ProductList.js
View File

@@ -123,8 +123,14 @@ class ProductList extends Component {
renderPagination = (pages, page) => {
return (
<Box sx={{ height: 64, display: 'flex', alignItems: 'center', justifyContent: 'left' }}>
{((this.state.itemsPerPage==='all')||(this.props.products.length<this.state.itemsPerPage))?null:
<Box sx={{
height: 64,
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
width: '100%'
}}>
{(this.state.itemsPerPage==='all')?null:
<Pagination
count={pages}
page={page}
@@ -164,15 +170,28 @@ class ProductList extends Component {
const products = this.state.itemsPerPage==='all'?[...filteredProducts]:filteredProducts.slice((this.state.page - 1) * this.state.itemsPerPage , this.state.page * this.state.itemsPerPage);
return (
<Box sx={{ height: '100%' }}>
<Box sx={{ height: '100%', px: { xs: 0, sm: 0 } }}>
<Box sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
alignItems: 'center',
flexDirection: { xs: 'column', sm: 'row' },
gap: { xs: 1, sm: 0 },
px: { xs: 0, sm: 0 },
py: { xs: 1, sm: 0 },
bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
mb: { xs: 0, sm: 0 }
}}>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
<Box sx={{
display: 'flex',
gap: { xs: 0.5, sm: 1 },
alignItems: 'center',
flexWrap: 'wrap',
order: { xs: 2, sm: 1 },
px: { xs: 1, sm: 0 }
}}>
{this.props.activeAttributeFilters.map((filter,index) => (
<Chip
size="medium"
@@ -207,9 +226,23 @@ class ProductList extends Component {
))}
</Box>
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
<Box sx={{
display: 'flex',
gap: { xs: 1, sm: 2 },
alignItems: 'center',
order: { xs: 1, sm: 2 },
width: { xs: '100%', sm: 'auto' },
justifyContent: { xs: 'space-between', sm: 'flex-end' },
px: { xs: 1, sm: 0 }
}}>
{/* Sort Dropdown */}
<FormControl variant="outlined" size="small" sx={{ minWidth: 140 }}>
<FormControl
variant={window.innerWidth < 600 ? 'standard' : 'outlined'}
size="small"
sx={{
minWidth: { xs: 120, sm: 140 }
}}
>
<InputLabel id="sort-by-label">Sortierung</InputLabel>
<Select
size="small"
@@ -244,7 +277,13 @@ class ProductList extends Component {
</FormControl>
{/* Per Page Dropdown */}
<FormControl variant="outlined" size="small" sx={{ minWidth: 100 }}>
<FormControl
variant={window.innerWidth < 600 ? 'standard' : 'outlined'}
size="small"
sx={{
minWidth: { xs: 80, sm: 100 }
}}
>
<InputLabel id="products-per-page-label">pro Seite</InputLabel>
<Select
labelId="products-per-page-label"
@@ -278,16 +317,37 @@ class ProductList extends Component {
<MenuItem value="all">Alle</MenuItem>
</Select>
</FormControl>
{/* Product count info - mobile only */}
<Box sx={{
display: { xs: 'block', sm: 'none' },
ml: 1
}}>
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.75rem' }}>
{
this.props.totalProductCount==this.props.products.length && this.props.totalProductCount>0 ?
`${this.props.totalProductCount} Produkte`
:
`${this.props.products.length} von ${this.props.totalProductCount} Produkte`
}
</Typography>
</Box>
</Box>
</Box>
<Box sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
alignItems: 'center',
px: { xs: 0, sm: 0 },
py: { xs: 1, sm: 0 },
bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
mt: { xs: 0, sm: 0 }
}}>
{ this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page) }
<Stack direction="row" spacing={2}>
<Box sx={{ px: { xs: 1, sm: 0 }, width: '100%' }}>
{ this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page) }
</Box>
<Stack direction="row" spacing={2} sx={{ display: { xs: 'none', sm: 'flex' }, px: { xs: 1, sm: 0 } }}>
<Typography variant="body2" color="text.secondary">
{/*this.props.dataType == 'category' && (<>Kategorie: {this.props.dataParam}</>)}*/}
{this.props.dataType == 'search' && (<>Suchergebnisse für: "{this.props.dataParam}"</>)}
@@ -303,14 +363,19 @@ class ProductList extends Component {
</Stack>
</Box>
<Grid container spacing={2}>
{products.map((product) => (
<Grid container spacing={{ xs: 0, sm: 2 }}>
{products.map((product, index) => (
<Grid
key={product.id}
key={product.id}
sx={{
display: 'flex',
justifyContent: { xs: 'stretch', sm: 'center' },
mb: 1
mb: { xs: 0, sm: 1 },
width: { xs: '100%', sm: 'auto' },
borderBottom: {
xs: index < products.length - 1 ? '16px solid #e8f5e8' : 'none',
sm: 'none'
}
}}
>
<Product
@@ -338,8 +403,18 @@ class ProductList extends Component {
</Grid>
))}
</Grid>
{this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page)}
{/* Bottom pagination */}
<Box sx={{
px: { xs: 0, sm: 0 },
py: { xs: 1, sm: 1 },
bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
mt: { xs: 0, sm: 2 }
}}>
<Box sx={{ px: { xs: 1, sm: 0 } }}>
{this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page)}
</Box>
</Box>
</Box>
);
}

2
src/components/header/SearchBar.js
View File

@@ -219,7 +219,7 @@ const SearchBar = () => {
onSubmit={handleSearch}
sx={{
flexGrow: 1,
mx: { xs: 1, sm: 2, md: 4 },
mx: { xs: 0, sm: 2, md: 4 },
position: "relative",
}}
>