From cf0a37e7c7033cdf3fb3af451e03fb2e4486c4e7 Mon Sep 17 00:00:00 2001 From: Saulo Klein Nery Date: Thu, 9 Feb 2023 07:47:26 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Cria=20=C3=A1rea=20do=20produto=20mobil?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 21 ++++++------- styles/css/vtex.flex-layout.css | 16 ++++++++++ styles/css/vtex.product-identifier.css | 14 ++++++--- styles/css/vtex.product-price.css | 2 +- styles/css/vtex.store-components.css | 29 +++++++++++++++++- .../sass/pages/product/vtex.flex-layout.scss | 21 +++++++++++-- .../product/vtex.product-identifier.scss | 14 +++++---- .../pages/product/vtex.product-price.scss | 2 +- .../pages/product/vtex.store-components.scss | 30 ++++++++++++++++++- styles/sass/utils/_vars.scss | 5 ++-- 10 files changed, 126 insertions(+), 28 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index cafa064..ceabb6d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,12 +5,13 @@ //"example-component", "condition-layout.product#availability", "tab-layout", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + //"flex-layout.row#specifications-title", + //"product-specification-group#table", + "shelf.relatedProducts" + //"product-questions-and-answers" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -116,6 +117,9 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", + //"availability-subscriber", + //"product-assembly-options", "product-rating-summary", //"flex-layout.row#list-price-savings", "flex-layout.row#selling-prices", @@ -123,12 +127,9 @@ "pix-component", //"product-separator", "sku-selector", - "product-identifier.product", //"product-quantity", - "product-assembly-options", - "product-gifts", + //"product-gifts", "flex-layout.row#buy-button", - "availability-subscriber", "shipping-simulator", "placeholder-component" //"share#default" @@ -190,9 +191,9 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "flex-layout.row#availability", - "sku-selector", - "product-identifier.product" + "sku-selector" ] }, "flex-layout.row#availability": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index bcfdc52..4b9d108 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -15,6 +15,16 @@ margin: 16px 0; padding: 0 40px; } +@media only screen and (max-width: 1024px) { + .flexRow .flexRowContent--productPanel { + flex-direction: column; + } +} +@media only screen and (max-width: 1024px) { + .flexRow .flexRowContent--productPanel .stretchChildrenWidth { + width: 100% !important; + } +} .flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child { padding: 0; justify-content: normal; @@ -22,6 +32,12 @@ .flexRow .flexRowContent--productPanel .flexCol--productShowcase { padding: 0 32px 0 0; } +@media only screen and (max-width: 1024px) { + .flexRow .flexRowContent--productPanel .flexCol--productShowcase { + padding: 0; + margin: 0 0 32px; + } +} .flexRow .flexRowContent--quantityAndBuy { margin: 0 0 16px; } diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 1f9926e..b34e401 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -9,14 +9,20 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ .product-identifier--productReference { - position: absolute; - top: 42px; - right: 0; + margin: 8px 0 0; + display: flex; + justify-content: flex-end; font-weight: 400; font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.4784313725); } -.product-identifier--productReference__label, .product-identifier--productReference__separator { +@media only screen and (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} +.product-identifier--productReference :global(.vtex-product-identifier-0-x-product-identifier__label), +.product-identifier--productReference :global(.vtex-product-identifier-0-x-product-identifier__separator) { display: none; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 6ce21e7..8533852 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -9,7 +9,7 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ .sellingPrice--hasListPrice { - margin: 51px 0 0; + margin: 24px 0 0; font-weight: 700; font-size: 25px; line-height: 38px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 237295e..32c7c4b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -37,6 +37,11 @@ .container .carouselContainer .carouselThumbBorder { height: fit-content; } +@media only screen and (max-width: 1024px) { + .container .productImagesGallerySlide { + width: 100% !important; + } +} .container .productImagesThumb { max-height: 90px !important; margin: 0 16px 0 0; @@ -55,9 +60,20 @@ max-width: 664px; min-height: 664px; } +@media only screen and (max-width: 1024px) { + .container .productImageTag--main { + min-height: 994px; + max-width: none; + } +} .container .productNameContainer { text-align: right; } +@media only screen and (max-width: 1024px) { + .container .productNameContainer { + text-align: left; + } +} .container .productNameContainer .productBrand--quickview { font-weight: 300; font-size: 20px; @@ -103,6 +119,12 @@ justify-content: center; border: 1px solid #989898; } +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} .container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { border-radius: 50%; background-image: linear-gradient(to top left, transparent 44%, #d5d5d5, transparent 52%); @@ -110,6 +132,9 @@ .container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { border: 2px solid #000; } +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { + color: #000; +} .container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer { margin: 0; } @@ -127,7 +152,7 @@ margin: 0; } .container .subscriberContainer { - margin: 43px 0 0; + margin: 24px 0 0; } .container .subscriberContainer :global(.vtex-store-components-3-x-title) { font-size: 0; @@ -159,6 +184,8 @@ column-gap: 10px; row-gap: 15px; margin: 16px 0 0; + width: 100%; + max-width: initial; } .container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-input) { margin: 0; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index a3b9ceb..9d10dca 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -10,13 +10,28 @@ margin: 16px 0; padding: 0 40px; - .stretchChildrenWidth:first-child { - padding: 0; - justify-content: normal; + @include mq(lg, max) { + flex-direction: column; + } + + .stretchChildrenWidth { + @include mq(lg, max) { + width: 100% !important; + } + + &:first-child { + padding: 0; + justify-content: normal; + } } .flexCol--productShowcase { padding: 0 32px 0 0; + + @include mq(lg, max) { + padding: 0; + margin: 0 0 32px; + } } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 1fc30e2..ec2a917 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,14 +1,18 @@ .product-identifier--productReference { - position: absolute; - top: 42px; - right: 0; + margin: 8px 0 0; + display: flex; + justify-content: flex-end; font-weight: 400; font-size: 14px; line-height: 19px; color: $color-gray8; - &__label, - &__separator { + @include mq(lg, max) { + justify-content: flex-start; + } + + :global(.vtex-product-identifier-0-x-product-identifier__label), + :global(.vtex-product-identifier-0-x-product-identifier__separator) { display: none; } } diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 0dd8401..dc5c00c 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -1,5 +1,5 @@ .sellingPrice--hasListPrice { - margin: 51px 0 0; + margin: 24px 0 0; font-weight: 700; font-size: 25px; line-height: 38px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9145579..4f3adec 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -32,6 +32,12 @@ } } + .productImagesGallerySlide { + @include mq(lg, max) { + width: 100% !important; + } + } + .productImagesThumb { max-height: 90px !important; margin: 0 16px 0 0; @@ -51,11 +57,20 @@ object-fit: fill !important; max-width: 664px; min-height: 664px; + + @include mq(lg, max) { + min-height: 994px; + max-width: none; + } } .productNameContainer { text-align: right; + @include mq(lg, max) { + text-align: left; + } + .productBrand--quickview { font-weight: 300; font-size: 20px; @@ -105,6 +120,13 @@ justify-content: center; border: 1px solid $color-gray9; + .valueWrapper { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray15; + } + .diagonalCross { border-radius: 50%; background-image: linear-gradient( @@ -118,6 +140,10 @@ &--selected .skuSelectorInternalBox { border: 2px solid $color-black2; + + .valueWrapper { + color: $color-black2; + } } } } @@ -148,7 +174,7 @@ } .subscriberContainer { - margin: 43px 0 0; + margin: 24px 0 0; :global(.vtex-store-components-3-x-title) { font-size: 0; @@ -183,6 +209,8 @@ column-gap: 10px; row-gap: 15px; margin: 16px 0 0; + width: 100%; + max-width: initial; :global(.vtex-store-components-3-x-input) { margin: 0; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index c426205..ff8a6a9 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -20,6 +20,7 @@ $color-gray11: #d5d5d5; $color-gray12: #868686; $color-gray13: #b9b9b9; $color-gray14: #bfbfbf; +$color-gray15: #b9b9b999; $color-blue: #4267b2; @@ -31,8 +32,8 @@ $grid-breakpoints: ( cstm: 400, sm: 576px, md: 768px, - lg: 992px, - xl: 1200px, + lg: 1025px, + xl: 2500px, ) !default; $z-index: (