Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(product-image):centralizando product-image

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-07 22:06:13 -03:00
parent f7f1ed1acc
commit 931054139d
8 changed files with 107 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,35 @@
/* [class*=html--pdp-breadcrumb]{ /* [class*=html--pdp-breadcrumb]{
} */ } */
.html--pdp-productMain{
display: flex;
}
.html--StackLayout,.html--pdp-InfoBuy{
width: 50%;
}
.html--buy-button{
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 16px;
}
.html--buy-button :global(.vtex-button){
background: black;
height: 49px;
max-width: 526px;
}
@media screen and (min-width: 1920px){
.html--buy-button :global(.vtex-button){
max-width: 766px;
width: 80.126%;
}
.html--pdp-productMain{
padding-right: 12.5393%;
padding-left: 12.5393%;
margin: 0;
gap: 32px;
}
}
.html--pdp-section_descriptions{ .html--pdp-section_descriptions{
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -9,7 +9,7 @@
] ]
}, },
"tab-layout#pdp": { "tab-layout#pdp": {
"children":[ "children": [
"tab-list#pdp", "tab-list#pdp",
"tab-content#pdp", "tab-content#pdp",
"tab-content#pdp2", "tab-content#pdp2",
@ -22,7 +22,7 @@
"defaultActiveTabId": "descrição1" "defaultActiveTabId": "descrição1"
} }
}, },
"tab-list#pdp":{ "tab-list#pdp": {
"children": [ "children": [
"tab-list.item#pdpsection1", "tab-list.item#pdpsection1",
"tab-list.item#pdpsection2", "tab-list.item#pdpsection2",
@ -65,70 +65,50 @@
"label": "Descrição" "label": "Descrição"
} }
}, },
"tab-content.item#descriptionpdp":{ "tab-content.item#descriptionpdp": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição1" "tabId": "descrição1"
} }
}, },
"tab-content#pdp":{ "tab-content#pdp": {
"children":[ "children": ["tab-content.item#descriptionpdp"]
"tab-content.item#descriptionpdp"
]
}, },
"tab-content.item#descriptionpdp2":{ "tab-content.item#descriptionpdp2": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição2" "tabId": "descrição2"
} }
}, },
"tab-content#pdp2":{ "tab-content#pdp2": {
"children":[ "children": ["tab-content.item#descriptionpdp2"]
"tab-content.item#descriptionpdp2"
]
}, },
"tab-content.item#descriptionpdp3":{ "tab-content.item#descriptionpdp3": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição3" "tabId": "descrição3"
} }
}, },
"tab-content#pdp3":{ "tab-content#pdp3": {
"children":[ "children": ["tab-content.item#descriptionpdp3"]
"tab-content.item#descriptionpdp3"
]
}, },
"tab-content.item#descriptionpdp4":{ "tab-content.item#descriptionpdp4": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição4" "tabId": "descrição4"
} }
}, },
"tab-content#pdp4":{ "tab-content#pdp4": {
"children":[ "children": ["tab-content.item#descriptionpdp4"]
"tab-content.item#descriptionpdp4"
]
}, },
"tab-content.item#descriptionpdp5":{ "tab-content.item#descriptionpdp5": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição5" "tabId": "descrição5"
} }
}, },
"tab-content#pdp5":{ "tab-content#pdp5": {
"children":[ "children": ["tab-content.item#descriptionpdp5"]
"tab-content.item#descriptionpdp5"
]
}, },
"html#prateleira": { "html#prateleira": {
"props": { "props": {
@ -270,18 +250,20 @@
"testId": "Product-Images", "testId": "Product-Images",
"blockClass": "pdp-productMain" "blockClass": "pdp-productMain"
}, },
"children": ["flex-layout.row#product-main"] "children": ["html#stack", "html#right-col"]
}, },
"flex-layout.row#product-main": { "flex-layout.row#product-main": {
"props": { "props": {
"blockClass": "pdp-flexProduct",
"colGap": 7, "colGap": 7,
"rowGap": 7, "rowGap": 7,
"marginTop": 4, "marginTop": 0,
"marginBottom": 7, "marginBottom": 0,
"paddingTop": 7, "paddingTop": 0,
"paddingBottom": 7 "paddingBottom": 0,
}, "paddingright":0,
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"] "paddingleft":0
}
}, },
"stack-layout": { "stack-layout": {
@ -322,17 +304,18 @@
"children": ["flex-layout.row#description"] "children": ["flex-layout.row#description"]
}, },
"flex-layout.col#stack": { "html#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"rowGap": 10,
"width": "50%", "width": "50%",
"blockClass": "StackLayout", "blockClass": "StackLayout"
"htmlId": "teste"
} }
}, },
"flex-layout.row#product-image": { "flex-layout.row#product-image": {
"props":{
"blockClass": "product-image"
},
"children": ["product-images"] "children": ["product-images"]
}, },
"product-images": { "product-images": {
@ -363,10 +346,9 @@
"zoomMode": "disabled" "zoomMode": "disabled"
} }
}, },
"flex-layout.col#right-col": { "html#right-col": {
"props": { "props": {
"preventVerticalStretch": true, "blockClass": "pdp-InfoBuy"
"rowGap": 0
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
@ -377,7 +359,7 @@
"sku-selector", "sku-selector",
"product-assembly-options", "product-assembly-options",
"product-gifts", "product-gifts",
"flex-layout.row#buy-button", "html#buy-button",
"availability-subscriber", "availability-subscriber",
"shipping-simulator", "shipping-simulator",
"share#default" "share#default"
@ -422,6 +404,9 @@
}, },
"flex-layout.row#buy-button": { "flex-layout.row#buy-button": {
"children": ["product-quantity", "add-to-cart-button"]
},
"html#buy-button": {
"props": { "props": {
"marginTop": 4, "marginTop": 4,
"marginBottom": 7, "marginBottom": 7,
@ -450,7 +435,7 @@
"paddingTop": 7 "paddingTop": 7
}, },
"children": [ "children": [
"flex-layout.col#stack", "html#stack",
"flex-layout.col#right-col-availability" "flex-layout.col#right-col-availability"
] ]
}, },

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

@ -12,21 +12,13 @@
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.flexRowContent { @media screen and (min-width: 1920px) {
padding: 0; .flexRowContent--product-image {
margin: 0; justify-content: flex-end;
} }
.flexRowContent--buy-button { .flexRowContent--product-image .stretchChildrenWidth {
gap: 10px; max-width: max-content;
} }
.flexRowContent--buy-button .stretchChildrenWidth {
padding: 0;
justify-content: flex-start;
}
.flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
background: black;
height: 49px;
max-width: 526px;
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {

4
styles/css/vtex.product-quantity.css
View File

@ -10,7 +10,7 @@
.quantitySelectorStepper { .quantitySelectorStepper {
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
width: max-content; width: max-content;
min-width: 83.86%; min-width: 100%;
padding: 3.5px 0; padding: 3.5px 0;
} }
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
@ -34,4 +34,6 @@
.quantitySelectorContainer { .quantitySelectorContainer {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 128px;
margin-bottom: 0;
} }

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

@ -7,6 +7,12 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
@media screen and (min-width: 1920px) {
.productImagesContainer--carousel .carouselGaleryCursor {
max-height: 906px;
}
}
.productNameContainer--quickview { .productNameContainer--quickview {
padding-right: 40px !important; padding-right: 40px !important;
} }
@ -85,14 +91,13 @@
} }
.carouselContainer { .carouselContainer {
padding: 0 40px 0; max-width: 906px;
} }
.carouselContainer .productImage { .carouselContainer .productImage {
max-width: 85.238%; max-width: 85.238%;
} }
@media screen and (min-width: 1920px) { @media screen and (min-width: 1920px) {
.carouselContainer .productImage { .carouselContainer .productImage {
min-width: 904px;
max-width: 100%; max-width: 100%;
} }
} }

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

@ -2,22 +2,15 @@
.flexRowContent--main-header { .flexRowContent--main-header {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.flexRowContent{ .flexRowContent--product-image{
padding: 0; @media screen and (min-width: 1920px){
margin: 0; justify-content: flex-end;
&--buy-button{
gap: 10px;
.stretchChildrenWidth{ .stretchChildrenWidth{
padding: 0; max-width: max-content;
justify-content: flex-start;
:global(.vtex-button){
background: black;
height: 49px;
max-width: 526px;
}
} }
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.flexRowContent--menu-link, .flexRowContent--menu-link,
.flexRowContent--main-header { .flexRowContent--main-header {

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

@ -1,7 +1,7 @@
.quantitySelectorStepper{ .quantitySelectorStepper{
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
width: max-content; width: max-content;
min-width: 83.86%; min-width: 100%;
padding: 3.5px 0; padding: 3.5px 0;
:global(.vtex-numeric-stepper-wrapper){ :global(.vtex-numeric-stepper-wrapper){
:global(.vtex-numeric-stepper-container){ :global(.vtex-numeric-stepper-container){
@ -28,4 +28,6 @@
.quantitySelectorContainer{ .quantitySelectorContainer{
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 128px;
margin-bottom: 0;
} }

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

@ -1,3 +1,10 @@
.productImagesContainer--carousel{
.carouselGaleryCursor{
@media screen and (min-width: 1920px){
max-height: 906px;
}
}
}
.productNameContainer--quickview{ .productNameContainer--quickview{
padding-right: 40px !important; padding-right: 40px !important;
} }
@ -87,11 +94,10 @@
color: #575757; color: #575757;
} }
.carouselContainer{ .carouselContainer{
padding: 0 40px 0; max-width: 906px;
.productImage{ .productImage{
max-width:85.238%; max-width:85.238%;
@media screen and (min-width: 1920px){ @media screen and (min-width: 1920px){
min-width: 904px;
max-width:100%; max-width:100%;
} }
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){