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

feat(tabLayout): created tab layout

Browse Source
This commit is contained in:
Marcello Rodrigues Martins 2023-02-10 19:33:02 -03:00
parent 9f01aa6aad
commit 64fc2a938b
7 changed files with 222 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,13 +3,112 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
// "flex-layout.row#description",
"tab-layout#description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
]
},
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"]
},
"tab-list#description": {
"children": [
"tab-list.item#description1",
"tab-list.item#description2",
"tab-list.item#description3",
"tab-list.item#description4",
"tab-list.item#description5"
]
},
"tab-list.item#description1": {
"props": {
"tabId": "description1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#description2": {
"props": {
"tabId": "description2",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-list.item#description3": {
"props": {
"tabId": "description3",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-list.item#description4": {
"props": {
"tabId": "description4",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-list.item#description5": {
"props": {
"tabId": "description5",
"label": "Descrição",
"defaultActiveTab": false
}
},
"tab-content#description": {
"children": [
"tab-content.item#description1",
"tab-content.item#description2",
"tab-content.item#description3",
"tab-content.item#description4",
"tab-content.item#description5"
]
},
"tab-content.item#description1": {
"children": ["flex-layout.row#description"],
"props": {
"tabId": "description1"
}
},
"tab-content.item#description2": {
"children": [],
"props": {
"tabId": "description2"
}
},
"tab-content.item#description3": {
"children": [],
"props": {
"tabId": "description3"
}
},
"tab-content.item#description4": {
"children": [],
"props": {
"tabId": "description4"
}
},
"tab-content.item#description5": {
"children": [],
"props": {
"tabId": "description5"
}
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -30,7 +129,20 @@
"props": {
"marginBottom": 7
},
"children": ["product-description"]
"children": ["product-images#description", "flex-layout.col#description"]
},
"product-description#notitle": {
"props": { "showTitle": false }
},
"flex-layout.col#description": {
"props": {
"preventVerticalStretch": true,
"rowGap": 5
},
"children": ["product-description", "product-description#notitle"]
},
"product-images#description": {
"props": { "displayMode": "first-image" }
},
"condition-layout.product#availability": {
"props": {

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

@ -1,98 +1,12 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
display: flex;
max-height: 100%;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
/*
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 */
.flexRow {
margin: 32px 72px 16px;
}

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

@ -55,3 +55,17 @@
height: 90px;
border-radius: 8px !important;
}
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}

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

@ -0,0 +1,36 @@
/*
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 */
.listContainer {
width: 94.44%;
margin: 0 40px;
padding: 0 80px;
border-bottom: 1px solid #bfbfbf;
justify-content: space-between;
}
.listContainer :global(.vtex-button) {
background: white;
border: 0;
color: #bfbfbf;
font-weight: 400;
font-size: 18px;
line-height: 38px;
padding-bottom: 0;
}
.listItemActive :global(.vtex-button) {
color: black;
padding-bottom: 0;
}
.listItemActive {
border-bottom: 2px solid black;
margin-bottom: unset;
}

3
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

@ -0,0 +1,3 @@
.flexRow {
margin: 32px 72px 16px;
}

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

@ -48,3 +48,17 @@
height: 90px;
border-radius: 8px !important;
}
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}

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

@ -0,0 +1,27 @@
.listContainer {
width: 94.44%;
margin: 0 40px;
padding: 0 80px;
border-bottom: 1px solid #bfbfbf;
justify-content: space-between;
}
.listContainer :global(.vtex-button) {
background: white;
border: 0;
color: #bfbfbf;
font-weight: 400;
font-size: 18px;
line-height: 38px;
padding-bottom: 0;
}
.listItemActive :global(.vtex-button) {
color: black;
padding-bottom: 0;
}
.listItemActive {
border-bottom: 2px solid black;
margin-bottom: unset;
}