From 342774490f71026f6a050ba8dec324af682ec5c3 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Tue, 7 Feb 2023 12:19:24 -0300 Subject: [PATCH] feat: adiciona responsividade imagens tablet --- react/components/Html/styles.css | 8 ++++ store/blocks/pdp/product.jsonc | 31 ++++++++-------- styles/css/vtex.store-components.css | 36 +++++++++++++++++- styles/css/vtex.tab-layout.css | 17 +++++++++ .../pages/product/vtex.store-components.scss | 37 ++++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 16 ++++++++ 6 files changed, 127 insertions(+), 18 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 944866e..56f5fff 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -12,10 +12,18 @@ width: 99.432%; } +[class*="description-container"] { + display: flex; +} + @media only screen and (max-width: 1024px) { [class*="html--buy-button"] :global(.vtex-button) { width: 100%; } + + [class*="description-container"] { + flex-direction: column; + } } @media only screen and (max-width: 768px) { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a4516b5..205725a 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,7 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#product", - // "flex-layout.row#description", + // "html#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", // "shelf.relatedProducts", @@ -217,7 +217,7 @@ "tabId": "product1", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, "tab-content.item#product2": { @@ -225,7 +225,7 @@ "tabId": "product2", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, "tab-content.item#product3": { @@ -233,7 +233,7 @@ "tabId": "product3", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, "tab-content.item#product4": { @@ -241,7 +241,7 @@ "tabId": "product4", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, "tab-content.item#product5": { @@ -249,15 +249,15 @@ "tabId": "product5", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, - "flex-layout.col#imageDescriptionContainer": { - "props": { - "blockClass": "image-description" - }, - "children": ["product-images#imageDescription"] - }, + // "html#imageDescriptionContainer": { + // "props": { + // "blockClass": "image-description" + // }, + // "children": ["product-images#imageDescription"] + // }, "product-images#imageDescription": { "props": { @@ -267,12 +267,11 @@ } }, - "flex-layout.row#description": { + "html#description": { "props": { - "marginBottom": 7, - "preventHorizontalStretch": true + "blockClass": "description-container" }, - "children": ["flex-layout.col#imageDescriptionContainer", "product-description"] + "children": ["product-images#imageDescription", "product-description"] }, // "flex-layout.row#quantity-buy-button": { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 35694a3..67f83b5 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -306,12 +306,18 @@ :global(.vtex-address-form__field--small) { padding-bottom: 16px; } +@media only screen and (max-width: 767px) { + :global(.vtex-address-form__field--small) { + flex-direction: column; + } +} .shippingTable { display: flex; flex-direction: column; border: none; margin-top: 0; + padding: 0; } .shippingTable .shippingTableHead { display: block; @@ -325,7 +331,6 @@ font-size: 14px; line-height: 19px; text-transform: uppercase; - padding-right: 112px; color: #202020; } @media only screen and (min-width: 1920px) { @@ -358,16 +363,19 @@ .shippingTable .shippingTableCellDeliveryName { width: 23.9263%; padding: 0 0 15px 0; + text-align: initial; } .shippingTable .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableCellDeliveryEstimate { width: 41.7177%; padding: 0 0 15px 0; + text-align: initial; } .shippingTable .shippingTableCellDeliveryPrice, .shippingTable .shippingTableHeadDeliveryPrice { width: 14.7239%; padding: 0 0 15px 0; + text-align: initial; } .shippingTableBody .shippingtableRow { @@ -454,6 +462,15 @@ color: #fff; } +.productDescriptionContainer { + width: 100%; + padding-left: 32px; +} +@media only screen and (max-width: 1025px) { + .productDescriptionContainer { + padding-left: 0; + } +} .productDescriptionContainer .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -494,6 +511,23 @@ } } +:global(.vtex-store-components-3-x-productImagesContainer--first-image) { + max-width: 632px; + width: 100%; + height: 632px; +} +@media only screen and (max-width: 1025px) { + :global(.vtex-store-components-3-x-productImagesContainer--first-image) { + max-width: unset; + height: 944px; + } +} +@media only screen and (max-width: 767px) { + :global(.vtex-store-components-3-x-productImagesContainer--first-image) { + height: unset; + } +} + .newsletter { display: flex; align-items: flex-end; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index e86e4af..0556c5a 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -30,6 +30,23 @@ line-height: 32px; } } +.container--structure :global(.vtex-store-components-3-x-productImageTag) { + width: 100% !important; + max-height: 632px !important; + max-width: 632px !important; +} +@media only screen and (max-width: 1025px) { + .container--structure :global(.vtex-store-components-3-x-productImageTag) { + max-width: unset !important; + max-height: 944px !important; + } +} +@media only screen and (max-width: 767px) { + .container--structure :global(.vtex-store-components-3-x-productImageTag) { + max-width: unset !important; + max-height: unset !important; + } +} .contentContainer { padding: 0 32px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 61efec1..a8a2ce7 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -356,6 +356,10 @@ :global(.vtex-address-form__field--small) { padding-bottom: 16px; + + @include mq(sm, max) { + flex-direction: column; + } } // ENTREGA @@ -365,6 +369,7 @@ flex-direction: column; border: none; margin-top: 0; + padding: 0; .shippingTableHead { display: block; @@ -379,7 +384,6 @@ font-size: 14px; line-height: 19px; text-transform: uppercase; - padding-right: 112px; color: $black-100; @@ -422,18 +426,21 @@ .shippingTableCellDeliveryName { width: 23.9263%; padding: 0 0 15px 0; + text-align: initial; } .shippingTableHeadDeliveryEstimate, .shippingTableCellDeliveryEstimate { width: 41.7177%; padding: 0 0 15px 0; + text-align: initial; } .shippingTableCellDeliveryPrice, .shippingTableHeadDeliveryPrice { width: 14.7239%; padding: 0 0 15px 0; + text-align: initial; } } @@ -548,6 +555,13 @@ // DESCRIÇÃO .productDescriptionContainer { + width: 100%; + padding-left: 32px; + + @include mq(md, max) { + padding-left: 0; + } + .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -586,6 +600,27 @@ padding-bottom: 16px; } } + + + // :global(.vtex-store-components-3-x-productDescriptionContainer) { + // width: 100% !important; + // padding-left: 32px; + // } +} + +:global(.vtex-store-components-3-x-productImagesContainer--first-image) { + max-width: 632px; + width: 100%; + height: 632px; + + @include mq(md, max) { + max-width: unset; + height: 944px; + } + + @include mq(sm, max) { + height: unset; + } } // NEWSLETTER diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e641240..8f43707 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -17,6 +17,22 @@ line-height: 32px; } } + + :global(.vtex-store-components-3-x-productImageTag) { + width: 100% !important; + max-height: 632px !important; + max-width: 632px !important; + + @include mq(md, max) { + max-width: unset !important; + max-height: 944px !important; + } + + @include mq(sm, max) { + max-width: unset !important; + max-height: unset !important; + } + } } .contentContainer {