refactor(ProductDetailPage): improve layout and button functionality
- Adjusted layout to ensure a minimum height for attribute images and action buttons. - Enhanced button functionality by updating the availability request button and ensuring proper alignment of action buttons. - Cleaned up conditional rendering for attribute images to streamline the component's structure.
This commit is contained in:
@@ -1277,8 +1277,9 @@ class ProductDetailPage extends Component {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Attribute images and chips with action buttons */}
|
{/* Attribute images and chips with action buttons */}
|
||||||
|
|
||||||
|
<Box sx={{ minHeight: "107px", display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2, gap: 2 }}>
|
||||||
{(attributes.some(attr => attributeImages[attr.kMerkmalWert]) || attributes.some(attr => !attributeImages[attr.kMerkmalWert])) && (
|
{(attributes.some(attr => attributeImages[attr.kMerkmalWert]) || attributes.some(attr => !attributeImages[attr.kMerkmalWert])) && (
|
||||||
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2, gap: 2 }}>
|
|
||||||
<Stack direction="row" spacing={0} sx={{ flexWrap: "wrap", gap: 1, flex: 1 }}>
|
<Stack direction="row" spacing={0} sx={{ flexWrap: "wrap", gap: 1, flex: 1 }}>
|
||||||
{attributes
|
{attributes
|
||||||
.filter(attribute => attributeImages[attribute.kMerkmalWert])
|
.filter(attribute => attributeImages[attribute.kMerkmalWert])
|
||||||
@@ -1314,6 +1315,7 @@ class ProductDetailPage extends Component {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Stack>
|
</Stack>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Right-aligned action buttons */}
|
{/* Right-aligned action buttons */}
|
||||||
<Stack direction="column" spacing={1} sx={{ flexShrink: 0 }}>
|
<Stack direction="column" spacing={1} sx={{ flexShrink: 0 }}>
|
||||||
@@ -1369,7 +1371,7 @@ class ProductDetailPage extends Component {
|
|||||||
)}
|
)}
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Weight */}
|
{/* Weight */}
|
||||||
{product.weight > 0 && (
|
{product.weight > 0 && (
|
||||||
|
|||||||
Reference in New Issue
Block a user