From e957f88ecb049ca245715299eb6452060a96c198 Mon Sep 17 00:00:00 2001
From: vitorsoaresdev <dev.vitors@gmail.com>
Date: Thu, 9 Feb 2023 14:07:51 -0300
Subject: [PATCH] feat: adiciona responsividade 2560px

---
 react/components/Html/styles.css              | 12 ++++++++
 store/blocks/pdp/product.jsonc                |  3 +-
 styles/css/vtex.breadcrumb.css                |  5 ++++
 styles/css/vtex.flex-layout.css               |  7 ++++-
 styles/css/vtex.product-summary.css           |  1 +
 styles/css/vtex.slider-layout.css             | 22 +++++----------
 styles/css/vtex.store-components.css          | 11 ++++----
 styles/css/vtex.tab-layout.css                | 13 ++++++---
 .../sass/pages/product/vtex.breadcrumb.scss   |  4 +++
 .../sass/pages/product/vtex.flex-layout.scss  |  6 +++-
 .../pages/product/vtex.product-summary.scss   |  6 ++++
 .../pages/product/vtex.slider-layout.scss     | 28 +++++++++++--------
 .../pages/product/vtex.store-components.scss  | 14 ++++------
 .../sass/pages/product/vtex.tab-layout.scss   | 12 +++++---
 14 files changed, 93 insertions(+), 51 deletions(-)

diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 2cef6d9..6384192 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -14,12 +14,17 @@
 
 [class*="description-container"] {
   display: flex;
+  gap: 32px;
 }
 
 [class*="add-to-cart-button"] {
   width: 100%;
 }
 
+[class*="html--product-summary"] {
+  padding: 0 40px;
+}
+
 @media only screen and (max-width: 1024px) {
   [class*="html--buy-button"] :global(.vtex-button) {
     width: 100%;
@@ -27,6 +32,7 @@
 
   [class*="description-container"] {
     flex-direction: column;
+    gap: 0;
   }
 }
 
@@ -44,3 +50,9 @@
     padding-bottom: 8px;
   }
 }
