AdilsonFernandoNevesOrnellas/challenge-vtex-io-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: deixando o projeto responsivo e slick funcional

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-25 18:59:38 -03:00
parent a4c4be5e68
commit 52dee67913
11 changed files with 290 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,10 @@
@media (min-width: 1920px) {
[class*="html--page-product"] {
margin-left: 320px;
padding-right: 320px;
}
}
[class*="html--pdp-breadcrumb"] { [class*="html--pdp-breadcrumb"] {
background-color: #fff; background-color: #fff;
} }

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

@ -1,5 +1,15 @@
{ {
"store.product": { "store.product": {
"children": [
"html#pageProduct",
"newsletter"
]
},
"html#pageProduct": {
"props": {
"blockClass":"page-product"
},
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
@ -8,10 +18,11 @@
// "flex-layout.row#description", // "flex-layout.row#description",
// "flex-layout.row#specifications-title", // "flex-layout.row#specifications-title",
// "product-specification-group#table", // "product-specification-group#table",
// "shelf.relatedProducts",
// "product-questions-and-answers",
"shelf.relatedProducts", "rich-text#titleSlick",
"product-questions-and-answers", "list-context.product-list#demo"
"newsletter"
] ]
}, },
"html#breadcrumb": { "html#breadcrumb": {
@ -222,7 +233,7 @@
"props": { "props": {
"blockClass": "renderGuia", "blockClass": "renderGuia",
"tabId": "product1", "tabId": "product1",
"label": "Descrição 1", "label": "Descrição",
"defaultActiveTab": true "defaultActiveTab": true
} }
}, },
@ -230,28 +241,28 @@
"props": { "props": {
"blockClass": "renderGuia", "blockClass": "renderGuia",
"tabId": "product2", "tabId": "product2",
"label": "Descrição 2" "label": "Descrição"
} }
}, },
"tab-list.item#product3": { "tab-list.item#product3": {
"props": { "props": {
"blockClass": "renderGuia", "blockClass": "renderGuia",
"tabId": "product3", "tabId": "product3",
"label": "Descrição 3" "label": "Descrição"
} }
}, },
"tab-list.item#product4": { "tab-list.item#product4": {
"props": { "props": {
"blockClass": "renderGuia", "blockClass": "renderGuia",
"tabId": "product4", "tabId": "product4",
"label": "Descrição 4" "label": "Descrição"
} }
}, },
"tab-list.item#product5": { "tab-list.item#product5": {
"props": { "props": {
"blockClass": "renderGuia", "blockClass": "renderGuia",
"tabId": "product5", "tabId": "product5",
"label": "Descrição 5" "label": "Descrição"
} }
}, },
"tab-content#product": { "tab-content#product": {
@ -307,20 +318,77 @@
"blockClass": "divImgDescription", "blockClass": "divImgDescription",
"width": "50%" "width": "50%"
}, },
"children": ["image#imgDescription"] "children": ["product-images#imgDescription"]
}, },
"image#imgDescription": { "product-images#imgDescription": {
"props": { "props": {
"src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-600-auto?v=637781133812700000&width=600&height=auto&aspect=true 600w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true 800w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-1200-auto?v=637781133812700000&width=1200&height=auto&aspect=true 1200w", "displayMode": "first-image",
"blockClass": "imgDescription" "blockClass": "imgDescription"
} }
}, },
"flex-layout.row#description": { "flex-layout.row#description": {
"props": { "props": {
"blockClass":"divDescription",
"marginBottom": 7 "marginBottom": 7
}, },
"children": ["flex-layout.col#divImgDescription", "product-description"] "children": ["flex-layout.col#divImgDescription", "product-description"]
}, },
"rich-text#titleSlick": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Você também pode gostar:",
"blockClass": "tituloSlick"
}
},
"list-context.product-list#demo": {
"blocks": ["product-summary.shelf#demo"],
"children": ["slider-layout#demo-product"]
},
"product-summary.shelf#demo": {
"children": [
"product-summary-image",
"product-summary-name",
// "product-summary-description",
"product-summary-price"
// "product-summary-sku-selector",
// "product-summary-buy-button"
]
},
"slider-layout#demo-product": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
}
// ,
// "children": ["shelf.relatedProducts"]
},
// "rich-text#1": {
// "props": {
// "text": "Test1"
// }
// },
// "rich-text#2": {
// "props": {
// "text": "Test2"
// }
// },
// "rich-text#3": {
// "props": {
// "text": "Test3"
// }
// },
"newsletter": { "newsletter": {
"props": { "props": {
"blockClass": "newsletter", "blockClass": "newsletter",

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

@ -15,11 +15,6 @@
line-height: 19px; line-height: 19px;
margin-left: 40px; margin-left: 40px;
} }
@media (min-width: 2500px) {
.container {
margin-left: 360px;
}
}
.container .homeIcon { .container .homeIcon {
display: none; display: none;
} }

12
styles/css/vtex.button.css
View File

@ -1,12 +0,0 @@
/*
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 */
.bw1 {
background-color: black;
}

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

@ -7,13 +7,34 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.stretchChildrenWidth {
width: 100% !important;
}
@media (max-width: 1024px) {
.stretchChildrenWidth {
padding-right: 0px;
}
}
@media (max-width: 1024px) {
.flexRowContent--divDescription {
display: flex;
flex-direction: column;
}
}
.flexRowContent--divProduct { .flexRowContent--divProduct {
margin-top: 16px; margin-top: 16px;
margin-left: 40px;
margin-bottom: 16px;
padding: 0px; padding: 0px;
padding-left: 40px !important;
margin-bottom: 16px;
padding-right: 40px !important; padding-right: 40px !important;
} }
@media (max-width: 1024px) {
.flexRowContent--divProduct {
flex-direction: column;
}
}
.flexRowContent--divProduct .stretchChildrenWidth { .flexRowContent--divProduct .stretchChildrenWidth {
width: 100% !important; width: 100% !important;
} }
@ -40,3 +61,8 @@
.flexCol--divImgDescription { .flexCol--divImgDescription {
margin-right: 32px; margin-right: 32px;
} }
@media (max-width: 1024px) {
.flexCol--divImgDescription {
margin-right: 0px;
}
}

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

@ -14,6 +14,7 @@
.container { .container {
margin: 0; margin: 0;
padding: 0; padding: 0;
max-width: 100%;
} }
.container .productImagesContainer--divImagens { .container .productImagesContainer--divImagens {
width: 100%; width: 100%;
@ -32,6 +33,16 @@
max-width: 664px; max-width: 664px;
margin-bottom: 16px; margin-bottom: 16px;
} }
@media (min-width: 2500px) {
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
max-width: 904px;
}
}
@media (max-width: 1024px) {
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
max-width: 100%;
}
}
.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb { .container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
margin-right: 16px; margin-right: 16px;
padding: 0px; padding: 0px;
@ -68,10 +79,21 @@
border-bottom: 3px solid #bfbfbf; border-bottom: 3px solid #bfbfbf;
} }
.imageElement--imgDescription { .productImageTag--imgDescription {
width: 100%; width: 100%;
max-width: 664px; max-width: 664px;
} }
@media (min-width: 2500px) {
.productImageTag--imgDescription {
max-width: 904px;
}
}
@media (max-width: 1024px) {
.productImageTag--imgDescription {
max-width: 944px;
margin-bottom: 16px;
}
}
.productDescriptionContainer .productDescriptionTitle { .productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans"; font-family: "Open Sans";
@ -81,3 +103,9 @@
line-height: 32px; line-height: 32px;
color: #575757; color: #575757;
} }
@media (max-width: 1024px) {
.productDescriptionContainer .productDescriptionTitle {
margin-bottom: 8px;
padding-bottom: 8px;
}
}

