From 54b2e2da3bc1850cddf86087e98e3adf91f66b13 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 7 Feb 2023 03:41:33 -0300 Subject: [PATCH 1/2] feat(description):tab list add e estilizadas --- react/components/Html/styles.css | 26 +------- store/blocks/pdp/product.jsonc | 61 ++++++++++++++++++- styles/css/vtex.flex-layout.css | 13 +++- styles/css/vtex.rich-text.css | 5 ++ styles/css/vtex.tab-layout.css | 61 +++++++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 15 +++-- styles/sass/pages/product/vtex.rich-text.scss | 3 + .../sass/pages/product/vtex.tab-layout.scss | 47 ++++++++++++++ 8 files changed, 201 insertions(+), 30 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index a8d7d98..274237e 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,5 +1,4 @@ /* [class*=html--pdp-breadcrumb]{ - background: blue; } */ .html--pdp-section_descriptions{ display: flex; @@ -22,23 +21,13 @@ .html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){ padding-left: 28px; } -.html--pdp-departamens{ - background: transparent; +.html--pdp-section_descriptions{ margin-top: 32px; margin-bottom: 16px; } -.html--pdp-departamens ul{ - display: flex; +.html--pdp-section_descriptions :after{ border-bottom: 1px solid rgba(185, 185, 185, 1); } -.html--pdp-departamens div ul{ - width: 100%; - display: flex; - justify-content: space-between; - list-style: none; - margin: 0; -} - .html--pdp-departamens div ul li button{ outline: none; border: none; @@ -50,10 +39,7 @@ font-size: 18px; line-height: 38px; } -.html--pdp-departamens div ul li :global(button.open){ - color: #000000; - border-bottom: 1px solid #000000; -} + :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){ margin-bottom: 20px; } @@ -100,10 +86,4 @@ .html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){ padding-left: 0px; } - .html--pdp-departamens div ul li :global(button.open){ - border-bottom: none; - } - .html--pdp-departamens ul{ - border-top: 1px solid rgba(185, 185, 185, 1); - } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index af163ab..21ea3bf 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,11 +1,68 @@ { "store.product": { "children": [ + "html#breadcrumb", "html#departaments", "flex-layout.row#specifications-title", "html#carousel" ] }, + "tab-layout#pdp": { + "children":[ + "tab-list#pdp", + "tab-content#pdp" + ], + "props": { + "blockClass": "pdp-tabLayout", + "defaultActiveTabId": "descrição1" + } + }, + "tab-list#pdp":{ + "children": [ + "tab-list.item#pdpsection1", + "tab-list.item#pdpsection2", + "tab-list.item#pdpsection3", + "tab-list.item#pdpsection4", + "tab-list.item#pdpsection5" + ], + "props": { + "blockClass": "pdp-tabSections" + } + }, + "tab-content#pdp":{ + + }, +"tab-list.item#pdpsection1": { + "props": { + "tabId": "descrição1", + "label": "Descrição", + "defaultActiveTab": true + } +}, +"tab-list.item#pdpsection2": { + "props": { + "tabId": "descrição2", + "label": "Descrição" + } +}, +"tab-list.item#pdpsection3": { + "props": { + "tabId": "descrição3", + "label": "Descrição" + } +}, +"tab-list.item#pdpsection4": { + "props": { + "tabId": "descrição4", + "label": "Descrição" + } +}, +"tab-list.item#pdpsection5": { + "props": { + "tabId": "descrição5", + "label": "Descrição" + } +}, "html#prateleira": { "props": { "testId": "vtex-product-sumary" @@ -190,10 +247,10 @@ "html#departaments": { "props": { "tag": "div", - "testId": "description", + "testId": "product-description", "blockClass": "pdp-section_descriptions" }, - "children": ["html#Sections", "html#description"] + "children": ["tab-layout#pdp"] }, "html#description": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 9ab6e23..93ce670 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -149,10 +149,20 @@ .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) { max-width: 11.2px; max-height: 29.6px; - top: 25%; + top: 37%; padding: 0; } } +@media screen and (max-width: 1024px) { + .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel) { + left: 3%; + } +} +@media screen and (max-width: 1024px) { + .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel) { + right: 3%; + } +} @media screen and (max-width: 1024px) { .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) { width: 4.9344% !important; @@ -171,6 +181,7 @@ .flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) { max-width: 100%; } + .flexRow--pdp-price .flexRowContent--pdp-price { justify-content: center; } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index d4e5e71..3f9dbd2 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -17,4 +17,9 @@ font-size: 24px; line-height: 38px; color: #575757; +} +@media screen and (max-width: 1024px) { + .container--pdp-specifications .wrapper--pdp-specifications .heading { + font-size: 20px; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..efe7a82 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,61 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.listContainer--pdp-tabSections::after { + content: ""; + width: 100%; + border-bottom: 1px solid rgb(185, 185, 185); +} +@media screen and (max-width: 1024px) { + .listContainer--pdp-tabSections { + flex-direction: column; + } + .listContainer--pdp-tabSections::before { + content: ""; + width: 100%; + border-bottom: 1px solid rgb(185, 185, 185); + } +} + +.listContainer--pdp-tabSections { + justify-content: space-evenly; + align-items: end; +} +@media screen and (max-width: 1024px) { + .listContainer--pdp-tabSections { + align-items: start; + } +} +.listContainer--pdp-tabSections .listItem { + padding: 0; + margin: 0; +} +.listContainer--pdp-tabSections .listItem :global(.vtex-button) { + outline: none; + border: none; + background: transparent; + color: rgb(191, 191, 191); + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: initial; +} +.listContainer--pdp-tabSections .listItemActive { + border-bottom: 1px solid #000000; +} +@media screen and (max-width: 1024px) { + .listContainer--pdp-tabSections .listItemActive { + border-bottom: none; + } +} +.listContainer--pdp-tabSections .listItemActive :global(.vtex-button) { + color: #000000; +} \ 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 495e092..8c41429 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -139,10 +139,20 @@ @media screen and (max-width: 1024px){ max-width: 11.2px; max-height: 29.6px; - top: 25%; + top: 37%; padding: 0; } } + :global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel){ + @media screen and (max-width: 1024px){ + left: 3%; + } + } + :global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel){ + @media screen and (max-width: 1024px){ + right: 3%; + } + } :global(.vtex-slider-layout-0-x-slide--pdp-carrousel){ @media screen and (max-width: 1024px){ width: 4.9344% !important; @@ -162,9 +172,6 @@ :global(.vtex-store-components-3-x-container){ max-width: 100%; } - @media screen and (max-width: 1024px){ - - } } .flexRow--pdp-price{ .flexRowContent--pdp-price{ diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 6bfa5b8..22f47d0 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -9,6 +9,9 @@ font-size: 24px; line-height: 38px; color: #575757; + @media screen and (max-width: 1024px){ + font-size: 20px; + } } } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..2dfd92e --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,47 @@ +.listContainer--pdp-tabSections{ + &::after{ + content: ""; + width: 100%; + border-bottom: 1px solid rgba(185, 185, 185, 1); + }; + @media screen and (max-width: 1024px){ + flex-direction: column; + &::before{ + content: ""; + width: 100%; + border-bottom: 1px solid rgba(185, 185, 185, 1); + }; + } +}; +.listContainer--pdp-tabSections{ + justify-content: space-evenly; + align-items: end; + @media screen and (max-width: 1024px){ + align-items: start; + } + .listItem{ + padding: 0; + margin: 0; + :global(.vtex-button){ + outline: none; + border: none; + background: transparent; + color: rgba(191, 191, 191, 1); + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: initial; + }; + }; + .listItemActive{ + border-bottom: 1px solid #000000; + @media screen and (max-width: 1024px){ + border-bottom: none; + } + :global(.vtex-button){ + color: #000000; + } + } +} From 0d037088c524f60a0a3d91fc167a392943b90194 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 7 Feb 2023 04:20:57 -0300 Subject: [PATCH 2/2] feat(description):atualizando o description add tab layout ao descripition --- react/components/Html/styles.css | 4 + store/blocks/pdp/product.jsonc | 143 +++++++++++++----- styles/css/vtex.tab-layout.css | 1 + .../pages/product/vtex.store-components.scss | 1 + .../sass/pages/product/vtex.tab-layout.scss | 1 + 5 files changed, 108 insertions(+), 42 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 274237e..6eccf6d 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -65,6 +65,10 @@ } } @media screen and (max-width: 1024px) { + .html--pdp-descriptions :global(.vtex-store-components-3-x-container){ + border-bottom: 1px solid rgba(185, 185, 185, 1); + padding-bottom: 16px; + } .html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){ min-width: 296px; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 21ea3bf..53f28ec 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,7 +10,11 @@ "tab-layout#pdp": { "children":[ "tab-list#pdp", - "tab-content#pdp" + "tab-content#pdp", + "tab-content#pdp2", + "tab-content#pdp3", + "tab-content#pdp4", + "tab-content#pdp5" ], "props": { "blockClass": "pdp-tabLayout", @@ -29,40 +33,102 @@ "blockClass": "pdp-tabSections" } }, - "tab-content#pdp":{ - + "tab-list.item#pdpsection1": { + "props": { + "tabId": "descrição1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#pdpsection2": { + "props": { + "tabId": "descrição2", + "label": "Descrição" + } + }, + "tab-list.item#pdpsection3": { + "props": { + "tabId": "descrição3", + "label": "Descrição" + } + }, + "tab-list.item#pdpsection4": { + "props": { + "tabId": "descrição4", + "label": "Descrição" + } + }, + "tab-list.item#pdpsection5": { + "props": { + "tabId": "descrição5", + "label": "Descrição" + } + }, + "tab-content.item#descriptionpdp":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição1" + } + }, + "tab-content#pdp":{ + "children":[ + "tab-content.item#descriptionpdp" + ] + }, + "tab-content.item#descriptionpdp2":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição2" + } + }, + "tab-content#pdp2":{ + "children":[ + "tab-content.item#descriptionpdp2" + ] + }, + "tab-content.item#descriptionpdp3":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição3" + } + }, + "tab-content#pdp3":{ + "children":[ + "tab-content.item#descriptionpdp3" + ] + }, + "tab-content.item#descriptionpdp4":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição4" + } + }, + "tab-content#pdp4":{ + "children":[ + "tab-content.item#descriptionpdp4" + ] + }, + "tab-content.item#descriptionpdp5":{ + "children":[ + "html#description" + ], + "props": { + "tabId": "descrição5" + } + }, + "tab-content#pdp5":{ + "children":[ + "tab-content.item#descriptionpdp5" + ] }, -"tab-list.item#pdpsection1": { - "props": { - "tabId": "descrição1", - "label": "Descrição", - "defaultActiveTab": true - } -}, -"tab-list.item#pdpsection2": { - "props": { - "tabId": "descrição2", - "label": "Descrição" - } -}, -"tab-list.item#pdpsection3": { - "props": { - "tabId": "descrição3", - "label": "Descrição" - } -}, -"tab-list.item#pdpsection4": { - "props": { - "tabId": "descrição4", - "label": "Descrição" - } -}, -"tab-list.item#pdpsection5": { - "props": { - "tabId": "descrição5", - "label": "Descrição" - } -}, "html#prateleira": { "props": { "testId": "vtex-product-sumary" @@ -154,14 +220,7 @@ }, "children": ["breadcrumb"] }, - "html#example-component": { - "props": { - "tag": "nav", - "testId": "breadcrumbs", - "blockClass": "pdp-exemplo" - }, - "children": ["example-component"] - }, + "html#Sections": { "props": { "tag": "nav", diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index efe7a82..dfea842 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -24,6 +24,7 @@ } .listContainer--pdp-tabSections { + margin-bottom: 32px; justify-content: space-evenly; align-items: end; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5083fec..8765e56 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -175,3 +175,4 @@ } } + diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 2dfd92e..86f9383 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -14,6 +14,7 @@ } }; .listContainer--pdp-tabSections{ + margin-bottom: 32px; justify-content: space-evenly; align-items: end; @media screen and (max-width: 1024px){