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

refactor:corrigindo o tablayout

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2023-01-31 17:29:57 -03:00
parent 42778c432e
commit c516f3abf7
10 changed files with 182 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,9 +3,8 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#primeira-coluna",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"tab-layout#home",
"product-specification-group#table",
"shelf.relatedProducts",
"newsletter",
"product-questions-and-answers"
@ -79,8 +78,9 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"rowGap": 0
"width": "50%",
"rowGap": 0,
"blockClass":"stack"
}
},
"flex-layout.row#product-image": {
@ -103,7 +103,8 @@
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0
"rowGap": 0,
"blockClass":"right-col"
},
"children": [
"flex-layout.row#product-name",
@ -188,37 +189,7 @@
}
}
},
// teste do meu bloco
// "teste#content-main" :{
// "children": [ "flex-layout.row#content"]
// },
"flex-layout.row#primeira-coluna":{
"props": {
"blockClass": "flexCol",
"preventHorizontalStretch": true
},
"children":["image#image-1", "flex-layout.col#segunda-coluna"]
},
"flex-layout.col#segunda-coluna":{
"props": {
"paddingLeft": 7,
"width": "60%"
},
"children":["rich-text#texto-meio"]
},
"rich-text#texto-meio":{
"props": {
"text": "Descrição do produto\nSandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.",
"textAlignment": "START",
"textPosition": "DIREITA",
"textColor": "black",
"font": "Open Sans",
"blockClass": "help-message"
}
},
"image#image-1": {
"props":{
"src":"assets/sandalia-image.png",
@ -226,5 +197,110 @@
"maxWidth": 872,
"blockClass":"imageElement"
}
},
"tab-layout#home": {
"children": [
"tab-list#home",
"tab-content#home"
]
},
"tab-list#home": {
"children": [
"tab-list.item#home1",
"tab-list.item#home2",
"tab-list.item#home3",
"tab-list.item#home4",
"tab-list.item#home5"
]
},
"tab-list.item#home1": {
"props": {
"tabId": "description1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#home2": {
"props": {
"tabId": "description2",
"label": "Descrição"
}
},
"tab-list.item#home3": {
"props": {
"tabId": "description3",
"label": "Descrição"
}
},
"tab-list.item#home4": {
"props": {
"tabId": "description4",
"label": "Descrição"
}
},
"tab-list.item#home5": {
"props": {
"tabId": "description5",
"label": "Descrição"
}
},
"tab-content#home": {
"props" : {
"defaultActiveTab": true
},
"children": [
"tab-content.item#home1"
]
},
"tab-content.item#home1": {
"children": [
"image#image-1",
"product-description"
],
"props": {
"tabId":"description1"
}
}
}
// teste do meu bloco
// "teste#content-main" :{
// "children": [ "flex-layout.row#content"]
// },
// "flex-layout.row#primeira-coluna":{
// "props": {
// "blockClass": "flexCol",
// "preventHorizontalStretch": true
// },
// "children":["image#image-1", "flex-layout.col#segunda-coluna"]
// },
// "flex-layout.col#segunda-coluna":{
// "props": {
// "paddingLeft": 7,
// "width": "60%"
// },
// "children":["rich-text#texto-meio"]
// },
// "rich-text#texto-meio":{
// "props": {
// "text": "Descrição do produto\nSandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.",
// "textAlignment": "START",
// "textPosition": "DIREITA",
// "textColor": "black",
// "font": "Open Sans",
// "blockClass": "help-message"
// }
// },

1
store/blocks/product-summary/quickview.json
View File

@ -139,6 +139,7 @@
"blockClass": "quickview",
"showNavigationArrows": true,
"maxHeight": 90
}
}
}

2
styles/css/vtex.breadcrumb.css
View File

@ -11,7 +11,7 @@
display: flex;
align-items: center;
background-color: white;
padding: 32px 0 16px 240px;
padding: 32px 0 16px 40px;
}
.container .homeLink .homeIcon {
display: none;

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

@ -18,4 +18,12 @@
.content-main {
background-color: red;
}
.flexCol--stack {
padding-left: 40px;
}
.flexCol--right-col {
padding-right: 40px;
}

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

@ -18,7 +18,9 @@
}
.container {
padding: 32px 0 23px 0;
max-width: 100%;
padding: 0;
margin: 0;
}
.label {
@ -47,21 +49,16 @@
margin-top: 16px;
}
.productBrand--quickview {
display: flex;
justify-content: end;
.productDescriptionTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
margin-bottom: 8px;
}
.productImagesThumb {
height: 90px !important;
width: 90px !important;
}
.imageElement {
padding-left: 32px;
}
.help-message {
padding: 0 0 60px 0;
background-color: red;
.productDescriptionText {
text-align: left;
}

15
styles/css/vtex.tab-layout.css Normal file
View File

@ -0,0 +1,15 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.contentItem {
display: flex;
flex-direction: row;
gap: 32px;
padding: 32px 72px 16px 72px;
}

4
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -1,9 +1,9 @@
.container {
.container {
display: flex;
align-items: center;
background-color: white;
padding: 32px 0 16px 240px;
padding: 32px 0 16px 40px;
.homeLink {
.homeIcon {

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

@ -10,3 +10,11 @@
.content-main {
background-color: red;
}
.flexCol--stack {
padding-left: 40px;
}
.flexCol--right-col {
padding-right: 40px;
}

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

@ -9,10 +9,13 @@
}
.container {
padding: 32px 0 23px 0;
// margin:0;
max-width: 100%;
padding: 0;
margin:0;
}
.label {
font-family: 'Open Sans';
font-style: normal;
@ -38,22 +41,16 @@
margin-top: 16px;
}
.productBrand--quickview {
display: flex;
justify-content: end;
.productDescriptionTitle {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
margin-bottom: 8px;
}
.productImagesThumb {
height: 90px !important;
width: 90px !important;
}
.imageElement{
padding-left: 32px;
}
.help-message {
padding: 0 0 60px 0;
background-color: red;
.productDescriptionText {
text-align: left;
}

7
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

@ -0,0 +1,7 @@
.contentItem {
display: flex;
flex-direction: row;
gap:32px;
padding: 32px 72px 16px 72px;
}