31
styles/css/vtex.tab-layout.css
View File

@ -8,17 +8,23 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.container--estrutura { .container--estrutura {
margin-left: 40px; padding-left: 40px !important;
padding-right: 40px !important; padding-right: 40px !important;
} }
.container--estrutura .listContainer--Guias { .container--estrutura .listContainer--Guias {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
border-bottom: 1px solid #B9B9B9; border-bottom: 1px solid #b9b9b9;
padding: 0px 64px; padding: 0px 64px;
margin-bottom: 36px; margin-bottom: 36px;
} }
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias {
flex-direction: column;
padding: 0px 0px;
}
}
.container--estrutura .listContainer--Guias .listItem--renderGuia { .container--estrutura .listContainer--Guias .listItem--renderGuia {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -29,12 +35,23 @@
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
color: #BFBFBF; color: #bfbfbf;
}
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) {
padding-left: 0;
padding-right: 48px;
}
} }
.container--estrutura .listContainer--Guias .listItemActive--renderGuia { .container--estrutura .listContainer--Guias .listItemActive--renderGuia {
border-bottom: 3px solid #000000; border-bottom: 3px solid #000000;
background-color: white; background-color: white;
} }
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItemActive--renderGuia {
border-bottom: none;
}
}
.container--estrutura .listContainer--Guias .listItemActive--renderGuia :global(.vtex-button) { .container--estrutura .listContainer--Guias .listItemActive--renderGuia :global(.vtex-button) {
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;
@ -47,5 +64,11 @@
} }
.container--estrutura .contentContainer--listRender { .container--estrutura .contentContainer--listRender {
margin-left: 32px; margin-left: 32px;
padding-right: 72px; padding-right: 52px;
}
@media (max-width: 1024px) {
.container--estrutura .contentContainer--listRender {
margin-left: 0px;
padding-right: 0px;
}
} }

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

