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

refactor: aplica mudanças no código

Browse Source
This commit is contained in:
Sabrina Miranda 2023-02-02 20:03:37 -03:00
parent 7334a77bf7
commit 85e35e7df5
11 changed files with 104 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,24 +2,48 @@
background-color: #FFFFFF;
}
[class*="html--product-main"] {
width: 94.4444%;
margin: 0 auto;
display: grid;
grid-template-columns: 48.8% 51.2%;
}
[class*="html--stack"] {
grid-area: 1/1;
}
[class*="html--right-col"] {
grid-area: 1/2;
margin-left: 32px;
}
[class*="html--buy-button"] {
width: 100%;
}
[class*="html--add-to-cart-button"] button {
background-color: #000000 !important;
border: none;
width: 526px;
width: 100%;
height: 49px;
padding: 12px 64px;
padding-top: 12px;
padding-bottom: 12px;
}
[class*="html--product-quantity-cart-button"] {
display: flex;
flex-direction: row;
gap: 10px;
margin-bottom: 16px;
gap: 10px;
width: 100%;
height: 49px;
}
[class*="html--product-quantity-cart-button"] input{
height: 49px;
width: 32px;
font-weight: 400;
font-size: 16px;

2
store/blocks/pdp/product-assembly.jsonc
View File

@ -3,7 +3,7 @@
"props": {
"position": "bottom"
},
"children": ["flex-layout.row#buy-button"]
"children": ["html#buy-button"]
},
"product-assembly-options": {
"children": [

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

@ -3,8 +3,8 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"html#description",
"html#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
@ -20,7 +20,11 @@
"children": ["breadcrumb"]
},
"flex-layout.row#specifications-title": {
"html#specifications-title": {
"props": {
"tag": "div",
"blockClass": "specifications-title"
},
"children": ["rich-text#specifications"]
},
@ -30,9 +34,10 @@
}
},
"flex-layout.row#description": {
"html#description": {
"props": {
"marginBottom": 7
"tag": "div",
"blockClass": "description"
},
"children": ["product-description"]
},
@ -44,21 +49,17 @@
"subject": "isProductAvailable"
}
],
"Then": "flex-layout.row#product-main",
"Else": "flex-layout.row#product-availability"
"Then": "html#product-main",
"Else": "html#product-availability"
}
},
"flex-layout.row#product-main": {
"html#product-main": {
"props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
"tag": "section",
"blockClass": "product-main"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
"children": ["html#stack", "html#right-col"]
},
"stack-layout": {
@ -81,11 +82,12 @@
}
},
"flex-layout.col#stack": {
"children": ["stack-layout"],
"html#stack": {
"props": {
"rowGap": 0
}
"tag": "section",
"blockClass": "stack"
},
"children": ["stack-layout"]
},
"html#product-image": {
@ -124,28 +126,25 @@
},
"children": [
"html#product-quantity",
"flex-layout.row#buy-button"
"html#buy-button"
]
},
"flex-layout.col#right-col": {
"html#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0,
"tag": "section",
"blockClass": "right-col"
},
"children": [
"flex-layout.row#product-name",
"html#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#selling-price",
"product-installments#m3",
"html#sku-selector-m3",
"html#product-quantity-cart-button",
/*"html#product-quantity",*/
"product-assembly-options",
"product-gifts",
/*"flex-layout.row#buy-button",*/
"availability-subscriber",
"shipping-simulator",
"share#default"
@ -161,9 +160,10 @@
}
},
"flex-layout.row#product-name": {
"html#product-name": {
"props": {
"marginBottom": 3
"tag": "div",
"blockClass": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
@ -186,44 +186,42 @@
"children": ["sku-selector"]
},
"flex-layout.row#buy-button": {
"html#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
"tag": "div",
"blockClass": "buy-button"
},
"children": ["html#add-to-cart-button"]
},
"flex-layout.row#product-availability": {
"html#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7
"tag": "div",
"blockClass": "product-availability"
},
"children": [
"flex-layout.col#stack",
"flex-layout.col#right-col-availability"
"html#stack",
"html#right-col-availability"
]
},
"flex-layout.col#right-col-availability": {
"html#right-col-availability": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0,
"blockClass": "info-availability"
"blockClass": "info-availability",
"tag": "div"
},
"children": [
"flex-layout.row#product-name",
"html#product-name",
"product-identifier.product",
"html#sku-selector-m3",
"flex-layout.row#availability"
"html#availability"
]
},
"flex-layout.row#availability": {
"html#availability": {
"props": {
"blockClass": "message-availability"
"blockClass": "message-availability",
"tag": "div"
},
"children": ["availability-subscriber"]
},

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

@ -8,8 +8,9 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
padding: 0 40px;
margin-bottom: 16px;
width: 94.4444%;
margin: 0 auto 16px;
padding: 0;
}
.container .homeIcon {
display: none;

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

@ -12,7 +12,3 @@
padding-bottom: 0;
margin: 0;
}
.stretchChildrenWidth {
width: 100% !important;
}

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

