From 681b3f85341bb8b0f839ec506be050ec8ccfb276 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 27 Jan 2023 10:46:17 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20faz=20a=20estiliza=C3=A7=C3=A3o=20do=20?= =?UTF-8?q?bloco=20product-images?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 24 ++-- styles/css/vtex.breadcrumb.css | 1 + styles/css/vtex.flex-layout.css | 112 +++--------------- styles/css/vtex.store-components.css | 54 +++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 1 + .../sass/pages/product/vtex.flex-layout.scss | 9 ++ .../pages/product/vtex.store-components.scss | 44 ++++++- 7 files changed, 139 insertions(+), 106 deletions(-) create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..33db0f8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -60,7 +60,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#product-image", "product-bookmark", "product-specification-badges" ] @@ -78,26 +78,32 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", "rowGap": 0 } }, - "flex-layout.row#product-image": { + "html#product-image": { + "props":{ + "tag": "div", + "testId": "product-images", + "blockClass": "product-image" + }, "children": ["product-images"] }, "product-images": { "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true + "aspectRatio": "1:1", + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal", + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailAspectRatio": "1:1" } }, "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "blockClass": "right-col" }, "children": [ "flex-layout.row#product-name", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 18b33b9..3042684 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,6 +9,7 @@ /* Grid breakpoints */ .container { padding: 0 40px; + margin-bottom: 16px; } .container .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..e989d37 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,18 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +.flexRowContent { + padding-top: 0; + padding-bottom: 0; + margin: 0; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +.stretchChildrenWidth { + width: 100% !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..470eb35 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,58 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.container { + padding: 0 40px; +} + +.thumbImg, +.figure, +.carouselThumbBorder { + width: 90px; + height: 90px; +} + +.productImagesThumb { + width: 90px !important; + height: 90px !important; + margin: 0 16px 0 0; +} + +.productImageTag, +.productImageTag--main { + max-width: 100%; + max-height: 100% !important; + margin-bottom: 16px; +} + +.carouselGaleryThumbs, +.carouselGaleryCursor, +.carouselContainer, +.productImagesContainer, +.productImagesContainer--carousel, +.content { + max-width: 664px; + margin: 0; +} +@media screen and (min-width: 1920px) { + .carouselGaleryThumbs, + .carouselGaleryCursor, + .carouselContainer, + .productImagesContainer, + .productImagesContainer--carousel, + .content { + max-width: 904px; + } +} +@media screen and ((min-width: 1025px) and (max-width: 1200px)) { + .carouselGaleryThumbs, + .carouselGaleryCursor, + .carouselContainer, + .productImagesContainer, + .productImagesContainer--carousel, + .content { + max-width: 500px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 286ae2b..111fa01 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,5 +1,6 @@ .container { padding: 0 40px; + margin-bottom: 16px; .homeIcon { display: none; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..287fa78 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,9 @@ +.flexRowContent { + padding-top: 0; + padding-bottom: 0; + margin: 0; +} + +.stretchChildrenWidth { + width: 100% !important; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..331c289 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,45 @@ .newsletter{ background: red; -} \ No newline at end of file +} + +.container { + padding: 0 40px; +} + +.thumbImg, +.figure, +.carouselThumbBorder { + width: 90px; + height: 90px; +} + +.productImagesThumb { + width: 90px !important; + height: 90px !important; + margin: 0 16px 0 0; +} + +.productImageTag, +.productImageTag--main { + max-width: 100%; + max-height: 100% !important; + margin-bottom: 16px; +} + +.carouselGaleryThumbs, +.carouselGaleryCursor, +.carouselContainer, +.productImagesContainer, +.productImagesContainer--carousel, +.content { + max-width: 664px; + margin: 0; + + @media screen and (min-width: 1920px) { + max-width: 904px; + } + + @media screen and ((min-width: 1025px) and (max-width: 1200px)) { + max-width: 500px; + } +}