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": { "product-images": {
"props": { "props": {
"aspectRatio": { "aspectRatio": {
"desktop": "auto", "desktop": "1:1",
"phone": "auto" "phone": "auto"
}, },
"maxHeight": 664,
"showPaginationDots": false, "showPaginationDots": false,
"displayThumbnailsArrows": false, "displayThumbnailsArrows": false,
"thumbnailsOrientation": "horizontal", "thumbnailsOrientation": "horizontal",
@ -180,8 +182,8 @@
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product", "product-identifier.product",
"flex-layout.row#availability", "sku-selector",
"sku-selector" "flex-layout.row#availability"
] ]
}, },
"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": { "product-summary-image#shelf": {
"props": { "props": {
"showBadge": false, "showBadge": false,
"aspectRatio": "1:1", "aspectRatio": "1:1"
"maxHeight": 300 // "maxHeight": 300
} }
}, },
@ -81,9 +81,7 @@
}, },
"product-price-savings#summary": { "product-price-savings#summary": {
"props": { "props": {
"markers": [ "markers": ["discount"],
"discount"
],
"blockClass": "summary" "blockClass": "summary"
} }
} }

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

@ -7,15 +7,54 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* 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) { .flexRow--description :global(.vtex-store-components17-x-container) {
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
width: 100% !important; width: 100% !important;
max-width: 94.4444444444% !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 { .flexRowContent--description {
width: auto;
gap: 32px; gap: 32px;
} }
@media (min-width: 1920px) { @media (min-width: 1920px) {

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

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

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -114,6 +115,167 @@
border-bottom: 3px solid #BFBFBF; 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 { .productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;

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

@ -24,6 +24,7 @@
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.container--tab-product .listContainer--m3-tab-list-product { .container--tab-product .listContainer--m3-tab-list-product {
margin-top: 16px;
flex-direction: column; 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 // INICIO DESCRIÇÃO
.flexRow--description { .flexRow--description {
:global(.vtex-store-components17-x-container) { :global(.vtex-store-components17-x-container) {
@ -5,17 +56,23 @@
padding-right: 0 !important; padding-right: 0 !important;
width: 100% !important; width: 100% !important;
max-width: 94.444444444444444444444444444444% !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 { .flexRowContent--description {
width: auto;
gap: 32px; gap: 32px;
@media (min-width:1920px) { @media (min-width:1920px) {
.stretchChildrenWidth { .stretchChildrenWidth {
width: unset !important; width: unset !important;
// width: 100% !important;
} }
} }
@ -24,21 +81,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.stretchChildrenWidth { .stretchChildrenWidth {
width: unset !important; width: unset !important;
} }
} }
} }
// @media (max-width: 1024px) {
// .flexRowContent--description {
// display: flex;
// flex-direction: column;
// }
// .flexRowContent--description .stretchChildrenWidth {
// width: 100% !important;
// }
// }
// FIM DESCRIÇÃO // 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) { :global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important; max-width: unset !important;
// @media (min-width:374px) and (max-width:376px) {
// max-width: 124.8px !important;
// }
} }
:global(.vtex-product-summary-2-x-imageNormal) { :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) { @media (min-width:1920px) {
max-width: 434.4px !important; max-width: 434.4px !important;
} }
@media(max-width:1440px) { @media(max-width:1440px) {
max-width: 314.4px !important; max-width: 314.4px !important;
} }
@media (max-width:1024px) { @media (max-width:1024px) {
max-width: 291.2px !important; max-width: 291.2px !important;
} }
@media (max-width:375px) { @media (max-width:375px) {
width: 124.8px !important; width: 124.8px !important;
} }
} }
@ -61,7 +57,7 @@
visibility: hidden; visibility: hidden;
&::after { &::after {
position: relative !important; position: relative;
visibility: visible; visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg"); content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg");
width: 12px; width: 12px;
@ -76,7 +72,7 @@
} }
@media (max-width:1024px) { @media (max-width:1024px) {
left: -8px !important; left: -8px;
bottom: 3px; bottom: 3px;
} }
} }

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

@ -119,6 +119,198 @@
// FIM NEWSLETTER // 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 // INICIO DESCRIÇÃO
.flexRow--description {} .flexRow--description {}
@ -141,7 +333,6 @@
line-height: 22px; line-height: 22px;
color: $color-gray6; color: $color-gray6;
max-width: 632px; max-width: 632px;
// max-width: 632px !important;
@media (min-width:1920px) { @media (min-width:1920px) {

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

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

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

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