BernardoWaldhelm/challenge-vtex-io-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(product): adicionando tamanho real de imagem no product

Browse Source 
product
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-24 12:02:55 -03:00
parent b8841846a4
commit e50d232b85
5 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,7 +61,7 @@
"blockClass": "product"
},
"children": [
"flex-layout.row#product-image",
"html#flex-layout.row#product-image",
"product-bookmark",
"product-specification-badges"
]
@ -83,12 +83,14 @@
"rowGap": 0
}
},
"flex-layout.row#product-image": {
"html#flex-layout.row#product-image": {
"props":{
"testId": "product-images"
},
"children": ["product-images"]
},
"product-images": {
"props": {
"testId": "product-images",
"aspectRatio": {
"desktop": "auto",
"phone": "auto"

5
styles/css/vtex.flex-layout.css
View File

@ -111,6 +111,11 @@
}
}
.stretchChildrenWidth {
width: 50% !important;
padding-right: 16px;
margin-right: 16px;
}
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.stretchChildrenWidth {
width: 100% !important;

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

@ -11,6 +11,7 @@
.container {
padding: 16px 360px;
margin: 0;
max-width: 100%;
}
@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.container {
@ -60,6 +61,7 @@
height: 100% !important;
margin: 16px 16px 0 0;
border-radius: 8px;
max-width: calc(100% - 16px);
}
@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.carouselGaleryThumbs .productImagesThumb {

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

@ -104,6 +104,10 @@
}
.stretchChildrenWidth {
width: 50% !important;
padding-right: 16px;
margin-right: 16px;
@media #{$mq-tablet}, #{$mq-mobile}{
width: 100% !important;
padding-right: 0;

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

@ -1,6 +1,7 @@
.container {
padding:16px 360px;
margin: 0;
max-width: 100%;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
padding: 16px 40px;
@ -44,6 +45,7 @@
height: 100% !important;
margin: 16px 16px 0 0;
border-radius: 8px;
max-width: calc(100% - 16px);
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
width: 90px !important;