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

feat(stack): Estiliza as fotos para todos os tamanhos de tela

Browse Source
This commit is contained in:
Nicolly Vieira Santos Costa 2023-01-24 12:59:46 -03:00
parent 9feefdf7d7
commit 9397495584
8 changed files with 125 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
manifest.json
View File

@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x",
"vtex.store-header": "2.x",
"vtex.product-summary": "2.x",

2
react/components/Html/index.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.css";
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {

50
react/components/Html/styles.css Normal file
View File

@ -0,0 +1,50 @@
[class*="html--pdp-breadcrumb"] {
margin: 0 40px;
}
[class*="html--product-main"] {
display: flex;
padding: 0 40px 16px;
gap: 32px;
}
[class*="html--stack"] {
width: 48.8235294%;
}
[class*="html--right-col"] {
width: 48.8235294%;
}
@media screen and (min-width: 2500px) {
[class*="html--pdp-breadcrumb"] {
margin: 0 360px;
}
[class*="html--product-main"] {
padding: 0 360px 16px;
}
[class*="html--stack"] {
width: 49.13043478%;
}
[class*="html--right-col"] {
width: 49.13043478%;
}
}
@media screen and (max-width: 1024px) {
[class*="html--product-main"] {
display: block;
padding: 0 40px 16px;
}
[class*="html--stack"] {
width: 100%;
}
[class*="html--right-col"] {
width: 100%;
}
}

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

@ -40,20 +40,15 @@
"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
"blockClass": "product-main"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
"children": ["html#stack", "html#right-col"]
},
"stack-layout": {
@ -61,7 +56,7 @@
"blockClass": "product"
},
"children": [
"flex-layout.row#product-image",
"html#product-image",
"product-bookmark",
"product-specification-badges"
]
@ -76,29 +71,32 @@
}
},
"flex-layout.col#stack": {
"html#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"rowGap": 0
"blockClass": "stack"
}
},
"flex-layout.row#product-image": {
"html#product-image": {
"props": {
"blockClass": "product-image"
},
"children": ["product-images"]
},
"product-images": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
},
"displayThumbnailsArrows": true
// "aspectRatio": "auto",
"thumbnailAspectRatio": "1:1",
"thumbnailMaxHeight": 90,
"showNavigationArrows": false,
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal",
"thumbnailVisibility": "visible"
}
},
"flex-layout.col#right-col": {
"html#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0
"blockClass": "right-col"
},
"children": [
"flex-layout.row#product-name",
@ -141,19 +139,13 @@
"children": ["add-to-cart-button"]
},
"flex-layout.row#product-availability": {
"html#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7
"blockClass": "product-availability"
},
"children": [
"flex-layout.col#stack",
"flex-layout.col#right-col-availability"
]
"children": ["html#stack", "html#right-col-availability"]
},
"flex-layout.col#right-col-availability": {
"html#right-col-availability": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0,

8
styles/css/agenciamagma.store-theme.css
View File

@ -7,11 +7,3 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.html--pdp-breadcrumb {
margin: 0 40px;
}
@media screen and (min-width: 2500px) {
.html--pdp-breadcrumb {
margin: 0 360px;
}
}

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

@ -10,3 +10,25 @@
.newsletter {
background: red;
}
.productImageTag--main {
max-height: max-content !important;
}
.carouselGaleryThumbs {
margin-top: 16px;
}
@media screen and (max-width: 1024px) {
.carouselGaleryThumbs {
margin-bottom: 32px;
display: block;
}
}
.carouselGaleryThumbs .productImagesThumbActive,
.carouselGaleryThumbs .productImagesThumb {
margin: 0 16px 0 0;
width: 90px !important;
height: 90px;
border-radius: 8px;
overflow: hidden;
}

11
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -1,11 +0,0 @@
// .html {
// background-color: red;
// }
.html--pdp-breadcrumb {
margin: 0 40px;
@media screen and (min-width: 2500px) {
margin: 0 360px;
}
}

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

@ -1,3 +1,26 @@
.newsletter {
background: red;
}
.productImageTag--main {
max-height: max-content !important;
}
.carouselGaleryThumbs {
margin-top: 16px;
@media screen and (max-width: 1024px) {
margin-bottom: 32px;
display: block;
}
.productImagesThumbActive,
.productImagesThumb {
margin: 0 16px 0 0;
width: 90px !important;
height: 90px;
border-radius: 8px;
overflow: hidden;
}
}