+
+@media only screen and (min-width: 1920px) {
+  [class*="html--product-summary"] {
+    padding: 0 360px;
+  }
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index e59db9b..999c3ec 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -355,7 +355,8 @@
 
   "html#slider": {
     "props": {
-      "testId": "product-summary-list"
+      "testId": "product-summary-list",
+      "blockClass": "product-summary"
     },
     "children": [
       "slider-layout#carousel"
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 7ba6a2a..697e686 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -13,6 +13,11 @@
 .container {
   padding: 0 40px 16px;
 }
+@media only screen and (min-width: 1920px) {
+  .container {
+    padding: 0 360px 16px;
+  }
+}
 
 .homeIcon,
 .homeLink {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 722e326..9898f0c 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -21,7 +21,7 @@
   padding: 0 !important;
   margin: 0;
   width: 100% !important;
-  max-width: 664px !important;
+  max-width: unset !important;
 }
 @media only screen and (max-width: 1025px) {
   .stretchChildrenWidth {
@@ -37,6 +37,11 @@
 :global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
   padding: 0 40px;
 }
+@media only screen and (min-width: 1920px) {
+  :global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
+    padding: 0 360px;
+  }
+}
 
 :global(.vtex-flex-layout-0-x-flexRowContent) {
   padding: 0;
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 1d34f91..0e7e548 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -15,6 +15,7 @@
   height: 314px;
   max-height: unset;
   max-width: 314px;
+  object-fit: contain;
 }
 @media only screen and (max-width: 1025px) {
   .imageNormal {
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index d1c8ac2..6e813b8 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -12,16 +12,16 @@
 /* Grid breakpoints */
 .sliderLayoutContainer {
   margin-bottom: 64px;
-  padding: 0 67px;
+  padding: 0 16px;
 }
 @media only screen and (max-width: 1025px) {
   .sliderLayoutContainer {
-    padding: 0 63px;
+    padding: 0 12px;
   }
 }
 @media only screen and (max-width: 767px) {
   .sliderLayoutContainer {
-    padding: 0 59px;
+    padding: 0 8px;
     margin-bottom: 32px;
   }
 }
@@ -56,33 +56,25 @@
 
 .sliderRightArrow {
   visibility: hidden;
+  padding: 0;
+  margin: 0;
 }
 .sliderRightArrow::after {
   visibility: visible;
   content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
-  padding: 0 40px 0 0;
-}
-@media only screen and (max-width: 767px) {
-  .sliderRightArrow::after {
-    padding: 0 48px 0 0;
-  }
 }
 
 .sliderLeftArrow {
   visibility: hidden;
+  padding: 0;
+  margin: 0;
 }
 .sliderLeftArrow::before {
   visibility: visible;
   content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
-  padding: 0 0 0 40px;
 }
 @media only screen and (max-width: 1025px) {
   .sliderLeftArrow::before {
     display: block;
   }
-}
-@media only screen and (max-width: 767px) {
-  .sliderLeftArrow::before {
-    padding: 0 0 0 48px;
-  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 3688634..2ad95ba 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -13,6 +13,8 @@
 /* Grid breakpoints */
 .container {
   padding: 0;
+  max-width: 100% !important;
+  width: 100%;
 }
 @media only screen and (min-width: 1920px) {
   .container {
@@ -72,9 +74,9 @@
 .productImage .productImageTag {
   width: 100% !important;
   height: 100%;
-  max-height: 664px !important;
+  max-height: unset !important;
   object-fit: contain;
-  max-width: 664px !important;
+  max-width: 100% !important;
 }
 @media only screen and (max-width: 1025px) {
   .productImage .productImageTag {
@@ -84,7 +86,7 @@
 }
 
 .productImagesGallerySlide {
-  max-width: 664px !important;
+  max-width: 100% !important;
   width: 100% !important;
 }
 @media only screen and (max-width: 1025px) {
@@ -238,7 +240,7 @@
 }
 
 .productImageTag {
-  max-width: 664px;
+  max-width: 100%;
 }
 @media only screen and (max-width: 1025px) {
   .productImageTag {
@@ -560,7 +562,6 @@
 
 .productDescriptionContainer {
   width: 100%;
-  padding-left: 32px;
 }
 @media only screen and (max-width: 1025px) {
   .productDescriptionContainer {
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 9db8182..1b96dcc 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -14,6 +14,11 @@
 .container--structure {
   padding: 0 40px;
 }
+@media only screen and (min-width: 1920px) {
+  .container--structure {
+    padding: 0 360px;
+  }
+}
 .container--structure::after {
   content: "Você também pode gostar:";
   display: block;
@@ -31,8 +36,8 @@
 }
 .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
   width: 100% !important;
-  max-height: 632px !important;
-  max-width: 632px !important;
+  max-height: 100% !important;
+  max-width: 100% !important;
 }
 @media only screen and (max-width: 1025px) {
   .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
@@ -108,7 +113,7 @@
 @media only screen and (min-width: 1920px) {
   .listContainer .listItem :global(.vtex-button__label) {
     font-size: 24px;
-    line-height: 24px;
+    line-height: 26px;
   }
 }
 @media only screen and (max-width: 1025px) {
@@ -118,7 +123,7 @@
     height: fit-content;
     padding: 0 !important;
     font-size: 18px;
-    line-height: 18px;
+    line-height: 38px;
   }
 }
 @media only screen and (max-width: 1025px) {
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 378f809..b5caa69 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,5 +1,9 @@
 .container {
   padding: 0 40px 16px ;
+
+  @include mq(xl, min) {
+    padding: 0 360px 16px;
+  }
 }
 
 .homeIcon,
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index a6db590..61d7ea8 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -9,7 +9,7 @@
   padding: 0 !important;
   margin: 0;
   width: 100% !important;
-  max-width: 664px !important;
+  max-width: unset !important;
 
   @include mq(md, max) {
     max-width: unset !important;
@@ -23,6 +23,10 @@
 
 :global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
   padding: 0 40px;
+
+  @include mq(xl, min) {
+    padding: 0 360px;
+  }
 }
 
 :global(.vtex-flex-layout-0-x-flexRowContent) {
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index 63b4fbb..23edb64 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -1,8 +1,14 @@
+// .imageContainer {
+//   width: 314px;
+//   height: 314px;
+// }
+
 .imageNormal {
   width: 105%;
   height: 314px;
   max-height: unset;
   max-width: 314px;
+  object-fit: contain;
 
   @include mq(md, max) {
     height: 291.2px;
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 1312782..9cd6442 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -1,13 +1,13 @@
 .sliderLayoutContainer {
   margin-bottom: 64px;
-  padding: 0 67px;
+  padding: 0 16px;
 
   @include mq(md, max) {
-    padding: 0 63px;
+    padding: 0 12px;
   }
 
   @include mq(sm, max) {
-    padding: 0 59px;
+    padding: 0 8px;
     margin-bottom: 32px;
   }
 
@@ -44,32 +44,36 @@
 
 .sliderRightArrow {
   visibility: hidden;
+  padding: 0;
+  margin: 0;
 
   &::after {
     visibility: visible;
     content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
-    padding: 0 40px 0 0;
 
-    @include mq(sm, max) {
-      padding: 0 48px 0 0;
-    }
+
+    // @include mq(sm, max) {
+    //   padding: 0 48px 0 0;
+    // }
   }
 }
 
 .sliderLeftArrow {
-visibility: hidden;
+  visibility: hidden;
+  padding: 0;
+  margin: 0;
 
   &::before {
   visibility: visible;
   content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
-  padding: 0 0 0 40px;
+
 
   @include mq(md, max) {
     display: block;
   }
 
-  @include mq(sm, max) {
-    padding: 0 0 0 48px;
-  }
+  // @include mq(sm, max) {
+  //   padding: 0 0 0 48px;
+  // }
   }
 }
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 3ce4f72..e0cc20d 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,5 +1,7 @@
 .container {
   padding: 0;
+  max-width: 100% !important;
+  width: 100%;
 
   @include mq(xl, min) {
     margin: 0 !important;
@@ -64,22 +66,19 @@
   .productImageTag {
     width: 100% !important;
     height: 100%;
-    max-height: 664px !important;
+    max-height: unset !important;
     object-fit: contain;
-    max-width: 664px !important;
+    max-width: 100% !important;
 
     @include mq(md, max) {
       max-height: 100% !important;
       max-width: 100% !important;
     }
-
-    // width: unset !important;
-    // max-height: unset !important;
   }
 }
 
 .productImagesGallerySlide {
-  max-width: 664px !important;
+  max-width: 100% !important;
   width: 100% !important;
 
   @include mq(md, max) {
@@ -269,7 +268,7 @@
 }
 
 .productImageTag {
-  max-width: 664px;
+  max-width: 100%;
 
   @include mq(md, max) {
     max-width: 100%;
@@ -657,7 +656,6 @@
 // DESCRIÇÃO
 .productDescriptionContainer {
   width: 100%;
-  padding-left: 32px;
 
   @include mq(md, max) {
     padding-left: 0;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 199df68..634e43b 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,6 +1,10 @@
 .container--structure {
   padding: 0 40px;
 
+  @include mq(xl, min) {
+    padding: 0 360px;
+  }
+
   &::after {
     content: "Você também pode gostar:";
     display: block;
@@ -19,8 +23,8 @@
 
   :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
     width: 100% !important;
-    max-height: 632px !important;
-    max-width: 632px !important;
+    max-height: 100% !important;
+    max-width: 100% !important;
 
     @include mq(md, max) {
       max-width: unset !important;
@@ -92,7 +96,7 @@
 
       @include mq(xl, min) {
         font-size: 24px;
-        line-height: 24px;
+        line-height: 26px;
       }
 
       @include mq(md, max) {
@@ -101,7 +105,7 @@
         height: fit-content;
         padding: 0 !important;
         font-size: 18px;
-        line-height: 18px;
+        line-height: 38px;
       }
     }
   }