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

feat(description): adiciona alterações e css da descrição do produto

Browse Source
This commit is contained in:
amanda almeida 2023-01-28 23:37:04 -03:00
parent f56b97418e
commit dae5d86043
8 changed files with 350 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
store/blocks/pdp/product-tab-layout.jsonc Normal file
View File

@ -0,0 +1,103 @@
{
"image#image1": {
"props": {
"src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-1200-auto?v=637781133812700000&width=1200&height=auto&aspect=true"
}
},
"product-description": {
"props": {
"collapseContent": false
}
},
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
"blockClass": "description",
"defaultActiveTabId": "description1"
}
},
"tab-list#description": {
"props": {
"blockClass": "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"
}
},
"tab-list.item#description3": {
"props": {
"tabId": "description3",
"label": "Descrição"
}
},
"tab-list.item#description4": {
"props": {
"tabId": "description4",
"label": "Descrição"
}
},
"tab-list.item#description5": {
"props": {
"tabId": "description5",
"label": "Descrição"
}
},
"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": ["image#image1", "product-description"],
"props": {
"tabId": "description1"
}
},
"tab-content.item#description2": {
"children": ["image#image1", "product-description"],
"props": {
"tabId": "description2"
}
},
"tab-content.item#description3": {
"children": ["image#image1", "product-description"],
"props": {
"tabId": "description3"
}
},
"tab-content.item#description4": {
"children": ["image#image1", "product-description"],
"props": {
"tabId": "description4"
}
},
"tab-content.item#description5": {
"children": ["image#image1", "product-description"],
"props": {
"tabId": "description5"
}
}
}

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

@ -3,7 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"tab-layout#description",
"shelf.relatedProducts",
"product-questions-and-answers"
]
@ -16,25 +16,6 @@
},
"children": ["breadcrumb"]
},
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["html#product-image", "product-description"]
},
"html#product-image": {
"children": ["product-images#description"]
},
"product-images#description": {
"props": {
"blockClass": "product-images-description",
"thumbnailVisibility": "hidden",
"showNavigationArrows": false,
"showPaginationDots": false
}
},
"condition-layout.product#availability": {
"props": {

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

@ -16,6 +16,7 @@
.homeLink::after {
content: "Home";
font-size: 14px;
padding-right: 0.25rem;
}
.homeIcon,
@ -32,7 +33,6 @@
.link--1::after {
content: "Sapatos";
font-size: 14px;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
@ -40,4 +40,8 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.arrow {
padding: 0;
}

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

@ -29,7 +29,6 @@
.carouselGaleryCursor {
margin: 0;
margin-bottom: 16px;
padding: 0;
}
@ -293,6 +292,28 @@
display: none;
}
.imageElement {
width: 50%;
max-height: 632px;
}
.productDescriptionContainer {
width: 50%;
}
.productDescriptionTitle {
font-size: 24px;
line-height: 32px;
color: #575757;
margin-bottom: 8px;
}
.productDescriptionText {
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media screen and (max-width: 1024px) {
.productImageTag--main {
max-height: 994px !important;
@ -300,6 +321,17 @@
.productNameContainer {
text-align: start;
}
.imageElement {
width: 100%;
max-height: 944px;
}
.productDescriptionContainer {
width: 100%;
}
.productDescriptionText {
padding-bottom: 16px;
border-bottom: 1px solid #B9B9B9;
}
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {

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

@ -0,0 +1,73 @@
/*
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 */
.container--description {
padding: 0 40px;
}
.container--description .listContainer--description {
display: flex;
justify-content: space-between;
padding: 0 80px;
border-bottom: 1px solid #B9B9B9;
}
.container--description .listContainer--description .listItem {
margin: 0;
padding: 0;
}
.container--description .listContainer--description .listItem :global(.vtex-button) {
border: 0;
padding-top: 16px;
}
.container--description .listContainer--description .listItem :global(.vtex-button__label) {
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
display: flex;
align-items: center;
text-align: center;
padding: 0 !important;
color: #BFBFBF;
}
.container--description .listContainer--description .listItemActive :global(.vtex-button) {
border: 0;
border-bottom: 2px solid #000000;
background-color: transparent;
font-weight: 400;
}
.container--description .listContainer--description .listItemActive :global(.vtex-button__label) {
color: #000000;
}
.contentItem {
display: flex;
gap: 32px;
padding: 32px 32px 0;
}
@media screen and (max-width: 1024px) {
.container--description {
margin-top: 16px;
}
.container--description .listContainer--description {
flex-direction: column;
border: 1px solid #B9B9B9;
border-width: 1px 0;
padding: 0 0 16px;
}
.container--description .listContainer--description .listItemActive :global(.vtex-button) {
border-bottom: 0;
}
.contentItem {
flex-direction: column;
padding: 0;
margin-top: 16px;
gap: 16px;
}
}

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

@ -4,9 +4,12 @@
padding: 0 40px;
}
.homeLink::after {
content: "Home";
font-size: 14px;
.homeLink {
&::after {
content: "Home";
font-size: 14px;
padding-right: 0.25rem;
}
}
.homeIcon,
@ -20,11 +23,12 @@
height: 23px;
}
.link--1::after {
content: "Sapatos";
font-size: 14px;
padding-left: 0.25rem;
padding-right: 0.25rem;
.link--1 {
&::after {
content: "Sapatos";
font-size: 14px;
padding-right: 0.25rem;
}
}
:global(.vtex-breadcrumb-1-x-container) {
@ -32,3 +36,7 @@
font-size: 14px;
line-height: 19px;
}
.arrow {
padding: 0;
}

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

@ -20,7 +20,6 @@
.carouselGaleryCursor {
margin: 0;
margin-bottom: 16px;
padding: 0;
}
@ -331,6 +330,29 @@
}
}
.imageElement {
width: 50%;
max-height: 632px;
}
.productDescriptionContainer {
width: 50%;
}
.productDescriptionTitle {
font-size: 24px;
line-height: 32px;
color: #575757;
margin-bottom: 8px;
}
.productDescriptionText {
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media screen and (min-width: 1920px) {}
@ -343,6 +365,20 @@
.productNameContainer {
text-align: start;
}
.imageElement {
width: 100%;
max-height: 944px;
}
.productDescriptionContainer {
width: 100%;
}
.productDescriptionText {
padding-bottom: 16px;
border-bottom: 1px solid #B9B9B9;
}
}
@media screen and (max-width: 768px) {

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

@ -0,0 +1,82 @@
.container--description {
padding: 0 40px;
.listContainer--description {
display: flex;
justify-content: space-between;
padding: 0 80px;
border-bottom: 1px solid #B9B9B9;
.listItem {
margin: 0;
padding: 0;
:global(.vtex-button) {
border: 0;
padding-top: 16px;
}
:global(.vtex-button__label) {
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
display: flex;
align-items: center;
text-align: center;
padding: 0 !important;
color: #BFBFBF;
}
}
.listItemActive {
:global(.vtex-button) {
border: 0;
border-bottom: 2px solid #000000;
background-color: transparent;
font-weight: 400;
}
:global(.vtex-button__label) {
color: #000000;
}
}
}
}
.contentItem {
display: flex;
gap: 32px;
padding: 32px 32px 0;
}
@media screen and (max-width: 1024px) {
.container--description {
margin-top: 16px;
.listContainer--description {
flex-direction: column;
border: 1px solid #B9B9B9;
border-width: 1px 0;
padding: 0 0 16px;
.listItemActive {
:global(.vtex-button) {
border-bottom: 0;
}
}
}
}
.contentItem {
flex-direction: column;
padding: 0;
margin-top: 16px;
gap: 16px;
}
}