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

feat(pdp): Adiciona conteudos tablayout

Browse Source
This commit is contained in:
Cainã Milech 2023-01-27 17:24:32 -03:00
parent 5fca6c90d7
commit 53c61db3da
12 changed files with 95 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,16 @@
}
[class*="html--description-container"] {
display: grid;
grid-auto-flow: column;
margin-left: 72px;
margin-right: 72px;
display: flex;
margin-left: 32px;
margin-right: 32px;
gap: 32px;
}
[class*="html--image-container"] {
width: 50.18%;
}
[class*="html--qtd-btn"] {
display: flex;
height: 49px;

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

@ -90,7 +90,13 @@
}
},
"tab-content#details": {
"children": ["tab-content.item#details1"]
"children": [
"tab-content.item#details1",
"tab-content.item#details2",
"tab-content.item#details3",
"tab-content.item#details4",
"tab-content.item#details5"
]
},
"tab-content.item#details1": {
"children": ["html#description"],
@ -98,6 +104,30 @@
"tabId": "details1"
}
},
"tab-content.item#details2": {
"children": ["html#description"],
"props": {
"tabId": "details2"
}
},
"tab-content.item#details3": {
"children": ["html#description"],
"props": {
"tabId": "details3"
}
},
"tab-content.item#details4": {
"children": ["html#description"],
"props": {
"tabId": "details4"
}
},
"tab-content.item#details5": {
"children": ["html#description"],
"props": {
"tabId": "details5"
}
},
"html#description": {
"props": {
@ -108,6 +138,7 @@
"children": ["html#description-image", "product-description"]
},
"html#description-image": {
"props": { "blockClass": "image-container" },
"children": ["product-images#description"]
},
"product-images#description": {
@ -161,10 +192,11 @@
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
"rowGap": 7,
/*"rowGap": 7,
"marginTop": 5,
"marginBottom": 7,
"paddingBottom": 7
"paddingBottom": 7*/
"blockClass": "containerteste"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
@ -192,7 +224,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "46%",
"width": "51%",
"rowGap": 0
}
},
@ -228,8 +260,8 @@
/*"product-separator",*/
"sku-selector",
/*"product-quantity",*/
"product-assembly-options",
"product-gifts",
/*"product-assembly-options",*/
/*"product-gifts",*/
/*"flex-layout.row#buy-button",*/
"html#qtd-btn",
"availability-subscriber",
@ -296,9 +328,11 @@
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
/*"rowGap": 7,
"marginTop": 5,
"marginBottom": 7,
"paddingTop": 7
"paddingBottom": 7*/
"blockClass": "containerteste"
},
"children": [
"flex-layout.col#stack",

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

@ -29,10 +29,10 @@
font-size: 14px;
line-height: 19px;
}
.container--testebread .arrow--testebread--1 {
.container--testebread .link--testebread--1 {
font-size: 0;
}
.container--testebread .arrow--testebread--1::after {
.container--testebread .link--testebread--1::after {
content: "Sapatos";
font-weight: 400;
font-size: 14px;

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

@ -20,3 +20,8 @@
color: #000000;
margin: 0;
}
.flexRow--containerteste {
padding-left: 40px;
padding-right: 40px;
}

1
styles/css/vtex.product-summary.css
View File

@ -11,6 +11,7 @@
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
min-height: 66px;
}
.nameContainer .productBrand {
font-weight: 400;

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

@ -9,8 +9,7 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
margin-left: 40px;
margin-right: 40px;
margin: 0;
padding: 0;
}
@ -48,6 +47,10 @@
margin-right: 16px;
}
.productImagesGallerySlide {
width: 100%;
}
/*:global(.vtex-store-components-3-x-productImageTag) {
width: 664px;
height: 664px;
@ -302,6 +305,7 @@
display: flex;
justify-content: left;
flex-direction: column;
width: 49.82%;
}
.container--descricao {
@ -323,10 +327,6 @@
color: #929292;
}
.content--description-imagem {
border: 1px solid red;
}
.subscriberContainer {
position: relative;
}

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

@ -7,15 +7,16 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.container--details {
padding-left: 40px;
padding-right: 40px;
}
.listContainer {
border-bottom: 1px solid #bfbfbf;
margin-bottom: 32px;
padding-left: 64px;
padding-right: 64px;
margin-left: 40px;
margin-right: 40px;
display: flex;
justify-content: space-between;
justify-content: space-around;
align-items: end;
}
@ -31,6 +32,7 @@
}
.listItem :global(.vtex-button) {
background-color: transparent;
border: none;
}
.listItem :global(.vtex-button__label) {
font-weight: 400;
@ -46,6 +48,9 @@
border-bottom: 2px solid #000000;
}
.listItemActive--descricao {
border-bottom: 2px solid #000000;
}
.listItemActive--descricao :global(.vtex-button) {
border: none;
border-radius: 0%;

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

@ -22,7 +22,7 @@
}
}
.arrow--testebread--1 {
.link--testebread--1 {
font-size: 0;
&::after {

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

@ -11,3 +11,8 @@
color: #000000;
margin: 0;
}
.flexRow--containerteste {
padding-left: 40px;
padding-right: 40px;
}

1
styles/sass/pages/product/vtex.product-summary.scss
View File

@ -2,6 +2,7 @@
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
min-height: 66px;
.productBrand {
font-weight: 400;

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

@ -1,6 +1,5 @@
.container {
margin-left: 40px;
margin-right: 40px;
margin: 0;
padding: 0;
}
@ -39,6 +38,10 @@
margin-right: 16px;
}
.productImagesGallerySlide {
width: 100%;
}
/*:global(.vtex-store-components-3-x-productImageTag) {
width: 664px;
height: 664px;
@ -349,6 +352,7 @@
display: flex;
justify-content: left;
flex-direction: column;
width: 49.82%;
}
.container--descricao {
@ -368,10 +372,6 @@
color: $color-gray6;
}
.content--description-imagem {
border: 1px solid red;
}
//PRODUTO INDISPONIVEL
.subscriberContainer {
position: relative;

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

@ -1,12 +1,14 @@
.container--details {
padding-left: 40px;
padding-right: 40px;
}
.listContainer {
border-bottom: 1px solid $color-gray9;
margin-bottom: 32px;
padding-left: 64px;
padding-right: 64px;
margin-left: 40px;
margin-right: 40px;
display: flex;
justify-content: space-between;
justify-content: space-around;
align-items: end;
}
@ -23,6 +25,7 @@
:global(.vtex-button) {
background-color: transparent;
border: none;
}
:global(.vtex-button__label) {
@ -41,6 +44,7 @@
}
.listItemActive--descricao {
border-bottom: 2px solid $color-black-100;
:global(.vtex-button) {
border: none;
border-radius: 0%;