From c117e3be4ccdcb721a292821dd7c324052e6d8e2 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 22:23:54 -0300 Subject: [PATCH] feat: responsividade feita --- store/blocks/pdp/product.jsonc | 18 +------ styles/css/vtex.flex-layout.css | 22 ++++++++ styles/css/vtex.product-price.css | 5 ++ styles/css/vtex.store-components.css | 54 ++++++++++++++++++- styles/css/vtex.tab-layout.css | 28 ++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 24 +++++++++ .../pages/product/vtex.product-price.scss | 7 +++ .../pages/product/vtex.store-components.scss | 41 +++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 22 +++++++- 9 files changed, 199 insertions(+), 22 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e02df9b..eebff39 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -52,12 +52,6 @@ }, "flex-layout.row#product-main": { "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7, "blockClass": "product-main" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] @@ -86,7 +80,6 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "45%", "rowGap": 0 } }, @@ -104,13 +97,10 @@ "product-images": { "props": { "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "auto" }, "thumbnailsOrientation": "horizontal", "showNavigationArrows": false, - "showPaginationDots": false, - "displayThumbnailsArrows": false, "blockClass": "produto-carrossel" } }, @@ -224,12 +214,6 @@ }, "flex-layout.row#product-availability": { - "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 - }, "children": [ "flex-layout.col#stack", "flex-layout.col#right-col-availability" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index cb245e8..638c999 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -19,6 +19,17 @@ margin: 0; padding: 0; } +@media screen and (max-width: 1024px) { + .flexRowContent .stretchChildrenWidth { + width: initial; + } +} + +@media screen and (max-width: 1024px) { + .flexRowContent--product-main { + flex-direction: column; + } +} .flexRowContent--identifier { text-align: end; @@ -26,10 +37,21 @@ flex-direction: column; align-items: end; } +@media screen and (max-width: 1024px) { + .flexRowContent--identifier { + text-align: start; + } +} .flexRow--product-main { padding: 0 40px; } +@media screen and (max-width: 1024px) { + .flexRow--product-main .stretchChildrenWidth { + width: 100% !important; + padding-bottom: 24px; + } +} .flexColChild--infos :global(.vtex-button) { background-color: black !important; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index fe99018..e502035 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -9,4 +9,9 @@ /* Grid breakpoints */ .listPrice { display: block; +} + +.sellingPriceValue { + font-weight: bold; + font-size: 25px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f11b178..6ef40b4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,10 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container { + display: contents; +} + .productImagesGallerySlide--produto-carrossel { width: 100% !important; } @@ -30,6 +34,12 @@ text-align: right; color: #575757; } +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + text-align: left; + padding-bottom: 8px; + } +} .skuSelectorContainer { display: flex; @@ -89,11 +99,30 @@ } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { - color: #000; position: absolute; - right: 32px; + right: 0px; top: 25px; } +@media screen and (max-width: 1120px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -20px; + } +} +@media screen and (max-width: 1100px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -30px; + } +} +@media screen and (max-width: 1035px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -35px; + } +} +@media screen and (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: 0px; + } +} .shareContainer { display: none; @@ -143,10 +172,20 @@ width: 50%; margin-left: 16px; } +@media screen and (max-width: 1024px) { + .productDescriptionContainer { + width: 100%; + } +} .carouselGaleryThumbs { height: 200px; } +@media screen and (max-width: 1024px) { + .carouselGaleryThumbs { + display: block; + } +} .carouselGaleryThumbs .productImagesThumb { margin: 0px 10px; @@ -238,6 +277,11 @@ .content--description-imagem { width: 45%; } +@media screen and (max-width: 1024px) { + .content--description-imagem { + width: 100%; + } +} .newsletter { background: #000; @@ -285,6 +329,12 @@ .newsletter .inputGroup { width: 774px; } +@media screen and (max-width: 1024px) { + .newsletter .inputGroup { + display: flex; + width: 100%; + } +} .newsletter .inputGroup :global(.vtex-input-prefix__group) { border: none; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 8e5ffff..2a45ac9 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -17,23 +17,51 @@ justify-content: space-around; border-bottom: 1px solid #BFBFBF; } +@media screen and (max-width: 1024px) { + .listContainer { + flex-direction: column; + align-content: baseline; + border-bottom: none; + } +} .listItem { margin: 0; padding: 0; } +@media screen and (max-width: 1024px) { + .listItem { + width: 100%; + } +} .listItem :global(.vtex-button) { border-radius: 0; background-color: #FFFFFF; color: #BFBFBF; } +@media screen and (max-width: 1024px) { + .listItem :global(.vtex-button) { + display: flex; + width: 100%; + } +} .listItemActive :global(.vtex-button) { border: 0; border-bottom: 1px solid #000000 !important; } +@media screen and (max-width: 1024px) { + .listItemActive :global(.vtex-button) { + border-bottom: none !important; + } +} .contentItem { display: flex; margin-bottom: 16px; +} +@media screen and (max-width: 1024px) { + .contentItem { + flex-direction: column; + } } \ 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 d4dedde..1a90b4d 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -10,18 +10,42 @@ .flexRowContent{ margin: 0; padding: 0; + + + .stretchChildrenWidth{ + @media screen and (max-width: 1024px) { + width: initial; + } + } } +.flexRowContent--product-main{ + @media screen and (max-width: 1024px) { + flex-direction: column; + } +} + + .flexRowContent--identifier{ text-align: end; display: flex; flex-direction: column; align-items: end; + @media screen and (max-width: 1024px) { + text-align: start; + } } .flexRow--product-main{ padding: 0 40px; + + .stretchChildrenWidth{ + @media screen and (max-width: 1024px) { + width: 100% !important; + padding-bottom: 24px; + } + } } .flexColChild--infos :global(.vtex-button){ diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 7944be9..7cb544e 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -1,3 +1,10 @@ .listPrice { display: block; } + + +.sellingPriceValue{ + font-weight: bold; + font-size: 25px; +} + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e08f49c..6d68d2d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,7 @@ +.container{ + display: contents; +} + .productImagesGallerySlide--produto-carrossel{ width: 100% !important; } @@ -20,6 +24,12 @@ line-height: 34px; text-align: right; color: #575757; + @media screen and (max-width: 1024px) { + text-align: left; + padding-bottom: 8px; + } + + } .skuSelectorContainer { @@ -73,10 +83,21 @@ width: 280px; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { - color: #000; position: absolute; - right: 32px; + right: 0px; top: 25px; + @media screen and (max-width: 1120px) { + right: -20px; + } + @media screen and (max-width: 1100px) { + right: -30px; + } + @media screen and (max-width: 1035px) { + right: -35px; + } + @media screen and (max-width: 1024px) { + right: 0px; + } } .shareContainer { @@ -120,10 +141,18 @@ .productDescriptionContainer { width: 50%; margin-left: 16px; + + @media screen and (max-width: 1024px) { + width: 100%; + } } .carouselGaleryThumbs { height: 200px; + @media screen and (max-width: 1024px) { + display: block; + } + } .carouselGaleryThumbs .productImagesThumb { margin: 0px 10px; @@ -210,6 +239,10 @@ .content--description-imagem{ width: 45%; + @media screen and (max-width: 1024px) { + width: 100%; + } + } .newsletter { @@ -252,6 +285,10 @@ } .newsletter .inputGroup { width: 774px; + @media screen and (max-width: 1024px) { + display: flex; + width: 100%; + } } .newsletter .inputGroup :global(.vtex-input-prefix__group) { border: none; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index a24f8b0..692ffbe 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -9,28 +9,48 @@ margin-bottom: 32px; justify-content: space-around; border-bottom: 1px solid #BFBFBF; + + @media screen and (max-width: 1024px) { + flex-direction: column; + align-content: baseline; + border-bottom: none; + } } .listItem{ margin: 0; padding: 0; + @media screen and (max-width: 1024px) { + width: 100%; + } + :global(.vtex-button){ border-radius: 0; background-color: #FFFFFF; color: #BFBFBF; + @media screen and (max-width: 1024px) { + display: flex; + width: 100%; + } + } } .listItemActive :global(.vtex-button) { border: 0; border-bottom: 1px solid #000000 !important; - + @media screen and (max-width: 1024px) { + border-bottom: none !important; + } } .contentItem{ display: flex; margin-bottom: 16px; + @media screen and (max-width: 1024px) { + flex-direction: column; + } }