From 53c61db3dab5206c21a24c78f618fb0ed9dc9560 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Fri, 27 Jan 2023 17:24:32 -0300 Subject: [PATCH] feat(pdp): Adiciona conteudos tablayout --- react/components/Html/styles.css | 11 ++-- store/blocks/pdp/product.jsonc | 50 ++++++++++++++++--- styles/css/vtex.breadcrumb.css | 4 +- styles/css/vtex.flex-layout.css | 5 ++ styles/css/vtex.product-summary.css | 1 + styles/css/vtex.store-components.css | 12 ++--- styles/css/vtex.tab-layout.css | 15 ++++-- .../sass/pages/product/vtex.breadcrumb.scss | 2 +- .../sass/pages/product/vtex.flex-layout.scss | 5 ++ .../pages/product/vtex.product-summary.scss | 1 + .../pages/product/vtex.store-components.scss | 12 ++--- .../sass/pages/product/vtex.tab-layout.scss | 14 ++++-- 12 files changed, 95 insertions(+), 37 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index b94d78f..1dbea08 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -6,13 +6,16 @@ } [class*="html--description-container"] { - display: grid; - grid-auto-flow: column; - margin-left: 72px; - margin-right: 72px; + display: flex; + margin-left: 32px; + margin-right: 32px; gap: 32px; } +[class*="html--image-container"] { + width: 50.18%; +} + [class*="html--qtd-btn"] { display: flex; height: 49px; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 68c03b5..e28e3b0 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -90,7 +90,13 @@ } }, "tab-content#details": { - "children": ["tab-content.item#details1"] + "children": [ + "tab-content.item#details1", + "tab-content.item#details2", + "tab-content.item#details3", + "tab-content.item#details4", + "tab-content.item#details5" + ] }, "tab-content.item#details1": { "children": ["html#description"], @@ -98,6 +104,30 @@ "tabId": "details1" } }, + "tab-content.item#details2": { + "children": ["html#description"], + "props": { + "tabId": "details2" + } + }, + "tab-content.item#details3": { + "children": ["html#description"], + "props": { + "tabId": "details3" + } + }, + "tab-content.item#details4": { + "children": ["html#description"], + "props": { + "tabId": "details4" + } + }, + "tab-content.item#details5": { + "children": ["html#description"], + "props": { + "tabId": "details5" + } + }, "html#description": { "props": { @@ -108,6 +138,7 @@ "children": ["html#description-image", "product-description"] }, "html#description-image": { + "props": { "blockClass": "image-container" }, "children": ["product-images#description"] }, "product-images#description": { @@ -161,10 +192,11 @@ "flex-layout.row#product-main": { "props": { "colGap": 7, - "rowGap": 7, + /*"rowGap": 7, "marginTop": 5, "marginBottom": 7, - "paddingBottom": 7 + "paddingBottom": 7*/ + "blockClass": "containerteste" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -192,7 +224,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "46%", + "width": "51%", "rowGap": 0 } }, @@ -228,8 +260,8 @@ /*"product-separator",*/ "sku-selector", /*"product-quantity",*/ - "product-assembly-options", - "product-gifts", + /*"product-assembly-options",*/ + /*"product-gifts",*/ /*"flex-layout.row#buy-button",*/ "html#qtd-btn", "availability-subscriber", @@ -296,9 +328,11 @@ "flex-layout.row#product-availability": { "props": { "colGap": 7, - "marginTop": 4, + /*"rowGap": 7, + "marginTop": 5, "marginBottom": 7, - "paddingTop": 7 + "paddingBottom": 7*/ + "blockClass": "containerteste" }, "children": [ "flex-layout.col#stack", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 978fc84..0c0d229 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -29,10 +29,10 @@ font-size: 14px; line-height: 19px; } -.container--testebread .arrow--testebread--1 { +.container--testebread .link--testebread--1 { font-size: 0; } -.container--testebread .arrow--testebread--1::after { +.container--testebread .link--testebread--1::after { content: "Sapatos"; font-weight: 400; font-size: 14px; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 82c16a2..bdff5c4 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -19,4 +19,9 @@ line-height: 38px; color: #000000; margin: 0; +} + +.flexRow--containerteste { + padding-left: 40px; + padding-right: 40px; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 481022f..2c96590 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -11,6 +11,7 @@ text-align: center; padding-top: 8px; padding-bottom: 8px; + min-height: 66px; } .nameContainer .productBrand { font-weight: 400; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d944e95..4d29c04 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,8 +9,7 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - margin-left: 40px; - margin-right: 40px; + margin: 0; padding: 0; } @@ -48,6 +47,10 @@ margin-right: 16px; } +.productImagesGallerySlide { + width: 100%; +} + /*:global(.vtex-store-components-3-x-productImageTag) { width: 664px; height: 664px; @@ -302,6 +305,7 @@ display: flex; justify-content: left; flex-direction: column; + width: 49.82%; } .container--descricao { @@ -323,10 +327,6 @@ color: #929292; } -.content--description-imagem { - border: 1px solid red; -} - .subscriberContainer { position: relative; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 96defa3..1ac50e0 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -7,15 +7,16 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container--details { + padding-left: 40px; + padding-right: 40px; +} + .listContainer { border-bottom: 1px solid #bfbfbf; margin-bottom: 32px; - padding-left: 64px; - padding-right: 64px; - margin-left: 40px; - margin-right: 40px; display: flex; - justify-content: space-between; + justify-content: space-around; align-items: end; } @@ -31,6 +32,7 @@ } .listItem :global(.vtex-button) { background-color: transparent; + border: none; } .listItem :global(.vtex-button__label) { font-weight: 400; @@ -46,6 +48,9 @@ border-bottom: 2px solid #000000; } +.listItemActive--descricao { + border-bottom: 2px solid #000000; +} .listItemActive--descricao :global(.vtex-button) { border: none; border-radius: 0%; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 2ce5356..8aeed9c 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -22,7 +22,7 @@ } } - .arrow--testebread--1 { + .link--testebread--1 { font-size: 0; &::after { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index acb5cae..04b5380 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -11,3 +11,8 @@ color: #000000; margin: 0; } + +.flexRow--containerteste { + padding-left: 40px; + padding-right: 40px; +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index ef441e5..4186706 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -2,6 +2,7 @@ text-align: center; padding-top: 8px; padding-bottom: 8px; + min-height: 66px; .productBrand { font-weight: 400; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7900193..6fdb952 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,5 @@ .container { - margin-left: 40px; - margin-right: 40px; + margin: 0; padding: 0; } @@ -39,6 +38,10 @@ margin-right: 16px; } +.productImagesGallerySlide { + width: 100%; +} + /*:global(.vtex-store-components-3-x-productImageTag) { width: 664px; height: 664px; @@ -349,6 +352,7 @@ display: flex; justify-content: left; flex-direction: column; + width: 49.82%; } .container--descricao { @@ -368,10 +372,6 @@ color: $color-gray6; } -.content--description-imagem { - border: 1px solid red; -} - //PRODUTO INDISPONIVEL .subscriberContainer { position: relative; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 044e9f5..bfa2b87 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,12 +1,14 @@ +.container--details { + padding-left: 40px; + padding-right: 40px; +} + .listContainer { border-bottom: 1px solid $color-gray9; margin-bottom: 32px; - padding-left: 64px; - padding-right: 64px; - margin-left: 40px; - margin-right: 40px; + display: flex; - justify-content: space-between; + justify-content: space-around; align-items: end; } @@ -23,6 +25,7 @@ :global(.vtex-button) { background-color: transparent; + border: none; } :global(.vtex-button__label) { @@ -41,6 +44,7 @@ } .listItemActive--descricao { + border-bottom: 2px solid $color-black-100; :global(.vtex-button) { border: none; border-radius: 0%;