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}
disableScrollLock={true}
>
<Box sx={{ width: 420, p: 2 }}>
<Box sx={{ width: { xs: '100vw', sm: 420 }, p: { xs: 1, sm: 2 } }}>
<Box
sx={{
display: 'flex',

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

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

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

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

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

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

19
src/pages/ProfilePage.js
View File

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