From b25dada7c76741f91379fed3b47fceed91c91c90 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Mon, 6 Feb 2023 22:00:05 -0300 Subject: [PATCH] feat(main): cria content responsivo do tab layout --- store/blocks/pdp/product.jsonc | 37 +++---------- styles/css/vtex.store-components.css | 45 ++++++++++++++++ styles/css/vtex.tab-layout.css | 20 ++++++- .../pages/product/vtex.store-components.scss | 53 +++++++++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 24 ++++++++- 5 files changed, 146 insertions(+), 33 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 8e559fb..cef479d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -95,31 +95,31 @@ "props": { "tabId": "description1" }, - "children": ["product-description"] + "children": ["product-images", "product-description"] }, "tab-content.item#description2": { "props": { "tabId": "description2" }, - "children": ["product-description"] + "children": ["product-images", "product-description"] }, "tab-content.item#description3": { "props": { "tabId": "description3" }, - "children": ["product-description"] + "children": ["product-images", "product-description"] }, "tab-content.item#description4": { "props": { "tabId": "description4" }, - "children": ["product-description"] + "children": ["product-images", "product-description"] }, "tab-content.item#description5": { "props": { "tabId": "description5" }, - "children": ["product-description"] + "children": ["product-images", "product-description"] }, "flex-layout.row#specifications-title": { @@ -266,32 +266,7 @@ "flex-layout.col#right-col-availability" ] }, - - // "flex-layout.col#right-col": { - // "props": { - // "width": "50%", - // "preventVerticalStretch": true, - // "blockClass": "right-col" - // }, - // "children": [ - // "flex-layout.row#product-name", - // "product-identifier.product", - // // "product-rating-summary", - // "flex-layout.row#selling-price", - // "product-installments", - // // "flex-layout.row#list-price-savings", - // "html#pix-price", - // "html#sku-selector", - // "product-quantity", - // // "product-assembly-options", - // "product-gifts", - // "flex-layout.row#buy-button", - // "availability-subscriber", - // "shipping-simulator", - // "share#default" - // ] - // }, - + "flex-layout.col#right-col-availability": { "props": { "width": "50%", diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9f01013..7487813 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -235,4 +235,49 @@ font-size: 18px; line-height: 25px; padding: 12px 0; +} + +/* ----- PRODUCT-DESCRIPTION ----- */ +.productDescriptionContainer .productDescriptionTitle { + margin-bottom: 8px; + font-size: 24px; + line-height: 32px; + color: #575757; +} +@media only screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionTitle { + margin-bottom: 16px; + font-size: 32px; + } +} +@media only screen and (max-width: 1024px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 20px; + } +} +.productDescriptionContainer .productDescriptionText { + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media only screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionText { + font-size: 18px; + line-height: 25px; + } +} +@media only screen and (max-width: 1024px) { + .productDescriptionContainer .productDescriptionText { + font-size: 14px; + line-height: 19px; + } +} +.productDescriptionContainer .showMoreButton { + width: 100%; + margin: 0; + padding: 12px 0; + font-weight: 600; + font-size: 18px; + color: #ffffff; + background: black; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 65f6a69..0cf56a5 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -29,7 +29,7 @@ @media only screen and (max-width: 1024px) { .container--description .listContainer { padding: 16px 0; - margin-bottom: 16px; + margin-bottom: 0; border-top: 1px solid #b9b9b9; flex-direction: column; gap: 16px; @@ -76,4 +76,22 @@ .container--description .listContainer .listItem.listItemActive { border: 0; } +} +.container--description .contentContainer .contentItem { + padding: 0 32px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; +} +.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + display: none; +} +@media only screen and (max-width: 1024px) { + .container--description .contentContainer .contentItem { + padding: 16px 0; + border-bottom: 1px solid #bfbfbf; + display: flex; + flex-direction: column; + gap: 16px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7715dd3..bc18f0d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -318,3 +318,56 @@ } } } + +/* ----- PRODUCT-DESCRIPTION ----- */ +.productDescriptionContainer { + .productDescriptionTitle { + margin-bottom: 8px; + // font-family: "Open Sans"; + // font-style: normal; + // font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + + @include mq(xl, min) { + margin-bottom: 16px; + font-size: 32px; + } + + @include mq(lg, max) { + font-size: 20px; + } + } + + .productDescriptionText { + // font-family: "Open Sans"; + // font-style: normal; + // font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + + @include mq(xl, min) { + font-size: 18px; + line-height: 25px; + } + + @include mq(lg, max) { + font-size: 14px; + line-height: 19px; + } + } + + .showMoreButton { + width: 100%; + margin: 0; + padding: 12px 0; + // font-family: "Open Sans"; + // font-style: normal; + font-weight: 600; + font-size: 18px; + color: #ffffff; + background: black; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4b5a60b..da76c04 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -17,7 +17,7 @@ @include mq(lg, max) { padding: 16px 0; - margin-bottom: 16px; + margin-bottom: 0; border-top: 1px solid #b9b9b9; flex-direction: column; gap: 16px; @@ -71,4 +71,26 @@ } } } + + .contentContainer { + .contentItem { + padding: 0 32px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; + + :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + display: none; + } + + @include mq(lg, max) { + // background-color: yellow; + padding: 16px 0; + border-bottom: 1px solid #bfbfbf; + display: flex; + flex-direction: column; + gap: 16px; + } + } + } }