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

feat: cria estilizacao responsiva para area do produto indisponivel

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-02-07 17:34:35 -03:00
parent 734ddad704
commit e02c544935
12 changed files with 471 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,9 +82,11 @@
"product-images": {
"props": {
"aspectRatio": {
"desktop": "auto",
"desktop": "1:1",
"phone": "auto"
},
"maxHeight": 664,
"showPaginationDots": false,
"displayThumbnailsArrows": false,
"thumbnailsOrientation": "horizontal",
@ -180,8 +182,8 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"flex-layout.row#availability",
"sku-selector"
"sku-selector",
"flex-layout.row#availability"
]
},
"flex-layout.row#availability": {

8
store/blocks/product-summary/product-summary.jsonc
View File

@ -29,8 +29,8 @@
"product-summary-image#shelf": {
"props": {
"showBadge": false,
"aspectRatio": "1:1",
"maxHeight": 300
"aspectRatio": "1:1"
// "maxHeight": 300
}
},
@ -81,9 +81,7 @@
},
"product-price-savings#summary": {
"props": {
"markers": [
"discount"
],
"markers": ["discount"],
"blockClass": "summary"
}
}

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

@ -7,15 +7,54 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.flexRowContent--product-main {
padding: 0;
margin: 0;
border: 1px solid red;
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) {
padding: 0;
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
padding: 0;
margin: 0;
gap: 32px;
}
@media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
padding: 0 40px;
flex-direction: column;
}
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
min-width: 296px;
max-width: 664px;
padding: 0;
border-radius: 0;
}
@media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
height: 402px;
}
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
justify-content: initial;
}
.flexRow--description :global(.vtex-store-components17-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 94.4444444444% !important;
background-color: red;
}
.flexRow--description :global(.vtex-store-components-3-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
}
.flexRowContent--description {
width: auto;
gap: 32px;
}
@media (min-width: 1920px) {

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

@ -65,7 +65,7 @@
visibility: hidden;
}
.sliderLeftArrow--m3-carousel-products::after {
position: relative !important;
position: relative;
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg");
width: 12px;
@ -83,7 +83,7 @@
}
@media (max-width: 1024px) {
.sliderLeftArrow--m3-carousel-products::after {
left: -8px !important;
left: -8px;
bottom: 3px;
}
}

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -114,6 +115,167 @@
border-bottom: 3px solid #BFBFBF;
}
.subscriberContainer {
max-width: 399px;
}
@media (max-width: 1024px) {
.subscriberContainer {
max-width: 765px;
}
}
.subscriberContainer :global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
}
.subscriberContainer :global(.vtex-store-components-3-x-title)::after {
content: "Produto indisponível";
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
/* or 136% */
display: flex;
align-items: center;
color: #868686;
}
.subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
}
.subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel)::after {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* or 136% */
display: flex;
align-items: center;
color: #868686;
}
.subscriberContainer .form {
width: 100%;
margin: 0;
padding: 0;
}
.subscriberContainer .form .content {
display: grid;
grid-template-areas: "nome email" "submit submit";
justify-content: inherit;
gap: 16px 8px;
width: 100%;
max-width: none;
}
.subscriberContainer .form .content .inputName {
grid-area: nome;
}
.subscriberContainer .form .content .inputName,
.subscriberContainer .form .content .inputEmail {
margin: 0;
max-width: 195.5px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
height: 40px;
margin: 0;
}
@media (max-width: 1024px) {
.subscriberContainer .form .content .inputName,
.subscriberContainer .form .content .inputEmail {
max-width: 378.5px;
}
}
.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group),
.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) {
height: 40px;
border: 1px solid #989898;
border-radius: 0;
}
.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input),
.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
border-radius: 0;
}
.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder,
.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
.subscriberContainer .form .content .submit {
width: 100%;
grid-area: submit;
margin: 0;
}
.subscriberContainer .form .content .submit :global(.vtex-button) {
width: 100%;
height: 49px;
border: none;
border-radius: 0;
background: #000;
}
.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
}
.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::after {
content: "avise-me";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
display: flex;
align-items: center;
color: #ffffff;
}
@media (min-width: 1920px) {
.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::after {
font-weight: 600;
font-size: 18px;
line-height: 25px;
}
}
.carouselGaleryThumbs {
margin: 16px 0 32px;
max-height: 90px;
}
@media (max-width: 1024px) {
.carouselGaleryThumbs {
display: block;
}
}
.carouselThumbBorder,
.thumbImg {
width: 100%;
height: 100%;
max-width: 90px;
height: 90px;
border-radius: 8px;
}
.productImagesThumb {
margin-right: 16px !important;
max-height: 90px !important;
width: 90px !important;
}
.figure,
.productImagesThumb {
width: 90px !important;
}
.productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans";
font-style: normal;

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

@ -24,6 +24,7 @@
}
@media (max-width: 1024px) {
.container--tab-product .listContainer--m3-tab-list-product {
margin-top: 16px;
flex-direction: column;
}
}

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

