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

feat: cria e estiliza os blocos da descrição do produto

Browse Source
This commit is contained in:
Sabrina Miranda 2023-02-08 01:00:20 -03:00
parent 9949801df3
commit 279b673fbb
8 changed files with 402 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,8 +13,8 @@
@media screen and (min-width: 1920px) {
[class*="html--product-main"],
[class*="html--product-availability"] {
width: 71.2%;
grid-template-columns: 50.5% 49.5%;
width: 71.875%;
grid-template-columns: 50% 50%;
}
}
@media screen and (max-width: 1024px) {
@ -165,6 +165,45 @@
}
[class*="html--description"] {
position: relative;
top: 9px;
width: 100%;
margin-left: 32px;
}
[class*="html--product-description"] {
display: flex;
}
[class*="html--product-description"] .contentItem{
display: flex;
flex-direction: row;
}
[class*="html--product-description"] button {
font-weight: 400;
font-size: 18px;
line-height: 38px;
background-color: transparent;
border: transparent;
color: #BFBFBF;
height: 38px;
}
[class*="html--product-description"] button:hover {
border: transparent;
background-color: transparent;
color: #929292;
transform: translateY(1px);
}
[class*="html--description2"] h2::after {
content: " 2";
}
[class*="html--description3"] h2::after {
content: " 3";
}
[class*="html--description4"] h2::after {
content: " 4";
}
[class*="html--description5"] h2::after {
content: " 5";
}

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

@ -3,7 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"html#description",
"html#product-description",
//"html#specifications-title",
//"product-specification-group#table",
"shelf.relatedProducts",
@ -20,17 +20,25 @@
"children": ["breadcrumb"]
},
"html#specifications-title": {
"props": {
"tag": "div",
"blockClass": "specifications-title"
},
"children": ["rich-text#specifications"]
},
//"html#specifications-title": {
// "props": {
// "tag": "div",
// "blockClass": "specifications-title"
// },
// "children": ["rich-text#specifications"]
//},
"rich-text#specifications": {
//"rich-text#specifications": {
// "props": {
// "text": "##### Product Specifications"
// }
//},
"product-images#description": {
"props": {
"text": "##### Product Specifications"
"blockClass": "image-description",
"aspectRatio": "1:1",
"displayMode": "first-image"
}
},
@ -41,6 +49,34 @@
},
"children": ["product-description"]
},
"html#description2": {
"props": {
"tag": "div",
"blockClass": "description2"
},
"children": ["product-description"]
},
"html#description3": {
"props": {
"tag": "div",
"blockClass": "description3"
},
"children": ["product-description"]
},
"html#description4": {
"props": {
"tag": "div",
"blockClass": "description4"
},
"children": ["product-description"]
},
"html#description5": {
"props": {
"tag": "div",
"blockClass": "description5"
},
"children": ["product-description"]
},
"condition-layout.product#availability": {
"props": {
@ -269,5 +305,112 @@
"Pinterest": true
}
}
},
"html#product-description": {
"props": {
"blockClass": "product-description",
"tag": "section",
"testId": "product-description"
},
"children": ["tab-layout#product"]
},
"tab-layout#product": {
"props": {
"defaultActiveTabId": "product1",
"blockClass": "product"
},
"children": ["tab-list#product", "tab-content#product"]
},
"tab-list#product": {
"props": {
"blockClass": "list-product"
},
"children": [
"tab-list.item#product1",
"tab-list.item#product2",
"tab-list.item#product3",
"tab-list.item#product4",
"tab-list.item#product5"
]
},
"tab-list.item#product1": {
"props": {
"tabId": "product1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#product2": {
"props": {
"tabId": "product2",
"label": "Descrição 2"
}
},
"tab-list.item#product3": {
"props": {
"tabId": "product3",
"label": "Descrição 3"
}
},
"tab-list.item#product4": {
"props": {
"tabId": "product4",
"label": "Descrição 4"
}
},
"tab-list.item#product5": {
"props": {
"tabId": "product5",
"label": "Descrição 5"
}
},
"tab-content#product": {
"props": {
"blockClass": "content-product"
},
"children": [
"tab-content.item#product1",
"tab-content.item#product2",
"tab-content.item#product3",
"tab-content.item#product4",
"tab-content.item#product5"
]
},
"tab-content.item#product1": {
"props": {
"tabId": "product1"
},
"children": ["product-images#description", "html#description"]
},
"tab-content.item#product2": {
"props": {
"tabId": "product2"
},
"children": ["product-images#description", "html#description2"]
},
"tab-content.item#product3": {
"props": {
"tabId": "product3"
},
"children": ["product-images#description", "html#description3"]
},
"tab-content.item#product4": {
"props": {
"tabId": "product4"
},
"children": ["product-images#description", "html#description4"]
},
"tab-content.item#product5": {
"props": {
"tabId": "product5"
},
"children": ["product-images#description", "html#description5"]
}
}

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

@ -14,7 +14,7 @@
}
@media screen and (min-width: 1920px) {
.container {
width: 71.2%;
width: 71.875%;
}
}
@media screen and ((min-width: 769) and (max-width: 1024px)) {

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

@ -64,21 +64,6 @@
}
}
/*
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
*/
.skuSelectorNameContainer {
margin: 0;
}
@ -424,3 +409,30 @@
.subscriberContainer {
width: 60.07%;
}
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
height: 40px;
margin-bottom: 8px;
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.listContainer--list-product {
display: flex;
justify-content: space-between;
}
.productImageTag--image-description--main {
width: 100% !important;
margin: 0;
display: inline-block;
}

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