@ -11,10 +11,6 @@
background: red;
}
.container {
padding: 0 40px;
}
.thumbImg,
.figure,
.carouselThumbBorder {
@ -28,6 +24,10 @@
margin: 0 16px 0 0;
}
.carouselGaleryThumbs {
margin: 0 !important;
}
.productImageTag,
.productImageTag--main {
max-width: 100%;
@ -35,36 +35,6 @@
margin-bottom: 16px;
}
.carouselGaleryThumbs,
.carouselGaleryCursor,
.carouselContainer,
.productImagesContainer,
.productImagesContainer--carousel,
.content {
max-width: 664px;
margin: 0;
}
@media screen and (min-width: 1920px) {
.carouselGaleryThumbs,
.carouselGaleryCursor,
.carouselContainer,
.productImagesContainer,
.productImagesContainer--carousel,
.content {
max-width: 904px;
}
}
@media screen and ((min-width: 1025px) and (max-width: 1200px)) {
.carouselGaleryThumbs,
.carouselGaleryCursor,
.carouselContainer,
.productImagesContainer,
.productImagesContainer--carousel,
.content {
max-width: 500px;
}
}
.productBrand--quickview {
font-weight: 300;
font-size: 20px;

13
styles/css/vtex.styleguide.css Normal file
View File

@ -0,0 +1,13 @@
/*
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 */
.hideDecorators {
border-left: none;
border-right: none;
}

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

@ -1,6 +1,7 @@
.container {
padding: 0 40px;
margin-bottom: 16px;
width: 94.4444%;
margin: 0 auto 16px;
padding: 0;
.homeIcon {
display: none;

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

@ -3,7 +3,3 @@
padding-bottom: 0;
margin: 0;
}
.stretchChildrenWidth {
width: 100% !important;
}

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

@ -2,10 +2,6 @@
background: red;
}
.container {
padding: 0 40px;
}
.thumbImg,
.figure,
.carouselThumbBorder {
@ -19,6 +15,10 @@
margin: 0 16px 0 0;
}
.carouselGaleryThumbs {
margin: 0 !important;
}
.productImageTag,
.productImageTag--main {
max-width: 100%;
@ -26,24 +26,6 @@
margin-bottom: 16px;
}
.carouselGaleryThumbs,
.carouselGaleryCursor,
.carouselContainer,
.productImagesContainer,
.productImagesContainer--carousel,
.content {
max-width: 664px;
margin: 0;
@media screen and (min-width: 1920px) {
max-width: 904px;
}
@media screen and ((min-width: 1025px) and (max-width: 1200px)) {
max-width: 500px;
}
}
.productBrand--quickview {
font-weight: 300;
font-size: 20px;

4
styles/sass/pages/product/vtex.styleguide.scss Normal file
View File

@ -0,0 +1,4 @@
.hideDecorators {
border-left: none;
border-right: none;
}