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]{
} */
.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{
display: flex;
flex-direction: column;

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

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

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

@ -12,21 +12,13 @@
padding: 0 0.5rem;
}
.flexRowContent {
padding: 0;
margin: 0;
}
.flexRowContent--buy-button {
gap: 10px;
}
.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: 1920px) {
.flexRowContent--product-image {
justify-content: flex-end;
}
.flexRowContent--product-image .stretchChildrenWidth {
max-width: max-content;
}
}
@media screen and (min-width: 1024px) {

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

@ -10,7 +10,7 @@
.quantitySelectorStepper {
border: 1px solid #CCCCCC;
width: max-content;
min-width: 83.86%;
min-width: 100%;
padding: 3.5px 0;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
@ -34,4 +34,6 @@
.quantitySelectorContainer {
justify-content: 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 */
/* Grid breakpoints */
@media screen and (min-width: 1920px) {
.productImagesContainer--carousel .carouselGaleryCursor {
max-height: 906px;
}
}
.productNameContainer--quickview {
padding-right: 40px !important;
}
@ -85,14 +91,13 @@
}
.carouselContainer {
padding: 0 40px 0;
max-width: 906px;
}
.carouselContainer .productImage {
max-width: 85.238%;
}
@media screen and (min-width: 1920px) {
.carouselContainer .productImage {
min-width: 904px;
max-width: 100%;
}
}

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

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

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

@ -1,7 +1,7 @@
.quantitySelectorStepper{
border: 1px solid #CCCCCC;
width: max-content;
min-width: 83.86%;
min-width: 100%;
padding: 3.5px 0;
:global(.vtex-numeric-stepper-wrapper){
:global(.vtex-numeric-stepper-container){
@ -28,4 +28,6 @@
.quantitySelectorContainer{
justify-content: 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{
padding-right: 40px !important;
}
@ -87,11 +94,10 @@
color: #575757;
}
.carouselContainer{
padding: 0 40px 0;
max-width: 906px;
.productImage{
max-width:85.238%;
@media screen and (min-width: 1920px){
min-width: 904px;
max-width:100%;
}
@media screen and (max-width: 1024px){