From 753a05b21388dc7fdf3c467c4b0cfe6a76d083ec Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sat, 4 Feb 2023 22:03:14 -0300 Subject: [PATCH] feat(pdp-shelf): cretaed initial styles for small,medium devices --- store/blocks/pdp/product-shelf.jsonc | 24 ++++++++++++++++--- store/blocks/pdp/product.jsonc | 5 ++-- styles/css/vtex.flex-layout.css | 8 +++++-- styles/css/vtex.product-summary.css | 13 ++++++++++ styles/css/vtex.rich-text.css | 16 ++++++++++++- styles/css/vtex.slider-layout.css | 18 ++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 5 +++- .../pages/product/vtex.product-summary.scss | 14 +++++++++++ styles/sass/pages/product/vtex.rich-text.scss | 14 +++++++++++ .../pages/product/vtex.slider-layout.scss | 18 ++++++++++++++ 10 files changed, 125 insertions(+), 10 deletions(-) diff --git a/store/blocks/pdp/product-shelf.jsonc b/store/blocks/pdp/product-shelf.jsonc index 0b827f5..f300b20 100644 --- a/store/blocks/pdp/product-shelf.jsonc +++ b/store/blocks/pdp/product-shelf.jsonc @@ -26,14 +26,23 @@ "props": { "text": "## Você também pode gostar:", "textPosition": "CENTER", - "textAlignment": "CENTER" + "textAlignment": "CENTER", + "blockClass": "productShelfTitle" } }, "slider-layout#pdp-shelf": { "props": { "blockClass": "productShelf", - "infinite": true + "itemsPerPage": { + "desktop": 4, + "(min-width:1025px)": 4, + "(min-width:768px)": 3, + "tablet": 2, + + "phone": 2 + }, + "fullWidth": true } }, @@ -48,7 +57,16 @@ "product-summary-image#pdp-shelf": { "props": { "showBadge": false, - "alabelSellingPricespectRatio": "1:1" + "alabelSellingPricespectRatio": "1:1", + "aspectRatio": "1:1", + "width": { + "(min-width: 1921px)": "434.4px", + "desktop": "314.4px", + "(min-width:1025px)": "314.4px", + "(min-width:768px)": "291.2px", + "tablet": "291.2px", + "phone": "124.8px" + } } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1763bb7..e31ceb1 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -60,6 +60,7 @@ "rowGap": 7, "marginTop": 5, "marginBottom": 7, + "preserveLayoutOnMobile": false, "blockClass": "productMain" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] @@ -252,7 +253,5 @@ "blockClass": "message-availability" }, "children": ["availability-subscriber"] - }, - - "availability-subscriber": {} + } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 04257f5..d22f17b 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -110,9 +110,11 @@ } @media screen and (max-width: 1024px) { + .flexRowContent--productAvailability, .flexRowContent--productMain { flex-direction: column !important; } + .flexRowContent--productAvailability .stretchChildrenWidth, .flexRowContent--productMain .stretchChildrenWidth { width: 100% !important; } @@ -166,6 +168,8 @@ padding: 0 40px; } -.flexRow--productSpecificationItemContainer { - padding: 0 32px; +@media screen and (min-width: 1025px) { + .flexRow--productSpecificationItemContainer { + padding: 0 32px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index ff5bfe8..d8d05f8 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -49,4 +49,17 @@ .image { border-radius: 0.25rem; +} + +.sellingPriceContainer .currencyContainer { + font-weight: 700; + color: #000; + font-size: 18px; + line-height: normal; +} +@media screen and (min-width: 1025px) { + .sellingPriceContainer .currencyContainer { + font-size: 24px; + line-height: normal; + } } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..94c2731 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,18 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--productShelfTitle { + padding: 0 40px; +} +.container--productShelfTitle .heading { + font-size: 20px; + font-weight: 400; + line-height: 38px; + color: #575757; +} +@media screen and (min-width: 768px) { + .container--productShelfTitle .heading { + font-size: 24px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 3774535..b86105f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -42,4 +42,22 @@ .sliderLayoutContainer--productShelf { width: 100%; padding: 0 40px; +} + +.paginationDotsContainer--productShelf { + align-items: center; +} + +.paginationDot--productShelf { + background-color: #000; + width: 10px !important; + height: 10px !important; + transition: 300ms ease; +} + +.paginationDot--productShelf--isActive { + border: 1px solid #000; + background-color: #fff; + width: 17px !important; + height: 17px !important; } \ 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 e739273..0206316 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -102,6 +102,7 @@ padding: 0 40px; } +.flexRowContent--productAvailability, .flexRowContent--productMain { @media screen and (max-width: 1024px) { flex-direction: column !important; @@ -166,5 +167,7 @@ } .flexRow--productSpecificationItemContainer { - padding: 0 32px; + @media screen and (min-width: 1025px) { + padding: 0 32px; + } } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index a44c3bf..b973a61 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -42,3 +42,17 @@ .image { border-radius: 0.25rem; } + +.sellingPriceContainer { + .currencyContainer { + font-weight: 700; + color: #000; + font-size: 18px; + line-height: normal; + + @media screen and (min-width: 1025px) { + font-size: 24px; + line-height: normal; + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..d2accd7 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,14 @@ +.container--productShelfTitle { + padding: 0 40px; + + .heading { + font-size: 20px; + font-weight: 400; + line-height: 38px; + color: #575757; + + @media screen and (min-width: 768px) { + font-size: 24px; + } + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 7334989..e4c1e34 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -34,3 +34,21 @@ width: 100%; padding: 0 40px; } + +.paginationDotsContainer--productShelf { + align-items: center; +} + +.paginationDot--productShelf { + background-color: #000; + width: 10px !important; + height: 10px !important; + transition: 300ms ease; +} + +.paginationDot--productShelf--isActive { + border: 1px solid #000; + background-color: #fff; + width: 17px !important; + height: 17px !important; +}