diff --git a/store/blocks/pdp/product-image.jsonc b/store/blocks/pdp/product-image.jsonc index a2b4ccb..fc00f26 100644 --- a/store/blocks/pdp/product-image.jsonc +++ b/store/blocks/pdp/product-image.jsonc @@ -10,7 +10,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "1:1" }, "displayThumbnailsArrows": false, "showPaginationDots": false, diff --git a/store/blocks/pdp/product-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc index 0738bfe..96cde4c 100644 --- a/store/blocks/pdp/product-tab-layout.jsonc +++ b/store/blocks/pdp/product-tab-layout.jsonc @@ -7,6 +7,13 @@ } }, + "html#tab-layout#description": { + "props": { + "testId": "tab-layout" + }, + "children": ["tab-layout#description"] + }, + "tab-layout#description": { "children": ["tab-list#description", "tab-content#description"], "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4f469ce..a943307 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,7 @@ "html#breadcrumb", "condition-layout.product#availability", // "flex-layout.row#description", - "tab-layout#description", + "html#tab-layout#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", // "shelf.relatedProducts", diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8f920ed..921f1e8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -41,104 +41,26 @@ width: auto; padding: 0; } -@media (max-width: 1920px) and (min-width: 1024px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { - width: 100%; - margin-left: 0; - margin-right: 0; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { - width: 100%; - margin-left: 0; - margin-right: 0; - } +.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { + margin-left: 0; + margin-right: 0; } @media (max-width: 768px) and (min-width: 375px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { - width: 100%; - margin-left: 0; - margin-right: 0; + width: 99.67% !important; } } .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { margin: 0; } -@media (max-width: 2560px) and (min-width: 1920px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { - height: 904px !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { - margin: 0; - height: 944px !important; - } -} -@media (max-width: 2561px) and (min-width: 1920px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { - height: 904px !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { - height: 944px !important; - } -} .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - object-fit: unset !important; + object-fit: cover !important; max-height: unset !important; - height: 664px !important; + aspect-ratio: 1/1; + width: 100% !important; } -@media (max-width: 2561px) and (min-width: 1920px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - height: 904px !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - height: 944px !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - height: auto; - } -} -@media (max-width: 768px) and (min-width: 377px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - width: 99.67% !important; - min-height: 296px !important; - object-fit: cover !important; - height: auto !important; - } -} -@media (max-width: 377px) and (min-width: 376px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { - width: 99.67% !important; - min-height: unset !important; - height: 296px !important; - object-fit: cover !important; - } -} -@media (max-width: 1920px) and (min-width: 1024px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { - height: 664px; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { - height: 944px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo, - .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer { - height: 296px; - } +.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo .videoContainer { + padding: 50% !important; } .productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs { margin-top: 16px; @@ -597,25 +519,10 @@ } .shippingTable .shippingTableHead .shippingTableRow { display: grid; - grid-template-columns: 13% 8% 17%; + grid-template-columns: 78px 48px 136px; grid-template-areas: "A B C"; column-gap: 32px; } -@media (max-width: 2561px) and (min-width: 1920px) { - .shippingTable .shippingTableHead .shippingTableRow { - grid-template-columns: 10% 5.6% 12.5%; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .shippingTable .shippingTableHead .shippingTableRow { - grid-template-columns: 9.6% 5.5% 11.5%; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .shippingTable .shippingTableHead .shippingTableRow { - grid-template-columns: 30% 18% 39%; - } -} .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { @@ -650,26 +557,11 @@ } .shippingTable .shippingTableBody .shippingTableRow { display: grid; - grid-template-columns: 13% 8% 17%; + grid-template-columns: 78px 48px 136px; grid-template-areas: "A B C"; column-gap: 32px; margin-top: 15px; } -@media (max-width: 2561px) and (min-width: 1920px) { - .shippingTable .shippingTableBody .shippingTableRow { - grid-template-columns: 10% 5.6% 12.5%; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .shippingTable .shippingTableBody .shippingTableRow { - grid-template-columns: 9.6% 5.5% 11.5%; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .shippingTable .shippingTableBody .shippingTableRow { - grid-template-columns: 30% 18% 39%; - } -} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { grid-area: A; text-transform: capitalize; @@ -689,13 +581,15 @@ color: #afafaf; padding: 0; } +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel { + white-space: nowrap; +} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { display: none; } .productImagesContainer--image-description { width: 92.93%; - height: 632px; max-height: unset; position: relative; margin-left: 32px; @@ -703,13 +597,11 @@ @media (max-width: 2561px) and (min-width: 1920px) { .productImagesContainer--image-description { width: 94.784%; - height: 872px; } } @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer--image-description { width: 100%; - height: 944px; margin-left: 0; margin-bottom: 16px; } @@ -717,29 +609,10 @@ @media (max-width: 768px) and (min-width: 375px) { .productImagesContainer--image-description { width: 100%; - height: auto; margin-left: 0; margin-bottom: 16px; } } -.productImagesContainer--image-description .productImage--image-description { - height: 632px; -} -@media (max-width: 2561px) and (min-width: 1920px) { - .productImagesContainer--image-description .productImage--image-description { - height: 872px; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .productImagesContainer--image-description .productImage--image-description { - height: 944px; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .productImagesContainer--image-description .productImage--image-description { - height: auto; - } -} .productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main { object-fit: cover !important; max-height: unset !important; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 35b32a6..9881fdb 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -64,13 +64,13 @@ } @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItem { - width: 82px; + width: 100%; margin-bottom: 16px; } } @media (max-width: 768px) and (min-width: 375px) { .container--description-block .listContainer .listItem { - width: 82px; + width: 100%; margin-bottom: 16px; } } diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index 1466697..f3176c5 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -43,77 +43,25 @@ width: auto; padding: 0; .productImagesGallerySwiperContainer { - @media (max-width: 1920px) and (min-width: 1024px) { - width: 100%; - margin-left: 0; - margin-right: 0; - } - @media (max-width: 1025px) and (min-width: 768px) { - width: 100%; - margin-left: 0; - margin-right: 0; - } + margin-left: 0; + margin-right: 0; @media (max-width: 768px) and (min-width: 375px) { - width: 100%; - margin-left: 0; - margin-right: 0; + width: 99.67% !important; } .productImagesGallerySlide { margin: 0; - @media (max-width: 2560px) and (min-width: 1920px) { - height: 904px !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - margin: 0; - height: 944px !important; - } - .productImage { - @media (max-width: 2561px) and (min-width: 1920px) { - height: 904px !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px !important; - } - .productImageTag--main { - object-fit: unset !important; + object-fit: cover !important; max-height: unset !important; - height: 664px !important; - @media (max-width: 2561px) and (min-width: 1920px) { - height: 904px !important; - } - - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: auto; - } - @media (max-width: 768px) and (min-width: 377px) { - width: 99.67% !important; - min-height: 296px !important; - object-fit: cover !important; - height: auto !important; - } - @media (max-width: 377px) and (min-width: 376px) { - width: 99.67% !important; - min-height: unset !important; - height: 296px !important; - object-fit: cover !important; - } + aspect-ratio: 1/1; + width: 100% !important; } } - .productVideo, - .videoContainer { - @media (max-width: 1920px) and (min-width: 1024px) { - height: 664px; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px; - } - @media (max-width: 768px) and (min-width: 375px) { - height: 296px; + + .productVideo { + .videoContainer { + padding: 50% !important; } } } @@ -568,18 +516,9 @@ display: block; .shippingTableRow { display: grid; - grid-template-columns: 13% 8% 17%; + grid-template-columns: 78px 48px 136px; grid-template-areas: "A B C"; column-gap: 32px; - @media (max-width: 2561px) and (min-width: 1920px) { - grid-template-columns: 10% 5.6% 12.5%; - } - @media (max-width: 1025px) and (min-width: 768px) { - grid-template-columns: 9.6% 5.5% 11.5%; - } - @media (max-width: 768px) and (min-width: 375px) { - grid-template-columns: 30% 18% 39%; - } .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice { @@ -617,19 +556,10 @@ .shippingTableBody { .shippingTableRow { display: grid; - grid-template-columns: 13% 8% 17%; + grid-template-columns: 78px 48px 136px; grid-template-areas: "A B C"; column-gap: 32px; margin-top: 15px; - @media (max-width: 2561px) and (min-width: 1920px) { - grid-template-columns: 10% 5.6% 12.5%; - } - @media (max-width: 1025px) and (min-width: 768px) { - grid-template-columns: 9.6% 5.5% 11.5%; - } - @media (max-width: 768px) and (min-width: 375px) { - grid-template-columns: 30% 18% 39%; - } .shippingTableCellDeliveryName { grid-area: A; text-transform: capitalize; @@ -649,6 +579,7 @@ color: #afafaf; padding: 0; .shippingTableLabel { + white-space: nowrap; .shippingTableRadioBtn { display: none; } @@ -658,41 +589,28 @@ } } + //Tab Layout .productImagesContainer--image-description { width: 92.93%; - height: 632px; max-height: unset; position: relative; margin-left: 32px; @media (max-width: 2561px) and (min-width: 1920px) { width: 94.784%; - height: 872px; } @media (max-width: 1025px) and (min-width: 768px) { width: 100%; - height: 944px; margin-left: 0; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { width: 100%; - height: auto; margin-left: 0; margin-bottom: 16px; } .productImage--image-description { - height: 632px; - @media (max-width: 2561px) and (min-width: 1920px) { - height: 872px; - } - @media (max-width: 1025px) and (min-width: 768px) { - height: 944px; - } - @media (max-width: 768px) and (min-width: 375px) { - height: auto; - } & .productImageTag--image-description--main { object-fit: cover !important; max-height: unset !important; diff --git a/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss index 938d9fe..aa5ed62 100644 --- a/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss @@ -41,11 +41,11 @@ width: 142px; } @media (max-width: 1025px) and (min-width: 768px) { - width: 82px; + width: 100%; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { - width: 82px; + width: 100%; margin-bottom: 16px; } :global(.vtex-button) {