@ -1,3 +1,54 @@
// INICIO PRODUCT
.flexRowContent--product-main {
padding: 0;
margin: 0;
border: 1px solid red;
}
// FIM PRODUCT
// INICIO INDISPONIVEL
.flexRow--indisponivel {
:global(.vtex-store-components-3-x-container) {
padding: 0;
.flexRowContent--indisponivel {
padding: 0;
margin: 0;
gap: 32px;
@media (max-width:1024px) {
padding: 0 40px;
flex-direction: column;
}
// padding: 0 40px;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
min-width: 296px;
max-width: 664px;
padding: 0;
border-radius: 0;
@media (max-width:1024px) {
// width: 100% !important;
// max-width: none;
height: 402px;
}
.flexColChild--info-availability {
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
justify-content: initial;
}
}
}
}
}
}
// FIM INDISPONIVEL
// INICIO DESCRIÇÃO
.flexRow--description {
:global(.vtex-store-components17-x-container) {
@ -5,17 +56,23 @@
padding-right: 0 !important;
width: 100% !important;
max-width: 94.444444444444444444444444444444% !important;
background-color: red;
}
:global(.vtex-store-components-3-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.flexRowContent--description {
width: auto;
gap: 32px;
@media (min-width:1920px) {
.stretchChildrenWidth {
width: unset !important;
// width: 100% !important;
}
}
@ -24,21 +81,13 @@
display: flex;
flex-direction: column;
.stretchChildrenWidth {
width: unset !important;
}
}
}
// @media (max-width: 1024px) {
// .flexRowContent--description {
// display: flex;
// flex-direction: column;
// }
// .flexRowContent--description .stretchChildrenWidth {
// width: 100% !important;
// }
// }
// FIM DESCRIÇÃO

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

@ -1,9 +1,5 @@
:global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
// @media (min-width:374px) and (max-width:376px) {
// max-width: 124.8px !important;
// }
}
:global(.vtex-product-summary-2-x-imageNormal) {

8
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -22,22 +22,18 @@
@media (min-width:1920px) {
max-width: 434.4px !important;
}
@media(max-width:1440px) {
max-width: 314.4px !important;
}
@media (max-width:1024px) {
max-width: 291.2px !important;
}
@media (max-width:375px) {
width: 124.8px !important;
}
}
@ -61,7 +57,7 @@
visibility: hidden;
&::after {
position: relative !important;
position: relative;
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg");
width: 12px;
@ -76,7 +72,7 @@
}
@media (max-width:1024px) {
left: -8px !important;
left: -8px;
bottom: 3px;
}
}

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

@ -119,6 +119,198 @@
// FIM NEWSLETTER
// INICIO INDISPONIVEL
.subscriberContainer {
max-width: 399px;
@media (max-width:1024px) {
max-width: 765px;
}
:global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
&::after {
content: "Produto indisponível";
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
/* or 136% */
display: flex;
align-items: center;
color: #868686;
}
}
:global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* or 136% */
display: flex;
align-items: center;
color: #868686;
}
}
.form {
width: 100%;
margin: 0;
padding: 0;
.content {
display: grid;
grid-template-areas:
"nome email"
"submit submit";
justify-content: inherit;
gap: 16px 8px;
width: 100%;
max-width: none;
.inputName {
grid-area: nome;
}
.inputName,
.inputEmail {
margin: 0;
max-width: 195.5px;
@media (max-width:1024px) {
max-width: 378.5px;
}
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
height: 40px;
margin: 0;
:global(.vtex-input-prefix__group) {
height: 40px;
border: 1px solid $color-gray10;
border-radius: 0;
:global(.vtex-styleguide-9-x-input) {
// padding: 12px 14px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray10;
border-radius: 0;
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray10;
}
}
}
}
.submit {
width: 100%;
grid-area: submit;
margin: 0;
:global(.vtex-button) {
width: 100%;
height: 49px;
border: none;
border-radius: 0;
background: #000;
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "avise-me";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
display: flex;
align-items: center;
color: #ffffff;
@media (min-width:1920px) {
font-weight: 600;
font-size: 18px;
line-height: 25px;
}
}
}
}
}
}
}
}
// imagens abaixo da imagem principal
.carouselGaleryThumbs {
margin: 16px 0 32px;
max-height: 90px;
@media (max-width:1024px) {
display: block;
}
}
.carouselThumbBorder,
.thumbImg {
width: 100%;
height: 100%;
max-width: 90px;
height: 90px;
border-radius: 8px;
}
.productImagesThumb {
margin-right: 16px !important;
max-height: 90px !important;
width: 90px !important;
}
.figure,
.productImagesThumb {
width: 90px !important;
}
// FIM INDISPONIVEL
// INICIO DESCRIÇÃO
.flexRow--description {}
@ -141,7 +333,6 @@
line-height: 22px;
color: $color-gray6;
max-width: 632px;
// max-width: 632px !important;
@media (min-width:1920px) {

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

@ -17,6 +17,7 @@
margin-bottom: 32px;
@media (max-width:1024px) {
margin-top: 16px;
flex-direction: column;
}

1
styles/sass/utils/_vars.scss
View File

@ -14,6 +14,7 @@ $color-gray6: #929292;
$color-gray7: #AFAFAF;
$color-gray8: #BFBFBF;
$color-gray9: #BABABA;
$color-gray10: #989898;
$color-blue: #4267b2;