Vitor_soares/challenge-vtex-io-vitor-soares
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona responsividade imagens tablet

Browse Source
This commit is contained in:
Vitor Soares 2023-02-07 12:19:24 -03:00
parent 731ec32b45
commit 342774490f
6 changed files with 127 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
react/components/Html/styles.css
View File

@ -12,10 +12,18 @@
width: 99.432%;
}
[class*="description-container"] {
display: flex;
}
@media only screen and (max-width: 1024px) {
[class*="html--buy-button"] :global(.vtex-button) {
width: 100%;
}
[class*="description-container"] {
flex-direction: column;
}
}
@media only screen and (max-width: 768px) {

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

@ -4,7 +4,7 @@
"html#breadcrumb",
"condition-layout.product#availability",
"tab-layout#product",
// "flex-layout.row#description",
// "html#description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
// "shelf.relatedProducts",
@ -217,7 +217,7 @@
"tabId": "product1",
"blockClass": "content-render"
},
"children": ["flex-layout.row#description"]
"children": ["html#description"]
},
"tab-content.item#product2": {
@ -225,7 +225,7 @@
"tabId": "product2",
"blockClass": "content-render"
},
"children": ["flex-layout.row#description"]
"children": ["html#description"]
},
"tab-content.item#product3": {
@ -233,7 +233,7 @@
"tabId": "product3",
"blockClass": "content-render"
},
"children": ["flex-layout.row#description"]
"children": ["html#description"]
},
"tab-content.item#product4": {
@ -241,7 +241,7 @@
"tabId": "product4",
"blockClass": "content-render"
},
"children": ["flex-layout.row#description"]
"children": ["html#description"]
},
"tab-content.item#product5": {
@ -249,15 +249,15 @@
"tabId": "product5",
"blockClass": "content-render"
},
"children": ["flex-layout.row#description"]
"children": ["html#description"]
},
"flex-layout.col#imageDescriptionContainer": {
"props": {
"blockClass": "image-description"
},
"children": ["product-images#imageDescription"]
},
// "html#imageDescriptionContainer": {
// "props": {
// "blockClass": "image-description"
// },
// "children": ["product-images#imageDescription"]
// },
"product-images#imageDescription": {
"props": {
@ -267,12 +267,11 @@
}
},
"flex-layout.row#description": {
"html#description": {
"props": {
"marginBottom": 7,
"preventHorizontalStretch": true
"blockClass": "description-container"
},
"children": ["flex-layout.col#imageDescriptionContainer", "product-description"]
"children": ["product-images#imageDescription", "product-description"]
},
// "flex-layout.row#quantity-buy-button": {

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

@ -306,12 +306,18 @@
:global(.vtex-address-form__field--small) {
padding-bottom: 16px;
}
@media only screen and (max-width: 767px) {
:global(.vtex-address-form__field--small) {
flex-direction: column;
}
}
.shippingTable {
display: flex;
flex-direction: column;
border: none;
margin-top: 0;
padding: 0;
}
.shippingTable .shippingTableHead {
display: block;
@ -325,7 +331,6 @@
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
padding-right: 112px;
color: #202020;
}
@media only screen and (min-width: 1920px) {
@ -358,16 +363,19 @@
.shippingTable .shippingTableCellDeliveryName {
width: 23.9263%;
padding: 0 0 15px 0;
text-align: initial;
}
.shippingTable .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableCellDeliveryEstimate {
width: 41.7177%;
padding: 0 0 15px 0;
text-align: initial;
}
.shippingTable .shippingTableCellDeliveryPrice,
.shippingTable .shippingTableHeadDeliveryPrice {
width: 14.7239%;
padding: 0 0 15px 0;
text-align: initial;
}
.shippingTableBody .shippingtableRow {
@ -454,6 +462,15 @@
color: #fff;
}
.productDescriptionContainer {
width: 100%;
padding-left: 32px;
}
@media only screen and (max-width: 1025px) {
.productDescriptionContainer {
padding-left: 0;
}
}
.productDescriptionContainer .productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@ -494,6 +511,23 @@
}
}
:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
max-width: 632px;
width: 100%;
height: 632px;
}
@media only screen and (max-width: 1025px) {
:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
max-width: unset;
height: 944px;
}
}
@media only screen and (max-width: 767px) {
:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
height: unset;
}
}
.newsletter {
display: flex;
align-items: flex-end;

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

@ -30,6 +30,23 @@
line-height: 32px;
}
}
.container--structure :global(.vtex-store-components-3-x-productImageTag) {
width: 100% !important;
max-height: 632px !important;
max-width: 632px !important;
}
@media only screen and (max-width: 1025px) {
.container--structure :global(.vtex-store-components-3-x-productImageTag) {
max-width: unset !important;
max-height: 944px !important;
}
}
@media only screen and (max-width: 767px) {
.container--structure :global(.vtex-store-components-3-x-productImageTag) {
max-width: unset !important;
max-height: unset !important;
}
}
.contentContainer {
padding: 0 32px;

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

@ -356,6 +356,10 @@
:global(.vtex-address-form__field--small) {
padding-bottom: 16px;
@include mq(sm, max) {
flex-direction: column;
}
}
// ENTREGA
@ -365,6 +369,7 @@
flex-direction: column;
border: none;
margin-top: 0;
padding: 0;
.shippingTableHead {
display: block;
@ -379,7 +384,6 @@
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
padding-right: 112px;
color: $black-100;
@ -422,18 +426,21 @@
.shippingTableCellDeliveryName {
width: 23.9263%;
padding: 0 0 15px 0;
text-align: initial;
}
.shippingTableHeadDeliveryEstimate,
.shippingTableCellDeliveryEstimate {
width: 41.7177%;
padding: 0 0 15px 0;
text-align: initial;
}
.shippingTableCellDeliveryPrice,
.shippingTableHeadDeliveryPrice {
width: 14.7239%;
padding: 0 0 15px 0;
text-align: initial;
}
}
@ -548,6 +555,13 @@
// DESCRIÇÃO
.productDescriptionContainer {
width: 100%;
padding-left: 32px;
@include mq(md, max) {
padding-left: 0;
}
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@ -586,6 +600,27 @@
padding-bottom: 16px;
}
}
// :global(.vtex-store-components-3-x-productDescriptionContainer) {
// width: 100% !important;
// padding-left: 32px;
// }
}
:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
max-width: 632px;
width: 100%;
height: 632px;
@include mq(md, max) {
max-width: unset;
height: 944px;
}
@include mq(sm, max) {
height: unset;
}
}
// NEWSLETTER

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

@ -17,6 +17,22 @@
line-height: 32px;
}
}
:global(.vtex-store-components-3-x-productImageTag) {
width: 100% !important;
max-height: 632px !important;
max-width: 632px !important;
@include mq(md, max) {
max-width: unset !important;
max-height: 944px !important;
}
@include mq(sm, max) {
max-width: unset !important;
max-height: unset !important;
}
}
}
.contentContainer {