diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 732dcab..a00c400 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -1,7 +1,30 @@ .html--pdp-breadcrumb { margin: 0 40px; + +} + +.html--product-summary-container { + margin: 0 40px; } +@media screen and (min-width: 1920px) { + .html--pdp-breadcrumb { + margin: 0 360px; + + } + + .html--product-summary-container { + margin: 0 360px; + } +} + + +@media screen and (min-width: 768px) { + .html--quantity-and-button { + display: flex; + } + +} /*buy-button*/ /* [class*="flexRowContent--btn-product"] button { diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..f9e22eb 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b6c37c4..ebc66b3 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -125,14 +125,20 @@ "html#product-installments", "html#Pix", "html#sku-selector", - "html#product-quantity", + "html#buy-container", "product-assembly-options", - "flex-layout.row#buy-button", "availability-subscriber", "html#shipping-simulator" ] }, + "html#buy-container": { + "props": { + "blockClass": "quantity-and-button" + }, + "children": ["html#product-quantity", "flex-layout.row#buy-button"] + }, + "html#product-installments": { "props": { "testId": "product-installments" @@ -287,7 +293,8 @@ "html#slider": { "props": { - "testId": "product-summary-list" + "testId": "product-summary-list", + "blockClass": "product-summary-container" }, "children": ["slider-layout#carrosselatualizado"] }, @@ -297,7 +304,7 @@ "itemsPerPage": { "desktop": 4, "tablet": 3, - "phone": 1 + "phone": 2 }, "infinite": true, "showNavigationArrows": "desktopOnly", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 54bc3fb..dfa6723 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -32,15 +32,15 @@ position: relative; } -@media screen and (min-width: 769px) { - .flexRow--btn-product { - width: 100%; - max-width: 526px; - position: absolute; - top: 374px; - left: 158px; +@media screen and (min-width: 768px) { + .flexRowContent--btn-product { + margin: 0 10px; } } + +.flexRow--btn-product { + width: 100%; +} .flexRow--btn-product :global(.vtex-button) { background-color: black; border: 1px solid black; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8bdc6b8..c35730b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -27,7 +27,7 @@ /* carouselThumbs*/ .carouselGaleryThumbs { - height: 200px; + height: 140px; margin-top: 16px; } .carouselGaleryThumbs .productImagesThumb { @@ -267,6 +267,12 @@ line-height: 32px; color: #575757; } +@media screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 32px; + line-height: 32px; + } +} .productDescriptionContainer .productDescriptionText { font-family: "Open Sans"; font-style: normal; @@ -275,6 +281,12 @@ line-height: 19px; color: #929292; } +@media screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionText { + font-size: 18px; + line-height: 25px; + } +} @media screen and (max-width: 1024px) { .productDescriptionContainer { margin-top: 16px; @@ -322,7 +334,12 @@ margin: 16px; } .newsletter .inputGroup { - width: 774px; + display: flex; +} +@media screen and (min-width: 768px) { + .newsletter .inputGroup { + width: 774px; + } } .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 9402e34..4dd8dc1 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -15,6 +15,11 @@ margin: auto; width: 95%; } +@media screen and (min-width: 1920px) { + .listContainer { + width: 75%; + } +} @media screen and (max-width: 1024px) { .listContainer { flex-direction: column; @@ -26,6 +31,11 @@ display: flex; padding: 62px 52px; } +@media screen and (min-width: 1920px) { + .contentItem { + padding: 62px 360px; + } +} @media screen and (max-width: 1024px) { .contentItem { flex-direction: column; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 04b5f20..5baf2f9 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -27,14 +27,13 @@ position: relative; } -.flexRow--btn-product { - @media screen and (min-width: 769px) { - width: 100%; - max-width: 526px; - position: absolute; - top: 374px; - left: 158px; +.flexRowContent--btn-product { + @media screen and (min-width: 768px) { + margin: 0 10px; } +} +.flexRow--btn-product { + width: 100%; :global(.vtex-button) { background-color: black; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f8974d9..41763a1 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -15,7 +15,7 @@ /* carouselThumbs*/ .carouselGaleryThumbs { - height: 200px; + height: 140px; margin-top: 16px; .productImagesThumb { @@ -296,6 +296,11 @@ line-height: 32px; color: $color-gray6; + + @media screen and (min-width: 1920px) { + font-size: 32px; + line-height: 32px; + } } .productDescriptionText { @@ -306,6 +311,11 @@ line-height: 19px; color: $color-gray8; + + @media screen and (min-width: 1920px) { + font-size: 18px; + line-height: 25px; + } } @media screen and (max-width: 1024px) { @@ -361,7 +371,10 @@ } .inputGroup { - width: 774px; + display: flex; + @media screen and (min-width: 768px) { + width: 774px; + } :global(.vtex-input-prefix__group) { border: none; border-bottom: 1px solid gray; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 1696228..607c713 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -5,6 +5,9 @@ margin: auto; width: 95%; + @media screen and (min-width: 1920px) { + width: 75%; + } @media screen and (max-width: 1024px) { flex-direction: column; border-top: 1px solid #b9b9b9; @@ -15,6 +18,10 @@ display: flex; padding: 62px 52px; + @media screen and (min-width: 1920px) { + padding: 62px 360px; + } + @media screen and (max-width: 1024px) { flex-direction: column; padding: 16px 40px;