From 91632df73c86e27bf8675ec41240bb7f87b9b650 Mon Sep 17 00:00:00 2001 From: Filipe Quintanilha Date: Thu, 9 Feb 2023 13:51:10 -0300 Subject: [PATCH] =?UTF-8?q?feat(Informa=C3=A7=C3=B5es=20do=20produto=20e?= =?UTF-8?q?=20Descri=C3=A7=C3=A3o=20do=20produto):=20Ajusta=20para=20telas?= =?UTF-8?q?=20menores=20que=201024px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 35 +++++++++--------- store/blocks/pdp/product.jsonc | 8 +++-- styles/css/vtex.flex-layout.css | 18 ++++++++++ styles/css/vtex.product-identifier.css | 7 ++++ styles/css/vtex.store-components.css | 25 ++++++++++++- styles/css/vtex.tab-layout.css | 30 ++++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 24 +++++++++++++ .../product/vtex.product-identifier.scss | 7 ++++ .../pages/product/vtex.store-components.scss | 34 +++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 36 +++++++++++++++++++ 10 files changed, 202 insertions(+), 22 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 8a1d006..4ea7846 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,29 +1,29 @@ -[class*="html--quantity-wrapper"] { +[class*='html--quantity-wrapper'] { display: flex; align-items: center; margin-bottom: 16px; } -[class*="vtex-product-quantity-1-x-quantitySelectorContainer"] { +[class*='vtex-product-quantity-1-x-quantitySelectorContainer'] { margin: 0; } -[class*="quantitySelectorTitle"] { +[class*='quantitySelectorTitle'] { display: none; } -[class*="vtex-numeric-stepper-container"] { +[class*='vtex-numeric-stepper-container'] { margin-right: 10px; height: 49px; } -[class*="vtex-numeric-stepper__input"], -[class*="vtex-numeric-stepper__plus-button"], -[class*="vtex-numeric-stepper__minus-button"] { +[class*='vtex-numeric-stepper__input'], +[class*='vtex-numeric-stepper__plus-button'], +[class*='vtex-numeric-stepper__minus-button'] { height: 49px; } -[class*="vtex-numeric-stepper__input"] { +[class*='vtex-numeric-stepper__input'] { border: 1px solid #afafaf; border-right: none; border-left: none; @@ -31,37 +31,38 @@ font-weight: 400; font-size: 16px; line-height: 22px; + width: 44px; } -[class*="vtex-numeric-stepper__minus-button"] { +[class*='vtex-numeric-stepper__minus-button'] { border: none; border: 1px solid #afafaf; border-radius: 0; } -[class*="vtex-numeric-stepper__minus-button-container"], -[class*="vtex-numeric-stepper__minus-button__text"] { +[class*='vtex-numeric-stepper__minus-button-container'], +[class*='vtex-numeric-stepper__minus-button__text'] { border: none; } -[class*="vtex-numeric-stepper__plus-button"] { +[class*='vtex-numeric-stepper__plus-button'] { border: none; border: 1px solid #afafaf; border-radius: 0; } -[class*="vtex-numeric-stepper__plus-button-container"], -[class*="vtex-numeric-stepper__plus-button__text"] { +[class*='vtex-numeric-stepper__plus-button-container'], +[class*='vtex-numeric-stepper__plus-button__text'] { border: none; } -[class*="vtex-numeric-stepper__plus-button__text"], -[class*="vtex-numeric-stepper__minus-button__text"] { +[class*='vtex-numeric-stepper__plus-button__text'], +[class*='vtex-numeric-stepper__minus-button__text'] { display: flex; align-items: center; color: #000000; } -[class*="html--buy-button"] { +[class*='html--buy-button'] { width: 100%; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4e65b19..e0b0ad2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -154,7 +154,8 @@ "marginTop": 4, "marginBottom": 7, "paddingTop": 7, - "paddingBottom": 7 + "paddingBottom": 7, + "blockClass": "conteudo-principal" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -182,8 +183,9 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "51%", - "rowGap": 0 + // "width": "52%", + "rowGap": 0, + "blockClass": "conteudo-imagens" } }, "flex-layout.row#product-image": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 5ae922a..81bd014 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -12,6 +12,7 @@ position: relative; padding: 0; margin: 0; + gap: 32px; } .flexRowContent--container-compra { @@ -23,4 +24,21 @@ .flexRowContent--preco { margin: 0; +} + +.stretchChildrenWidth { + padding: 0; +} + +@media screen and (max-width: 1024px) { + .flexRowContent--conteudo-principal { + flex-direction: column; + } + .flexRowContent--conteudo-principal .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } + .flexCol { + position: relative; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 11b170e..9dfc17a 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -19,4 +19,11 @@ } .product-identifier__label, .product-identifier__separator { display: none; +} + +@media screen and (max-width: 1024px) { + .product-identifier { + left: 0; + top: 42px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 899426d..64e07d1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -153,7 +153,7 @@ .shippingContainer :global(.vtex-input-prefix__group) { height: 49px; - padding-right: 21px; + padding-right: 23px; display: flex; align-items: center; } @@ -330,6 +330,29 @@ color: #929292; } +@media screen and (max-width: 1024px) { + .productImageTag { + max-height: 994px !important; + } + .productImagesThumb { + height: auto !important; + width: 90px !important; + margin-right: 16px; + padding-right: 0 !important; + margin-bottom: 0; + } + .figure { + width: 90px; + height: 90px; + } + .productNameContainer { + text-align: left !important; + margin-bottom: 51px !important; + } + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + left: 312px; + } +} @media screen and (min-width: 1920px) { .container { padding: 0 360px; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2e91af8..ee40c8f 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -42,4 +42,34 @@ display: flex; gap: 32px; padding: 32px 32px 0; +} + +@media screen and (max-width: 1024px) { + .container { + padding-top: 0; + } + .container .listContainer { + flex-direction: column; + padding: 16px 0; + border-top: 1px solid #b9b9b9; + gap: 16px; + } + .container .listItem :global(.vtex-button) { + width: 100%; + } + .container .listItem :global(.vtex-button) :global(.vtex-button__label) { + flex-direction: column; + align-items: flex-start; + padding: 0; + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .container .listItemActive :global(.vtex-button) { + border-bottom: none !important; + } +} +@media screen and (min-width: 1920px) { + .container { + padding: 16px 360px 0; + } } \ 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 fa1c1e7..9afec9a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,6 +2,7 @@ position: relative; padding: 0; margin: 0; + gap: 32px; } .flexRowContent--container-compra { @@ -14,3 +15,26 @@ .flexRowContent--preco { margin: 0; } + +.stretchChildrenWidth { + padding: 0; +} + +// .flexCol--conteudo-imagens { +// width: 98.35% !important; +// } + +@media screen and (max-width: 1024px) { + .flexRowContent--conteudo-principal { + flex-direction: column; + + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } + } + + .flexCol { + position: relative; + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index faadb27..1116400 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -12,3 +12,10 @@ display: none; } } + +@media screen and (max-width: 1024px) { + .product-identifier { + left: 0; + top: 42px; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3ab12f1..c0d1767 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -177,7 +177,7 @@ .shippingContainer { :global(.vtex-input-prefix__group) { height: 49px; - padding-right: 21px; + padding-right: 23px; display: flex; align-items: center; :global(.vtex-input__suffix) { @@ -386,6 +386,38 @@ color: $color-gray7; } +@media screen and (max-width: 1024px) { + .productImageTag { + max-height: 994px !important; + } + + .productImagesThumb { + height: auto !important; + width: 90px !important; + margin-right: 16px; + padding-right: 0 !important; + margin-bottom: 0; + } + + .figure { + width: 90px; + height: 90px; + } + + .productNameContainer { + text-align: left !important; + margin-bottom: 51px !important; + } + + .shippingContainer { + :global(.vtex-address-form__postalCode) { + :global(.vtex-address-form__postalCode-forgottenURL) { + left: 312px; + } + } + } +} + @media screen and (min-width: 1920px) { .container { padding: 0 360px; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 9c25fee..30df9c6 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -44,3 +44,39 @@ } } } + +@media screen and (max-width: 1024px) { + .container { + padding-top: 0; + .listContainer { + flex-direction: column; + padding: 16px 0; + border-top: 1px solid $color-gray11; + gap: 16px; + } + + .listItem { + :global(.vtex-button) { + width: 100%; + :global(.vtex-button__label) { + flex-direction: column; + align-items: flex-start; + padding: 0; + padding-top: 0 !important; + padding-bottom: 0 !important; + } + } + } + + .listItemActive { + :global(.vtex-button) { + border-bottom: none !important; + } + } + } +} +@media screen and (min-width: 1920px) { + .container { + padding: 16px 360px 0; + } +}