From b378e8a4677739ffdd3782e4266ca1b2f9095caf Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Wed, 25 Jan 2023 09:52:39 -0300 Subject: [PATCH] feat: Responsividade Mobile finalizada --- .../components/description-section/styles.css | 7 ++++ store/blocks/pdp/product.jsonc | 3 +- styles/css/vtex.flex-layout.css | 23 +++++++++++ styles/css/vtex.product-quantity.css | 10 +++-- styles/css/vtex.product-summary.css | 23 +++++++++++ styles/css/vtex.rich-text.css | 5 +++ styles/css/vtex.slider-layout.css | 17 ++++++++ styles/css/vtex.store-components.css | 4 +- styles/css/vtex.tab-layout.css | 6 ++- .../sass/pages/product/vtex.flex-layout.scss | 31 +++++++++++++++ .../pages/product/vtex.product-quantity.scss | 10 +++-- .../pages/product/vtex.product-summary.scss | 39 +++++++++++++++++++ styles/sass/pages/product/vtex.rich-text.scss | 8 ++++ .../pages/product/vtex.slider-layout.scss | 22 +++++++++++ .../pages/product/vtex.store-components.scss | 4 +- .../sass/pages/product/vtex.tab-layout.scss | 9 ++++- 16 files changed, 208 insertions(+), 13 deletions(-) diff --git a/react/components/description-section/styles.css b/react/components/description-section/styles.css index 8e7c700..fb22ea2 100644 --- a/react/components/description-section/styles.css +++ b/react/components/description-section/styles.css @@ -46,7 +46,14 @@ border-bottom: 1px solid #BFBFBF; } + .descriptionSectionTitle{ + font-size: 20px; + line-height: 32px; + } + .descriptionSectionParagraph{ + font-size: 14px; + line-height: 19px; margin-bottom: 16px; } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d5b0745..2975aa0 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -160,7 +160,8 @@ "blockClass": "container-slider-related-products-pdp", "itemsPerPage": { "desktop": 4, - "tablet": 3 + "tablet": 3, + "phone": 2 } } }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 1759793..8426c45 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -42,6 +42,9 @@ border: 0; border-radius: 0; } +.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) { + padding: 12px 0 !important; +} .container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { width: 100%; @@ -60,5 +63,25 @@ display: flex; flex-direction: column; padding-top: 16px; + padding-bottom: 0; + } + .flexRowContent--container-related-products-pdp { + padding: 0 53px; + } +} +@media screen and (max-width: 768px) { + .flexRowContent--container-quantity-and-buy-button { + display: flex; + flex-direction: column; + } + .flexRowContent--container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + justify-content: flex-start; + } + .flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) { + display: inline-block; + width: 56.7567%; + } + .flexRowContent--container-related-products-pdp { + padding: 0 48px; } } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 9c2c0d0..46e4ea5 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -7,10 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.quantitySelectorContainer { - margin-top: 6px; -} - .quantitySelectorTitle { display: none; } @@ -40,4 +36,10 @@ font-size: 16px; line-height: 22px; color: #000000; +} + +@media screen and (max-width: 768px) { + .quantitySelectorContainer { + width: 128px !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 1a8e3aa..cbde1a2 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -78,4 +78,27 @@ } .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .installmentContainer { display: none; +} + +@media screen and (max-width: 1024px) { + .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer .productBrand { + font-size: 14px; + line-height: 19px; + } + .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::before { + font-size: 12px; + line-height: 16px; + } + .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::after { + font-size: 12px; + line-height: 16px; + } + .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice .currencyContainer { + font-size: 12px; + line-height: 16px; + } + .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer .currencyContainer { + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 3b35606..ae08726 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -24,4 +24,9 @@ .container--title-related-products { margin-bottom: 24px; } +} +@media screen and (max-width: 768px) { + .container--title-related-products .heading--title-related-products { + font-size: 20px; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index b009796..2834139 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -44,4 +44,21 @@ height: 17px !important; background-color: #FFFFFF; border: 0.5px solid #000000; +} + +@media screen and (max-width: 1024px) { + .sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp { + left: -23px; + } + .sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp { + right: -22px; + } +} +@media screen and (max-width: 768px) { + .sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp { + left: -21px; + } + .sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp { + right: -20px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 22d50d0..9c84651 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -185,10 +185,10 @@ font-weight: 400; font-size: 12px; line-height: 16px; - text-decoration-line: underline; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: #000000; + text-decoration-line: underline; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { display: none; @@ -296,6 +296,8 @@ width: 100%; grid-template-areas: "label button" "notCep notCep"; grid-template-columns: 83.4459% 1fr; + padding-bottom: 23px; + margin-bottom: 16px; } .shippingContainer :global(.vtex-address-form__postalCode) { padding: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 8f9e156..5756466 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -52,11 +52,15 @@ .listContainer--container-list-tab-layout-pdp { flex-direction: column; padding: 0; - gap: 16px; margin-bottom: 16px; + border-top: 1px solid #B9B9B9; } .listContainer--container-list-tab-layout-pdp .listItem { width: max-content; + margin-bottom: 16px; + } + .listContainer--container-list-tab-layout-pdp .listItem:first-child { + margin-top: 16px; } .listContainer--container-list-tab-layout-pdp .listItemActive { border: 0; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 5bf7b89..a88e32a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -36,6 +36,10 @@ background-color: #000000; border: 0; border-radius: 0; + + :global(.vtex-button__label){ + padding: 12px 0 !important; + } } } @@ -58,6 +62,33 @@ display: flex; flex-direction: column; padding-top: 16px; + padding-bottom: 0; } } + + .flexRowContent--container-related-products-pdp{ + padding: 0 53px; + } +} + +@media screen and (max-width: 768px) { + .flexRowContent--container-quantity-and-buy-button{ + display: flex; + flex-direction: column; + + :global(.vtex-flex-layout-0-x-stretchChildrenWidth){ + justify-content: flex-start; + } + + :global(.vtex-button){ + :global(.vtex-button__label){ + display: inline-block; + width: 56.7567%; + } + } + } + + .flexRowContent--container-related-products-pdp{ + padding: 0 48px; + } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 315dec8..ca03fa0 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,7 +1,3 @@ -.quantitySelectorContainer{ - margin-top: 6px; -} - .quantitySelectorTitle { display: none; } @@ -36,3 +32,9 @@ color: #000000; } } + +@media screen and (max-width: 768px) { + .quantitySelectorContainer{ + width: 128px !important; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index beb920e..e3fb6b9 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -86,3 +86,42 @@ } } } + +@media screen and (max-width: 1024px) { + .containerNormal--container-product-summary-related-products-pdp{ + .element--container-product-summary-related-products-pdp{ + .nameContainer{ + .productBrand{ + font-size: 14px; + line-height: 19px; + } + } + + .priceContainer{ + .listPrice{ + &::before{ + font-size: 12px; + line-height: 16px; + } + + &::after{ + font-size: 12px; + line-height: 16px; + } + + .currencyContainer{ + font-size: 12px; + line-height: 16px; + } + } + + .sellingPriceContainer{ + .currencyContainer{ + font-size: 18px; + line-height: 25px; + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e30e484..d491d35 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -18,3 +18,11 @@ margin-bottom: 24px; } } + +@media screen and (max-width: 768px) { + .container--title-related-products{ + .heading--title-related-products{ + font-size: 20px; + } + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 5f70910..37b9af2 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -46,4 +46,26 @@ } } +@media screen and (max-width: 1024px) { + .sliderLayoutContainer--container-slider-related-products-pdp { + .sliderLeftArrow--container-slider-related-products-pdp{ + left: -23px; + } + .sliderRightArrow--container-slider-related-products-pdp{ + right: -22px; + } + } +} + +@media screen and (max-width: 768px) { + .sliderLayoutContainer--container-slider-related-products-pdp { + .sliderLeftArrow--container-slider-related-products-pdp{ + left: -21px; + } + + .sliderRightArrow--container-slider-related-products-pdp{ + right: -20px; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8179d7b..a781444 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -207,10 +207,10 @@ font-weight: 400; font-size: 12px; line-height: 16px; - text-decoration-line: underline; :last-child{ color: #000000; + text-decoration-line: underline; } :global(.vtex__icon-external-link){ @@ -341,6 +341,8 @@ grid-template-areas: "label button" "notCep notCep"; grid-template-columns: 83.4459% 1fr; + padding-bottom: 23px; + margin-bottom: 16px; :global(.vtex-address-form__postalCode){ padding: 0; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index ed6b840..ee91e57 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -54,11 +54,18 @@ .listContainer--container-list-tab-layout-pdp{ flex-direction: column; padding: 0; - gap: 16px; + // gap: 16px; margin-bottom: 16px; + border-top: 1px solid #B9B9B9; + .listItem{ width: max-content; + margin-bottom: 16px; + + &:first-child{ + margin-top: 16px; + } } .listItemActive{