@ -0,0 +1,80 @@
/*
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;
}
.listContainer--list-product {
width: 94.4444%;
justify-content: space-around;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #BFBFBF;
}
@media screen and (min-width: 1920px) {
.listContainer--list-product {
width: 71.875%;
}
}
@media screen and ((min-width: 769) and (max-width: 1024px)) {
.listContainer--list-product {
width: 92.1875%;
}
}
@media screen and (max-width: 768px) {
.listContainer--list-product {
width: 79%;
}
}
.contentContainer--content-product {
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 32px;
}
@media screen and (min-width: 1920px) {
.contentContainer--content-product {
width: 69.375%;
}
}
@media screen and ((min-width: 769) and (max-width: 1024px)) {
.contentContainer--content-product {
width: 92.1875%;
}
}
@media screen and (max-width: 768px) {
.contentContainer--content-product {
width: 79%;
}
}
.listItem {
margin: 0;
padding: 0;
}
.listItemActive {
border-bottom: 2px solid #000000;
}
.listItemActive :last-child {
background-color: transparent;
color: #000000;
font-weight: 400;
font-size: 18px;
line-height: 38px;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.listItemActive :last-child:hover {
border-bottom: none;
color: #000000;
transform: none;
}

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

@ -4,7 +4,7 @@
padding: 0 0 16px 0;
@media screen and (min-width: 1920px) {
width: 71.2%;
width: 71.875%;
}
@media screen and ((min-width: 769) and (max-width: 1024px)) {
width: 92.1875%;

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

@ -52,22 +52,6 @@
}
}
/*
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
*/
.skuSelectorNameContainer {
margin: 0;
}
@ -444,3 +428,31 @@
.subscriberContainer {
width: 60.07%;
}
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
height: 40px;
margin-bottom: 8px;
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.listContainer--list-product {
display: flex;
justify-content: space-between;
}
.productImageTag--image-description--main {
width: 100% !important;
margin: 0;
display: inline-block;
}

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

@ -0,0 +1,69 @@
.contentItem {
display: flex;
}
.listContainer--list-product{
width: 94.4444%;
justify-content: space-around;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #BFBFBF;
@media screen and (min-width: 1920px) {
width: 71.875%;
}
@media screen and ((min-width: 769) and (max-width: 1024px)) {
width: 92.1875%;
}
@media screen and (max-width: 768px) {
width: 79%;
}
}
.contentContainer--content-product {
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 32px;
@media screen and (min-width: 1920px) {
width: 69.375%;
}
@media screen and ((min-width: 769) and (max-width: 1024px)) {
width: 92.1875%;
}
@media screen and (max-width: 768px) {
width: 79%;
}
}
.listItem {
margin: 0;
padding: 0;
}
.listItemActive {
border-bottom: 2px solid #000000;
:last-child {
background-color: transparent;
color: #000000;
font-weight: 400;
font-size: 18px;
line-height: 38px;
padding-top: 0 !important;
padding-bottom: 0 !important;
&:hover {
border-bottom: none;
color: #000000;
transform: none;
}
}
}