BernardoWaldhelm/challenge-vtex-io-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(product): adicionando estilo no product-image

Browse Source 
product
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-24 10:52:58 -03:00
parent 1b3894f66f
commit b8841846a4
10 changed files with 313 additions and 13 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",

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

@ -50,7 +50,8 @@
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
"paddingBottom": 7,
"blockClass": "product__image"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
@ -87,11 +88,14 @@
},
"product-images": {
"props": {
"testId": "product-images",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "auto"
},
"displayThumbnailsArrows": true
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal",
"children": ["product-images"]
}
},
"flex-layout.col#right-col": {

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

@ -36,6 +36,18 @@
.container .homeLink .homeIcon {
display: none;
}
.container .link--1 {
font-size: 0;
}
.container .link--1::after {
content: "Sapatos";
display: block;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.container .term {
color: #929292;
}

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

@ -1,3 +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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
/* Grid breakpoints */
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
@ -9,14 +19,12 @@
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
@ -96,3 +104,16 @@
.flexRow--addToCartRow {
padding-bottom: 1rem;
}
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.flexRowContent--product__image {
flex-direction: column;
}
}
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.stretchChildrenWidth {
width: 100% !important;
padding-right: 0;
}
}

14
styles/css/vtex.stack-layout.css
View File

@ -1,10 +1,20 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
/* Grid breakpoints */
.stackItem--product {
width: 100%;
min-height: 257px
min-height: none;
}
.stackItem--quickview {
right: 0;
top: 0;
left: auto;
}
}

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

@ -8,6 +8,66 @@
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
/* Grid breakpoints */
.newsletter {
background: red;
.container {
padding: 16px 360px;
margin: 0;
}
@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.container {
padding: 16px 40px;
}
}
.swiperCaretNext, .swiperCaretPrev {
display: none;
}
.carouselGaleryCursor {
cursor: initial;
}
.productImageTag--main, .videoContainer {
object-fit: unset !important;
max-height: 904px !important;
cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
}
@media (min-width: 1025px) and (max-width: 2499px) {
.productImageTag--main, .videoContainer {
max-height: 664px !important;
}
}
@media (min-width: 491px) and (max-width: 1024px) {
.productImageTag--main, .videoContainer {
max-height: 944px !important;
}
}
@media (min-width: 280px) and (max-width: 490px) {
.productImageTag--main, .videoContainer {
max-height: 296px !important;
}
}
.carouselGaleryThumbs {
margin-top: 0;
}
@media (min-width: 280px) and (max-width: 490px), (min-width: 491px) and (max-width: 1024px) {
.carouselGaleryThumbs {
display: block !important;
}
}
.carouselGaleryThumbs .productImagesThumb {
width: 10% !important;
height: 100% !important;
margin: 16px 16px 0 0;
border-radius: 8px;
}
@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.carouselGaleryThumbs .productImagesThumb {
width: 90px !important;
height: 90px !important;
}
}
.carouselGaleryThumbs .productImagesThumb .figure, .carouselGaleryThumbs .productImagesThumb .thumbImg {
width: 100%;
height: 100%;
}

15
styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss
View File

@ -29,6 +29,21 @@
display: none;
}
}
.link--1 {
font-size: 0;
&::after {
content: 'Sapatos';
display: block;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
}
.term {
color: $color-gray6;
}

111
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

@ -0,0 +1,111 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
display: flex;
max-height: 100%;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
}
.flexRowContent--product__image{
@media #{$mq-tablet}, #{$mq-mobile} {
flex-direction: column;
}
}
.stretchChildrenWidth {
@media #{$mq-tablet}, #{$mq-mobile}{
width: 100% !important;
padding-right: 0;
}
}

10
styles/sass/pages/product/vtex.stack-layout.scss Normal file
View File

@ -0,0 +1,10 @@
.stackItem--product {
width: 100%;
min-height: none;
}
.stackItem--quickview {
right: 0;
top: 0;
left: auto;
}

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

@ -1,3 +1,61 @@
.newsletter{
background: red;
}
.container {
padding:16px 360px;
margin: 0;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
padding: 16px 40px;
}
}
.swiperCaretNext, .swiperCaretPrev {
display: none;
}
.carouselGaleryCursor {
cursor: initial;
}
.productImageTag--main, .videoContainer {
object-fit: unset !important;
max-height: 904px !important;
cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
@media #{$mq-desktop} {
max-height: 664px !important;
}
@media #{$mq-tablet} {
max-height: 944px !important;
}
@media #{$mq-mobile} {
max-height: 296px !important;
}
}
.carouselGaleryThumbs {
margin-top: 0;
@media #{$mq-mobile}, #{$mq-tablet} {
display: block !important;
}
.productImagesThumb {
width: 10% !important;
height: 100% !important;
margin: 16px 16px 0 0;
border-radius: 8px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
width: 90px !important;
height: 90px !important;
}
.figure, .thumbImg{
width: 100%;
height: 100%;
}
}
}