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": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "1:1"
},
"displayThumbnailsArrows": 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": {
"children": ["tab-list#description", "tab-content#description"],
"props": {

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

@ -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",

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

@ -41,104 +41,26 @@
width: auto;
padding: 0;
}
@media (max-width: 1920px) and (min-width: 1024px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
width: 100%;
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
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;
}
}
@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;

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

@ -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;
}
}

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

@ -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;
}
@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;
aspect-ratio: 1/1;
width: 100% !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;
}
}
}
.productVideo,
.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;
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;

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

@ -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) {