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

Enhance responsive design in profile components by adjusting padding and layout properties for improved mobile usability. Updated styles in ButtonGroup, CartTab, OrdersTab, SettingsTab, and ProfilePage to ensure better visual consistency across different screen sizes.

Browse Source
This commit is contained in:
seb
2025-07-04 05:01:39 +02:00
parent 8abf64ca38
commit 5fc0c3213b
5 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -142,7 +142,7 @@ class ButtonGroup extends Component {
onClose={this.toggleCart} onClose={this.toggleCart}
disableScrollLock={true} disableScrollLock={true}
> >
<Box sx={{ width: 420, p: 2 }}> <Box sx={{ width: { xs: '100vw', sm: 420 }, p: { xs: 1, sm: 2 } }}>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',

2
src/components/profile/CartTab.js
View File

@@ -409,7 +409,7 @@ class CartTab extends Component {
const displayError = completionError || preSubmitError; const displayError = completionError || preSubmitError;
return ( return (
<Box sx={{ p: 3 }}> <Box sx={{ p: { xs: 1, sm: 3 } }}>
{/* Payment Confirmation */} {/* Payment Confirmation */}
{showPaymentConfirmation && ( {showPaymentConfirmation && (
<PaymentConfirmationDialog <PaymentConfirmationDialog

6
src/components/profile/OrdersTab.js
View File

@@ -139,7 +139,7 @@ const OrdersTab = ({ orderIdFromHash }) => {
if (loading) { if (loading) {
return ( return (
<Box sx={{ p: 3, display: "flex", justifyContent: "center" }}> <Box sx={{ p: { xs: 1, sm: 3 }, display: "flex", justifyContent: "center" }}>
<CircularProgress /> <CircularProgress />
</Box> </Box>
); );
@@ -147,14 +147,14 @@ const OrdersTab = ({ orderIdFromHash }) => {
if (error) { if (error) {
return ( return (
<Box sx={{ p: 3 }}> <Box sx={{ p: { xs: 1, sm: 3 } }}>
<Alert severity="error">{error}</Alert> <Alert severity="error">{error}</Alert>
</Box> </Box>
); );
} }
return ( return (
<Box sx={{ p: 3 }}> <Box sx={{ p: { xs: 1, sm: 3 } }}>
{orders.length > 0 ? ( {orders.length > 0 ? (
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table> <Table>

8
src/components/profile/SettingsTab.js
View File

@@ -235,8 +235,8 @@ class SettingsTab extends Component {
render() { render() {
return ( return (
<Box sx={{ p: 3 }}> <Box sx={{ p: { xs: 1, sm: 3 } }}>
<Paper sx={{ p: 3}}> <Paper sx={{ p: { xs: 2, sm: 3 } }}>
<Typography variant="subtitle1" fontWeight="bold" gutterBottom> <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
Passwort ändern Passwort ändern
</Typography> </Typography>
@@ -289,7 +289,7 @@ class SettingsTab extends Component {
<Divider sx={{ my: 4 }} /> <Divider sx={{ my: 4 }} />
<Paper sx={{ p: 3 }}> <Paper sx={{ p: { xs: 2, sm: 3 } }}>
<Typography variant="subtitle1" fontWeight="bold" gutterBottom> <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
E-Mail-Adresse ändern E-Mail-Adresse ändern
</Typography> </Typography>
@@ -332,7 +332,7 @@ class SettingsTab extends Component {
<Divider sx={{ my: 4 }} /> <Divider sx={{ my: 4 }} />
<Paper sx={{ p: 3 }}> <Paper sx={{ p: { xs: 2, sm: 3 } }}>
<Typography variant="subtitle1" fontWeight="bold" gutterBottom> <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
API-Schlüssel API-Schlüssel
</Typography> </Typography>

19
src/pages/ProfilePage.js
View File

@@ -167,11 +167,16 @@ const ProfilePage = (props) => {
} }
return ( return (
<Container maxWidth="md" sx={{ py: 4 }}> <Container maxWidth="md" sx={{ py: { xs: 0, sm: 4 }, px: { xs: 0, sm: 3 } }}>
<Paper elevation={2} sx={{ borderRadius: 2, overflow: 'hidden' }}> <Paper elevation={{ xs: 0, sm: 2 }} sx={{ borderRadius: { xs: 0, sm: 2 }, overflow: 'hidden' }}>
<Box sx={{ bgcolor: '#2e7d32', p: 3, color: 'white' }}> <Box sx={{ bgcolor: '#2e7d32', p: { xs: 2, sm: 3 }, color: 'white' }}>
<Typography variant="h5" fontWeight="bold"> <Typography variant="h5" fontWeight="bold">
Mein Profil {window.innerWidth < 600 ?
(tabValue === 0 ? 'Bestellabschluss' :
tabValue === 1 ? 'Bestellungen' :
tabValue === 2 ? 'Einstellungen' : 'Mein Profil')
: 'Mein Profil'
}
</Typography> </Typography>
{user && ( {user && (
<Typography variant="body1" sx={{ mt: 1 }}> <Typography variant="body1" sx={{ mt: 1 }}>
@@ -185,7 +190,11 @@ const ProfilePage = (props) => {
value={tabValue} value={tabValue}
onChange={handleTabChange} onChange={handleTabChange}
variant="fullWidth" variant="fullWidth"
sx={{ borderBottom: 1, borderColor: 'divider' }} sx={{
borderBottom: 1,
borderColor: 'divider',
display: { xs: 'none', sm: 'flex' }
}}
TabIndicatorProps={{ TabIndicatorProps={{
style: { backgroundColor: '#2e7d32' } style: { backgroundColor: '#2e7d32' }
}} }}