anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #5

Merged
anacarolinaduartecavalcante merged 7 commits from feature/challenge-vtex-io into develop 2023-02-06 12:05:50 +00:00
Conversation 0 Commits 7 Files Changed 7 +41 -243
7 changed files with 41 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
store/blocks/pdp/product-image.jsonc
View File

@ -10,7 +10,7 @@
"props": { "props": {
"aspectRatio": { "aspectRatio": {
"desktop": "auto", "desktop": "auto",
"phone": "16:9" "phone": "1:1"
}, },
"displayThumbnailsArrows": false, "displayThumbnailsArrows": false,
"showPaginationDots": false, "showPaginationDots": false,

7
store/blocks/pdp/product-tab-layout.jsonc
View File

@ -7,6 +7,13 @@
} }
}, },
"html#tab-layout#description": {
"props": {
"testId": "tab-layout"
},
"children": ["tab-layout#description"]
},
"tab-layout#description": { "tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"], "children": ["tab-list#description", "tab-content#description"],
"props": { "props": {

2
store/blocks/pdp/product.jsonc
View File

@ -4,7 +4,7 @@
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
// "flex-layout.row#description", // "flex-layout.row#description",
"tab-layout#description", "html#tab-layout#description",
// "flex-layout.row#specifications-title", // "flex-layout.row#specifications-title",
// "product-specification-group#table", // "product-specification-group#table",
// "shelf.relatedProducts", // "shelf.relatedProducts",

151
styles/css/vtex.store-components.css
View File

@ -41,104 +41,26 @@
width: auto; width: auto;
padding: 0; padding: 0;
} }
@media (max-width: 1920px) and (min-width: 1024px) { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
width: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
width: 100%;
margin-left: 0;
margin-right: 0;
}
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
width: 100%; width: 99.67% !important;
margin-left: 0;
margin-right: 0;
} }
} }
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide {
margin: 0; 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 { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
object-fit: unset !important; object-fit: cover !important;
max-height: unset !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 .productVideo .videoContainer {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { padding: 50% !important;
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 .carouselGaleryThumbs { .productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs {
margin-top: 16px; margin-top: 16px;
@ -597,25 +519,10 @@
} }
.shippingTable .shippingTableHead .shippingTableRow { .shippingTable .shippingTableHead .shippingTableRow {
display: grid; display: grid;
grid-template-columns: 13% 8% 17%; grid-template-columns: 78px 48px 136px;
grid-template-areas: "A B C"; grid-template-areas: "A B C";
column-gap: 32px; 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 .shippingTableHeadDeliveryName,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
@ -650,26 +557,11 @@
} }
.shippingTable .shippingTableBody .shippingTableRow { .shippingTable .shippingTableBody .shippingTableRow {
display: grid; display: grid;
grid-template-columns: 13% 8% 17%; grid-template-columns: 78px 48px 136px;
grid-template-areas: "A B C"; grid-template-areas: "A B C";
column-gap: 32px; column-gap: 32px;
margin-top: 15px; 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 { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
grid-area: A; grid-area: A;
text-transform: capitalize; text-transform: capitalize;
@ -689,13 +581,15 @@
color: #afafaf; color: #afafaf;
padding: 0; padding: 0;
} }
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel {
white-space: nowrap;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
display: none; display: none;
} }
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 92.93%; width: 92.93%;
height: 632px;
max-height: unset; max-height: unset;
position: relative; position: relative;
margin-left: 32px; margin-left: 32px;
@ -703,13 +597,11 @@
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 94.784%; width: 94.784%;
height: 872px;
} }
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 100%; width: 100%;
height: 944px;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -717,29 +609,10 @@
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 100%; width: 100%;
height: auto;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; 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 { .productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main {
object-fit: cover !important; object-fit: cover !important;
max-height: unset !important; max-height: unset !important;

4
styles/css/vtex.tab-layout.css
View File

@ -64,13 +64,13 @@
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItem { .container--description-block .listContainer .listItem {
width: 82px; width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.container--description-block .listContainer .listItem { .container--description-block .listContainer .listItem {
width: 82px; width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
} }
} }

104
styles/sass/pages/product/vtexStore/vtex.store-components.scss
View File

@ -43,77 +43,25 @@
width: auto; width: auto;
padding: 0; padding: 0;
.productImagesGallerySwiperContainer { .productImagesGallerySwiperContainer {
@media (max-width: 1920px) and (min-width: 1024px) {
width: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
}
@media (max-width: 1025px) and (min-width: 768px) {
width: 100%;
margin-left: 0;
margin-right: 0;
}
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 100%; width: 99.67% !important;
margin-left: 0;
margin-right: 0;
} }
.productImagesGallerySlide { .productImagesGallerySlide {
margin: 0; 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 { .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 { .productImageTag--main {
object-fit: unset !important; object-fit: cover !important;
max-height: unset !important; max-height: unset !important;
height: 664px !important; aspect-ratio: 1/1;
@media (max-width: 2561px) and (min-width: 1920px) { width: 100% !important;
height: 904px !important; }
} }
@media (max-width: 1025px) and (min-width: 768px) { .productVideo {
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;
}
}
}
.productVideo,
.videoContainer { .videoContainer {
@media (max-width: 1920px) and (min-width: 1024px) { padding: 50% !important;
height: 664px;
}
@media (max-width: 1025px) and (min-width: 768px) {
height: 944px;
}
@media (max-width: 768px) and (min-width: 375px) {
height: 296px;
} }
} }
} }
@ -568,18 +516,9 @@
display: block; display: block;
.shippingTableRow { .shippingTableRow {
display: grid; display: grid;
grid-template-columns: 13% 8% 17%; grid-template-columns: 78px 48px 136px;
grid-template-areas: "A B C"; grid-template-areas: "A B C";
column-gap: 32px; 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, .shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice { .shippingTableHeadDeliveryPrice {
@ -617,19 +556,10 @@
.shippingTableBody { .shippingTableBody {
.shippingTableRow { .shippingTableRow {
display: grid; display: grid;
grid-template-columns: 13% 8% 17%; grid-template-columns: 78px 48px 136px;
grid-template-areas: "A B C"; grid-template-areas: "A B C";
column-gap: 32px; column-gap: 32px;
margin-top: 15px; 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 { .shippingTableCellDeliveryName {
grid-area: A; grid-area: A;
text-transform: capitalize; text-transform: capitalize;
@ -649,6 +579,7 @@
color: #afafaf; color: #afafaf;
padding: 0; padding: 0;
.shippingTableLabel { .shippingTableLabel {
white-space: nowrap;
.shippingTableRadioBtn { .shippingTableRadioBtn {
display: none; display: none;
} }
@ -658,41 +589,28 @@
} }
} }
//Tab Layout //Tab Layout
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 92.93%; width: 92.93%;
height: 632px;
max-height: unset; max-height: unset;
position: relative; position: relative;
margin-left: 32px; margin-left: 32px;
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
width: 94.784%; width: 94.784%;
height: 872px;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 100%; width: 100%;
height: 944px;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 100%; width: 100%;
height: auto;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
.productImage--image-description { .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 { & .productImageTag--image-description--main {
object-fit: cover !important; object-fit: cover !important;
max-height: unset !important; max-height: unset !important;

4
styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss
View File

@ -41,11 +41,11 @@
width: 142px; width: 142px;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 82px; width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 82px; width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
} }
:global(.vtex-button) { :global(.vtex-button) {