diff --git a/docs/Todo.md b/docs/Todo.md index 81d730f..c478340 100644 --- a/docs/Todo.md +++ b/docs/Todo.md @@ -11,9 +11,9 @@ os Requisitos cobrados serão: - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p -- FIXME [Blocos que devem ser ajustado e desenvolvidos](BreadCrumb){ {c} +- FIXME [Blocos que devem ser ajustado e desenvolvidos](Todo__Bloco_De_Imagens_Do_Produto){ {c} - - HACK 1. BreadCrumb; + - [x] 1. BreadCrumb; - HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens), @@ -22,6 +22,8 @@ os Requisitos cobrados serão: - HACK 4. prateleira de produtos, - HACK 5. Newsletter. + + - HACK dados_do_produto_e_de_compra-ao_lado_das_imagens } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dfe5938..1502415 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,15 +1,6 @@ { "store.product": { - "children": [ - "html#breadcrumb", - "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "example-component", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" - ] + "children": ["html#breadcrumb", "condition-layout.product#availability"] }, "html#breadcrumb": { "props": { @@ -53,7 +44,7 @@ "paddingTop": 7, "paddingBottom": 7 }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["flex-layout.col#stack"] }, "stack-layout": { @@ -80,7 +71,8 @@ "children": ["stack-layout"], "props": { "width": "60%", - "rowGap": 0 + "rowGap": 10, + "blockClass": "StackLayout" } }, "flex-layout.row#product-image": { @@ -90,8 +82,10 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, + "showNavigationArrows": false, + "showPaginationDots": false, "displayThumbnailsArrows": false, "thumbnailsOrientation": "horizontal" } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 068c230..9f092fd 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,6 +9,14 @@ /* Grid breakpoints */ .container { padding: 0 40px 16px; + margin-left: auto; + margin-right: auto; + max-width: 96rem; +} +@media screen and (max-width: 64.0625em) { + .container { + padding: 0 0 0 10.67%; + } } .container .term, .container .termArrow { display: none; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a2d8670..b055542 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -39,10 +39,70 @@ border-radius: 50%; } -.newsletter { - background: black; +.carouselContainer { + padding: 0 40px 0; +} +.carouselContainer .productImage { + max-width: 85.238%; +} +@media screen and (min-width: 156.25em) { + .carouselContainer .productImage { + min-width: 904px; + max-width: 100%; + } +} +@media screen and (max-width: 64.0625em) { + .carouselContainer .productImage { + min-width: 296px; + max-width: 100%; + } +} +@media screen and (max-width: 23.375em) { + .carouselContainer .productImage { + min-width: 0; + max-width: 100%; + } +} +.carouselContainer .productImage .productImageTag- { + max-height: 100% !important; + margin-bottom: 1em; + align-self: stretch; +} +.carouselContainer .productImage .productImageTag--main { + border-radius: 8px; + max-height: 100% !important; } .carouselGaleryThumbs { - flex-direction: row; + display: block; + height: max-content; +} +.carouselGaleryThumbs .productImagesThumb { + width: max-content !important; + background: white; + margin-right: 1em; +} +@media screen and (max-width: 64.0625em) { + .carouselGaleryThumbs .productImagesThumb { + width: 30% !important; + } +} +.carouselGaleryThumbs .productImagesThumb .figure { + width: 100%; +} +.carouselGaleryThumbs .productImagesThumb .figure--video { + min-height: 90px; +} +.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { + border-radius: 8px; + min-height: 5.54em; +} +@media screen and (max-width: 64.0625em) { + .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { + min-height: 4.9em; + } +} +.carouselGaleryThumbs .productImagesThumb .figure .thumbImg { + border-radius: 8px; + width: 90px; } \ 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 33263b7..c843639 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,6 +1,11 @@ .container{ padding: 0 40px 16px; - + margin-left: auto; + margin-right: auto; + max-width: 96rem; + @media screen and (max-width: 64.0625em){ + padding: 0 0 0 10.67%; + } .term,.termArrow{ display: none; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4386c44..38f013e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -44,10 +44,60 @@ } } -.newsletter{ - background: black; +.carouselContainer{ + padding: 0 40px 0; + .productImage{ + max-width:85.238%; + @media screen and (min-width: 156.25em){ + min-width: 904px; + max-width:100%; + } + @media screen and (max-width: 64.0625em){ + min-width: 296px; + max-width:100%; + } + @media screen and (max-width: 23.375em){ + min-width: 0; + max-width:100%; + } + .productImageTag-{ + max-height: 100% !important; + margin-bottom: 1em; + align-self: stretch; + &-main{ + border-radius: 8px; + max-height: 100% !important; + } + } + } +} +.carouselGaleryThumbs{ + display: block; + height: max-content; + .productImagesThumb{ + width: max-content !important; + background:white; + margin-right: 1em; + @media screen and (max-width: 64.0625em){ + width: 30% !important; + } + .figure{ + width: 100%; + &--video{ + min-height: 90px; + .thumbImg{ + border-radius: 8px; + min-height: 5.54em; + @media screen and (max-width: 64.0625em){ + min-height: 4.9em; + } + } + } + .thumbImg{ + border-radius: 8px; + width: 90px; + } + } + } } -.carouselGaleryThumbs{ - flex-direction: row; -}