From f1a6aca91c31fcef6cbf7b1241c9499edda4c9ef Mon Sep 17 00:00:00 2001 From: Rallenson Date: Wed, 8 Feb 2023 00:13:42 -0300 Subject: [PATCH] =?UTF-8?q?feat(product-view):add=20espa=C3=A7amentos=20de?= =?UTF-8?q?sktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 9 ++++++++- store/blocks/pdp/product.jsonc | 1 - styles/css/vtex.breadcrumb.css | 13 +++++++++---- styles/css/vtex.flex-layout.css | 10 +++++++--- styles/css/vtex.product-customizer.css | 12 ++++++++++++ styles/css/vtex.product-identifier.css | 2 +- styles/css/vtex.store-components.css | 4 ++++ styles/sass/pages/product/vtex.breadcrumb.scss | 11 +++++++---- styles/sass/pages/product/vtex.flex-layout.scss | 7 ++++++- .../sass/pages/product/vtex.product-customizer.scss | 3 +++ .../sass/pages/product/vtex.product-identifier.scss | 2 +- .../sass/pages/product/vtex.store-components.scss | 3 +++ 12 files changed, 61 insertions(+), 16 deletions(-) create mode 100644 styles/css/vtex.product-customizer.css create mode 100644 styles/sass/pages/product/vtex.product-customizer.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 563a32f..cf849ab 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,6 +1,8 @@ /* [class*=html--pdp-breadcrumb]{ } */ .html--pdp-productMain{ + padding-right: 2.778%; + padding-left: 2.778%; display: flex; } .html--StackLayout,.html--pdp-InfoBuy{ @@ -13,11 +15,16 @@ align-items: center; margin-bottom: 16px; } +.html--pdp-productMain :global(.vtex-button){ + display: none; +} .html--buy-button :global(.vtex-button){ + display: block; background: black; height: 49px; - max-width: 526px; + max-width: 77.354%; } + @media screen and (min-width: 1920px){ .html--buy-button :global(.vtex-button){ max-width: 766px; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 8423745..2c1ff89 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -447,7 +447,6 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", "sku-selector", "flex-layout.row#availability" ] diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 0168755..6a1126e 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,10 +8,15 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding: 0 40px 16px; - margin-left: auto; - margin-right: auto; - max-width: 96rem; + padding-top: 16px; + padding-right: 4%; + padding-left: 4%; +} +@media screen and (min-width: 1920px) { + .container { + padding-right: 14.063%; + padding-left: 14.063%; + } } @media screen and (max-width: 1024px) { .container { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 75fc336..1617d34 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -12,10 +12,14 @@ padding: 0 0.5rem; } +.flexRowContent--title .stretchChildrenWidth { + width: 100% !important; +} + +.flexRowContent--product-image { + justify-content: flex-end; +} @media screen and (min-width: 1920px) { - .flexRowContent--product-image { - justify-content: flex-end; - } .flexRowContent--product-image .stretchChildrenWidth { max-width: max-content; } diff --git a/styles/css/vtex.product-customizer.css b/styles/css/vtex.product-customizer.css new file mode 100644 index 0000000..d35601d --- /dev/null +++ b/styles/css/vtex.product-customizer.css @@ -0,0 +1,12 @@ +/* +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 */ +.textInputValue, .productAssemblyGroupNameRow { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index af7ca9b..023b6a4 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -11,5 +11,5 @@ display: block; text-align: end; margin-top: 8px; - padding-right: 8px; + padding-right: 40px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3b14d2c..1971c59 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,10 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.shareLabel, .skuSelectorNameSeparator, .skuSelectorSelectorImageValue { + display: none; +} + @media screen and (min-width: 1920px) { .productImagesContainer--carousel .carouselGaleryCursor { max-height: 906px; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index f42a4d8..ba5b0d6 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,8 +1,11 @@ .container{ - padding: 0 40px 16px; - margin-left: auto; - margin-right: auto; - max-width: 96rem; + padding-top:16px; + padding-right: 4%; + padding-left: 4%; + @media screen and (min-width: 1920px){ + padding-right: 14.063%; + padding-left: 14.063%; + } @media screen and (max-width: 1024px){ padding: 0 0 0 10.67%; } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 1ddcea0..d50e02e 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,9 +2,14 @@ .flexRowContent--main-header { padding: 0 0.5rem; } +.flexRowContent--title{ + .stretchChildrenWidth{ + width: 100% !important; + } +} .flexRowContent--product-image{ + justify-content: flex-end; @media screen and (min-width: 1920px){ - justify-content: flex-end; .stretchChildrenWidth{ max-width: max-content; } diff --git a/styles/sass/pages/product/vtex.product-customizer.scss b/styles/sass/pages/product/vtex.product-customizer.scss new file mode 100644 index 0000000..7026ebe --- /dev/null +++ b/styles/sass/pages/product/vtex.product-customizer.scss @@ -0,0 +1,3 @@ +.textInputValue,.productAssemblyGroupNameRow{ + display: none; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 5d3ae98..2656078 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -3,6 +3,6 @@ display: block; text-align: end; margin-top: 8px; - padding-right: 8px; + padding-right: 40px; } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 58b08a6..cf29d30 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,6 @@ +.shareLabel,.skuSelectorNameSeparator,.skuSelectorSelectorImageValue{ + display: none; +} .productImagesContainer--carousel{ .carouselGaleryCursor{ @media screen and (min-width: 1920px){