From bcc7f9ec1887c2cfaa4125207e5c900c6569aab5 Mon Sep 17 00:00:00 2001
From: Carlos Lins <carloslinsdev@gmail.com>
Date: Tue, 24 Jan 2023 23:11:24 -0300
Subject: [PATCH] feat: Responsividade tablet finalizada

---
 .../components/description-section/index.tsx  |  4 +-
 .../components/description-section/styles.css | 35 +++++++++++--
 store/blocks/pdp/product.jsonc                |  9 ++--
 styles/css/vtex.flex-layout.css               |  8 +++
 styles/css/vtex.product-identifier.css        |  7 +++
 styles/css/vtex.rich-text.css                 |  6 +++
 styles/css/vtex.store-components.css          | 41 ++++++++++++++-
 styles/css/vtex.tab-layout.css                | 15 ++++++
 .../sass/pages/product/vtex.flex-layout.scss  | 10 ++++
 .../product/vtex.product-identifier.scss      |  7 +++
 styles/sass/pages/product/vtex.rich-text.scss |  6 +++
 .../pages/product/vtex.store-components.scss  | 50 +++++++++++++++++--
 .../sass/pages/product/vtex.tab-layout.scss   | 17 +++++++
 13 files changed, 202 insertions(+), 13 deletions(-)

diff --git a/react/components/description-section/index.tsx b/react/components/description-section/index.tsx
index 2d5d5af..b2f5bfb 100644
--- a/react/components/description-section/index.tsx
+++ b/react/components/description-section/index.tsx
@@ -12,7 +12,9 @@ export const DescriptionSection: FC = () => {
 
   return (
       <div className={styles.wrapperImageAndDescription}>
-        <img className={styles.imageProductDescriptionSection} src={imageProduct} alt={imageProductAlt} />
+        <div className={styles.containerImageProductDescriptionSection}>
+          <img className={styles.imageProductDescriptionSection} src={imageProduct} alt={imageProductAlt} />
+        </div>
         <div className={styles.wrapperDescriptionSection}>
           <h3 className={styles.descriptionSectionTitle}>Descrição do produto</h3>
           <p className={styles.descriptionSectionParagraph}>{descriptionProduct}</p>
diff --git a/react/components/description-section/styles.css b/react/components/description-section/styles.css
index 8fada6f..8e7c700 100644
--- a/react/components/description-section/styles.css
+++ b/react/components/description-section/styles.css
@@ -1,12 +1,19 @@
 .wrapperImageAndDescription{
-  display: flex;
+  display: grid;
   gap: 32px;
+  grid-template-columns: 47.591% 1fr;
+  margin-left: 32px;
+}
+
+.containerImageProductDescriptionSection{
+  width: 100%;
+  height: 100%;
+  display: flex;
 }
 
 .imageProductDescriptionSection{
-  margin-left: 32px;
-  width: 632px;
-  height: 632px;
+  width: 100%;
+  height: 100%;
 }
 
 .descriptionSectionTitle{
@@ -14,6 +21,10 @@
   font-size: 24px;
   line-height: 32px;
   color: #575757;
+
+  height: 40px;
+  margin: 0;
+  margin-bottom: 8px;
 }
 
 .descriptionSectionParagraph{
@@ -22,4 +33,20 @@
   line-height: 22px;
 
   color: #929292;
+  margin: 0;
+}
+
+@media screen and (max-width: 1024px) {
+  .wrapperImageAndDescription{
+    display: flex;
+    flex-direction: column;
+    margin-left: 0;
+    gap: 16px;
+
+    border-bottom: 1px solid #BFBFBF;
+  }
+
+  .descriptionSectionParagraph{
+    margin-bottom: 16px;
+  }
 }
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index efe12ba..d5b0745 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -159,7 +159,8 @@
     "props": {
       "blockClass": "container-slider-related-products-pdp",
       "itemsPerPage": {
-        "desktop": 4
+        "desktop": 4,
+        "tablet": 3
       }
     }
   },
@@ -249,13 +250,15 @@
       "blockClass": "product-images-pdp",
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
       "showNavigationArrows": false,
       "displayThumbnailsArrows": false,
       "thumbnailsOrientation": "horizontal",
       "showPaginationDots": false,
-      "thumbnailMaxHeight": 90
+      "thumbnailMaxHeight": 90,
+      "thumbnailVisibility": "visible"
+
     }
   },
   "flex-layout.col#right-col": {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 0f36af1..1759793 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -53,4 +53,12 @@
 }
 .flexRowContent--container-related-products-pdp .stretchChildrenWidth {
   width: 100% !important;
+}
+
+@media screen and (max-width: 1024px) {
+  .flexRow--container-product-main .flexRowContent--container-product-main {
+    display: flex;
+    flex-direction: column;
+    padding-top: 16px;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index ee1e0a2..750205b 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -21,4 +21,11 @@
   line-height: 19px;
   text-align: right;
   color: rgba(146, 146, 146, 0.48);
+}
+
+@media screen and (max-width: 1024px) {
+  .product-identifier--productReference {
+    justify-content: flex-start;
+    margin-bottom: 24px;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 9b4a1aa..3b35606 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -18,4 +18,10 @@
   line-height: 38px;
   color: #575757;
   margin: 0;
+}
+
+@media screen and (max-width: 1024px) {
+  .container--title-related-products {
+    margin-bottom: 24px;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index da11a98..22d50d0 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -254,8 +254,6 @@
 }
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
   grid-area: frete;
-}
-.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
   font-size: 0;
 }
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
@@ -285,4 +283,43 @@
 }
 .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
   grid-area: prazo;