@ -4,9 +4,6 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
margin-left: 40px; margin-left: 40px;
@media (min-width: 2500px) {
margin-left: 360px;
}
.homeIcon { .homeIcon {
display: none; display: none;
} }

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

@ -1,9 +1,27 @@
.stretchChildrenWidth{
width: 100% !important;
@media (max-width: 1024px) {
padding-right: 0px
}
}
.flexRowContent--divDescription{
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
}
.flexRowContent--divProduct { .flexRowContent--divProduct {
margin-top: 16px; margin-top: 16px;
margin-left: 40px;
margin-bottom: 16px;
padding: 0px; padding: 0px;
padding-left: 40px !important;
margin-bottom: 16px;
padding-right: 40px !important; padding-right: 40px !important;
@media (max-width:1024px) {
flex-direction: column;
}
.stretchChildrenWidth { .stretchChildrenWidth {
width: 100% !important; width: 100% !important;
} }
@ -30,5 +48,8 @@
} }
.flexCol--divImgDescription{ .flexCol--divImgDescription{
margin-right: 32px; margin-right: 32px;
@media (max-width: 1024px) {
margin-right: 0px;
}
} }

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

@ -4,6 +4,7 @@
.container { .container {
margin: 0; margin: 0;
padding: 0; padding: 0;
max-width: 100%;
.productImagesContainer--divImagens { .productImagesContainer--divImagens {
width: 100%; width: 100%;
.productImagesGallerySwiperContainer { .productImagesGallerySwiperContainer {
@ -17,6 +18,12 @@
max-height: 100% !important; max-height: 100% !important;
max-width: 664px; max-width: 664px;
margin-bottom: 16px; margin-bottom: 16px;
@media (min-width:2500px) {
max-width: 904px;
}
@media (max-width:1024px) {
max-width: 100% ;
}
} }
} }
} }
@ -58,9 +65,16 @@
} }
} }
.imageElement--imgDescription { .productImageTag--imgDescription {
width: 100%; width: 100%;
max-width: 664px; max-width: 664px;
@media (min-width:2500px) {
max-width: 904px;
}
@media (max-width: 1024px) {
max-width: 944px;
margin-bottom: 16px;
}
} }
.productDescriptionContainer { .productDescriptionContainer {
@ -71,5 +85,9 @@
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #575757; color: #575757;
@media (max-width: 1024px) {
margin-bottom: 8px;
padding-bottom: 8px;
}
} }
} }

30
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -1,30 +1,43 @@
.container--estrutura { .container--estrutura {
margin-left: 40px ; padding-left: 40px !important ;
padding-right: 40px !important; padding-right: 40px !important;
.listContainer--Guias { .listContainer--Guias {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
border-bottom: 1px solid #B9B9B9; border-bottom: 1px solid #b9b9b9;
padding: 0px 64px; padding: 0px 64px;
margin-bottom: 36px; margin-bottom: 36px;
@media (max-width: 1024px) {
flex-direction: column;
padding: 0px 0px;
}
.listItem--renderGuia { .listItem--renderGuia {
margin: 0; margin: 0;
padding: 0; padding: 0;
:global(.vtex-button) { :global(.vtex-button) {
font-family: 'Open Sans'; font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
color: #BFBFBF; color: #bfbfbf;
}
:global(.vtex-button__label) {
@media (max-width: 1024px) {
padding-left: 0;
padding-right: 48px;
}
} }
} }
.listItemActive--renderGuia { .listItemActive--renderGuia {
border-bottom: 3px solid #000000; border-bottom: 3px solid #000000;
background-color: white; background-color: white;
@media (max-width: 1024px) {
border-bottom: none;
}
:global(.vtex-button) { :global(.vtex-button) {
font-family: 'Open Sans'; font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -37,7 +50,10 @@
} }
.contentContainer--listRender { .contentContainer--listRender {
margin-left: 32px; margin-left: 32px;
padding-right: 72px; padding-right: 52px;
@media (max-width: 1024px) {
margin-left: 0px;
padding-right: 0px;
}
} }
} }