Bläddra i källkod

feat module 6, 7 : move product description from top to product details

master
nadia 1 dag sedan
förälder
incheckning
2c4931e8b8
1 ändrade filer med 57 tillägg och 7 borttagningar
  1. 57
    7
      src/components/ProductDetails/ProductDetails.jsx

+ 57
- 7
src/components/ProductDetails/ProductDetails.jsx Visa fil

319
     null
319
     null
320
   )
320
   )
321
 
321
 
322
+  const productDetailsPanel = (
323
+    <Box
324
+      sx={{
325
+        maxHeight: expandedInfoRows.productDetails ? 1200 : 0,
326
+        overflow: "hidden",
327
+        borderBottom: expandedInfoRows.productDetails ? "1px solid #DDD" : "none",
328
+        transition: "max-height 0.25s ease-in-out"
329
+      }}
330
+    >
331
+      <Box
332
+        sx={{
333
+          pb: 3,
334
+          color: "text.secondary",
335
+          fontSize: {
336
+            xs: "0.875rem",
337
+            md: "1rem"
338
+          },
339
+          lineHeight: 1.6,
340
+          "& > div > *:first-child": {
341
+            borderTop: "none !important",
342
+            marginTop: "0 !important",
343
+            paddingTop: "0 !important"
344
+          },
345
+          "& hr:first-child": {
346
+            display: "none"
347
+          },
348
+          "& p": {
349
+            mt: 0,
350
+            mb: 1.5
351
+          },
352
+          "& ul": {
353
+            pl: 2.5,
354
+            mt: 0,
355
+            mb: 2
356
+          },
357
+          "& li": {
358
+            mb: 0.5
359
+          },
360
+          "& strong, & b": {
361
+            fontWeight: 700
362
+          }
363
+        }}
364
+      >
365
+        <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
366
+      </Box>
367
+    </Box>
368
+  )
369
+
322
 
370
 
323
   return (
371
   return (
324
     <Box sx={{ position: "relative" }}>
372
     <Box sx={{ position: "relative" }}>
340
             {product?.title}
388
             {product?.title}
341
           </Typography>
389
           </Typography>
342
 
390
 
391
+          {/*
392
+          Old product description position kept for reference.
393
+          Product details now display inside the PRODUCT DETAILS accordion section.
343
           <Box sx={{ mb: 3 }}>
394
           <Box sx={{ mb: 3 }}>
344
-            {/*
345
-            <Typography variant="body1" sx={{ fontWeight: "400", color: "#000" }}>
346
-              Description
347
-            </Typography>
348
-            */}
349
             <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
395
             <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
350
               <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
396
               <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
351
             </Typography>
397
             </Typography>
352
           </Box>
398
           </Box>
399
+          */}
353
 
400
 
354
           <Typography
401
           <Typography
355
             variant="body2"
402
             variant="body2"
628
           {/* Product Details */}
675
           {/* Product Details */}
629
           <Box
676
           <Box
630
             onClick={() => toggleInfoRow("productDetails")}
677
             onClick={() => toggleInfoRow("productDetails")}
631
-            sx={infoRowSx(expandedInfoRows.productDetails)}
678
+            sx={{
679
+              ...infoRowSx(expandedInfoRows.productDetails),
680
+              borderBottom: expandedInfoRows.productDetails ? "none" : "1px solid #DDD"
681
+            }}
632
           >
682
           >
633
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
683
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
634
               Product Details
684
               Product Details
635
             </Typography>
685
             </Typography>
636
             {expandedInfoRows.productDetails ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
686
             {expandedInfoRows.productDetails ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
637
           </Box>
687
           </Box>
638
-          {emptyInfoPanel("productDetails")}
688
+          {productDetailsPanel}
639
 
689
 
640
           {/* Material */}
690
           {/* Material */}
641
           <Box
691
           <Box

Laddar…
Avbryt
Spara