+}
+
+@media screen and (max-width: 1024px) {
+  .productNameContainer {
+    margin-top: 32px;
+    text-align: left;
+  }
+}
+@media screen and (max-width: 768px) {
+  .shippingContainer {
+    width: 100%;
+    grid-template-areas: "label button" "notCep notCep";
+    grid-template-columns: 83.4459% 1fr;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    padding: 0;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+    grid-area: label;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+    padding: 0 16px;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: #AFAFAF;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+    display: none;
+  }
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+    top: 0;
+    margin-top: 8px;
+  }
+  .carouselGaleryThumbs--product-images-pdp {
+    display: block !important;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 0132a3a..8f9e156 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -46,4 +46,19 @@
 }
 .listContainer--container-list-tab-layout-pdp .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
   color: #000000;
+}
+
+@media screen and (max-width: 1024px) {
+  .listContainer--container-list-tab-layout-pdp {
+    flex-direction: column;
+    padding: 0;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+  .listContainer--container-list-tab-layout-pdp .listItem {
+    width: max-content;
+  }
+  .listContainer--container-list-tab-layout-pdp .listItemActive {
+    border: 0;
+  }
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 2bbed2c..5bf7b89 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -51,3 +51,13 @@
     width: 100% !important;
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .flexRow--container-product-main{
+    .flexRowContent--container-product-main {
+      display: flex;
+      flex-direction: column;
+      padding-top: 16px;
+     }
+  }
+}
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
index 4846395..eaadd24 100644
--- a/styles/sass/pages/product/vtex.product-identifier.scss
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -15,3 +15,10 @@
   color: rgba(146, 146, 146, 0.48);
  }
 }
+
+@media screen and (max-width: 1024px) {
+  .product-identifier--productReference{
+    justify-content: flex-start;
+    margin-bottom: 24px;
+  }
+}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index 382d229..e30e484 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -12,3 +12,9 @@
     margin: 0;
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .container--title-related-products{
+    margin-bottom: 24px;
+  }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 02a70da..8179d7b 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -286,9 +286,6 @@
 
       .shippingTableHeadDeliveryPrice{
         grid-area: frete;
-      }
-
-      .shippingTableHeadDeliveryPrice{
         font-size: 0;
         &::after{
           content: "FRETE";
@@ -330,3 +327,50 @@
     }
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .productNameContainer{
+    margin-top: 32px;
+    text-align: left;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .shippingContainer{
+    width: 100%;
+    grid-template-areas: "label button"
+                          "notCep notCep";
+    grid-template-columns: 83.4459% 1fr;
+
+    :global(.vtex-address-form__postalCode){
+      padding: 0;
+      :global(.vtex-input){
+        grid-area: label;
+
+        :global(.vtex-input-prefix__group){
+          :global(.vtex-address-form-4-x-input){
+            padding: 0 16px;
+            &::placeholder{
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 16px;
+              color: #AFAFAF;
+            }
+          }
+          :global(.vtex-input__suffix){
+            display: none;
+          }
+        }
+      }
+
+      :global(.vtex-address-form__postalCode-forgottenURL){
+        top: 0;
+        margin-top: 8px;
+      }
+    }
+  }
+
+  .carouselGaleryThumbs--product-images-pdp{
+    display: block !important;
+  }
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 61b0a3b..ed6b840 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -49,3 +49,20 @@
     }
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .listContainer--container-list-tab-layout-pdp{
+    flex-direction: column;
+    padding: 0;
+    gap: 16px;
+    margin-bottom: 16px;
+
+    .listItem{
+      width: max-content;
+    }
+
+    .listItemActive{
+      border: 0;
+    }
+  }
+}