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

feat: adiciona responsividade 2560px

Browse Source
This commit is contained in:
Vitor Soares 2023-02-09 14:07:51 -03:00
parent fb773d6f67
commit e957f88ecb
14 changed files with 93 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,12 +14,17 @@
[class*="description-container"] { [class*="description-container"] {
display: flex; display: flex;
gap: 32px;
} }
[class*="add-to-cart-button"] { [class*="add-to-cart-button"] {
width: 100%; width: 100%;
} }
[class*="html--product-summary"] {
padding: 0 40px;
}
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
[class*="html--buy-button"] :global(.vtex-button) { [class*="html--buy-button"] :global(.vtex-button) {
width: 100%; width: 100%;
@ -27,6 +32,7 @@
[class*="description-container"] { [class*="description-container"] {
flex-direction: column; flex-direction: column;
gap: 0;
} }
} }
@ -44,3 +50,9 @@
padding-bottom: 8px; padding-bottom: 8px;
} }
} }
@media only screen and (min-width: 1920px) {
[class*="html--product-summary"] {
padding: 0 360px;
}
}

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

@ -355,7 +355,8 @@
"html#slider": { "html#slider": {
"props": { "props": {
"testId": "product-summary-list" "testId": "product-summary-list",
"blockClass": "product-summary"
}, },
"children": [ "children": [
"slider-layout#carousel" "slider-layout#carousel"

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

@ -13,6 +13,11 @@
.container { .container {
padding: 0 40px 16px; padding: 0 40px 16px;
} }
@media only screen and (min-width: 1920px) {
.container {
padding: 0 360px 16px;
}
}
.homeIcon, .homeIcon,
.homeLink { .homeLink {

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

@ -21,7 +21,7 @@
padding: 0 !important; padding: 0 !important;
margin: 0; margin: 0;
width: 100% !important; width: 100% !important;
max-width: 664px !important; max-width: unset !important;
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.stretchChildrenWidth { .stretchChildrenWidth {
@ -37,6 +37,11 @@
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) { :global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
padding: 0 40px; padding: 0 40px;
} }
@media only screen and (min-width: 1920px) {
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
padding: 0 360px;
}
}
:global(.vtex-flex-layout-0-x-flexRowContent) { :global(.vtex-flex-layout-0-x-flexRowContent) {
padding: 0; padding: 0;

1
styles/css/vtex.product-summary.css
View File

@ -15,6 +15,7 @@
height: 314px; height: 314px;
max-height: unset; max-height: unset;
max-width: 314px; max-width: 314px;
object-fit: contain;
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.imageNormal { .imageNormal {

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

@ -12,16 +12,16 @@
/* Grid breakpoints */ /* Grid breakpoints */
.sliderLayoutContainer { .sliderLayoutContainer {
margin-bottom: 64px; margin-bottom: 64px;
padding: 0 67px; padding: 0 16px;
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.sliderLayoutContainer { .sliderLayoutContainer {
padding: 0 63px; padding: 0 12px;
} }
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.sliderLayoutContainer { .sliderLayoutContainer {
padding: 0 59px; padding: 0 8px;
margin-bottom: 32px; margin-bottom: 32px;
} }
} }
@ -56,33 +56,25 @@
.sliderRightArrow { .sliderRightArrow {
visibility: hidden; visibility: hidden;
padding: 0;
margin: 0;
} }
.sliderRightArrow::after { .sliderRightArrow::after {
visibility: visible; visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
padding: 0 40px 0 0;
}
@media only screen and (max-width: 767px) {
.sliderRightArrow::after {
padding: 0 48px 0 0;
}
} }
.sliderLeftArrow { .sliderLeftArrow {
visibility: hidden; visibility: hidden;
padding: 0;
margin: 0;
} }
.sliderLeftArrow::before { .sliderLeftArrow::before {
visibility: visible; visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
padding: 0 0 0 40px;
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.sliderLeftArrow::before { .sliderLeftArrow::before {
display: block; display: block;
} }
} }
@media only screen and (max-width: 767px) {
.sliderLeftArrow::before {
padding: 0 0 0 48px;
}
}

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

@ -13,6 +13,8 @@
/* Grid breakpoints */ /* Grid breakpoints */
.container { .container {
padding: 0; padding: 0;
max-width: 100% !important;
width: 100%;
} }
@media only screen and (min-width: 1920px) { @media only screen and (min-width: 1920px) {
.container { .container {
@ -72,9 +74,9 @@
.productImage .productImageTag { .productImage .productImageTag {
width: 100% !important; width: 100% !important;
height: 100%; height: 100%;
max-height: 664px !important; max-height: unset !important;
object-fit: contain; object-fit: contain;
max-width: 664px !important; max-width: 100% !important;
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.productImage .productImageTag { .productImage .productImageTag {
@ -84,7 +86,7 @@
} }
.productImagesGallerySlide { .productImagesGallerySlide {
max-width: 664px !important; max-width: 100% !important;
width: 100% !important; width: 100% !important;
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
@ -238,7 +240,7 @@
} }
.productImageTag { .productImageTag {
max-width: 664px; max-width: 100%;
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.productImageTag { .productImageTag {
@ -560,7 +562,6 @@
.productDescriptionContainer { .productDescriptionContainer {
width: 100%; width: 100%;
padding-left: 32px;
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.productDescriptionContainer { .productDescriptionContainer {

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

@ -14,6 +14,11 @@
.container--structure { .container--structure {
padding: 0 40px; padding: 0 40px;
} }
@media only screen and (min-width: 1920px) {
.container--structure {
padding: 0 360px;
}
}
.container--structure::after { .container--structure::after {
content: "Você também pode gostar:"; content: "Você também pode gostar:";
display: block; display: block;
@ -31,8 +36,8 @@
} }
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
width: 100% !important; width: 100% !important;
max-height: 632px !important; max-height: 100% !important;
max-width: 632px !important; max-width: 100% !important;
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
@ -108,7 +113,7 @@
@media only screen and (min-width: 1920px) { @media only screen and (min-width: 1920px) {
.listContainer .listItem :global(.vtex-button__label) { .listContainer .listItem :global(.vtex-button__label) {
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 26px;
} }
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
@ -118,7 +123,7 @@
height: fit-content; height: fit-content;
padding: 0 !important; padding: 0 !important;
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 38px;
} }
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {

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

@ -1,5 +1,9 @@
.container { .container {
padding: 0 40px 16px ; padding: 0 40px 16px ;
@include mq(xl, min) {
padding: 0 360px 16px;
}
} }
.homeIcon, .homeIcon,

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

@ -9,7 +9,7 @@
padding: 0 !important; padding: 0 !important;
margin: 0; margin: 0;
width: 100% !important; width: 100% !important;
max-width: 664px !important; max-width: unset !important;
@include mq(md, max) { @include mq(md, max) {
max-width: unset !important; max-width: unset !important;
@ -23,6 +23,10 @@
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) { :global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
padding: 0 40px; padding: 0 40px;
@include mq(xl, min) {
padding: 0 360px;
}
} }
:global(.vtex-flex-layout-0-x-flexRowContent) { :global(.vtex-flex-layout-0-x-flexRowContent) {

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

@ -1,8 +1,14 @@
// .imageContainer {
// width: 314px;
// height: 314px;
// }
.imageNormal { .imageNormal {
width: 105%; width: 105%;
height: 314px; height: 314px;
max-height: unset; max-height: unset;
max-width: 314px; max-width: 314px;
object-fit: contain;
@include mq(md, max) { @include mq(md, max) {
height: 291.2px; height: 291.2px;

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

@ -1,13 +1,13 @@
.sliderLayoutContainer { .sliderLayoutContainer {
margin-bottom: 64px; margin-bottom: 64px;
padding: 0 67px; padding: 0 16px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 63px; padding: 0 12px;
} }
@include mq(sm, max) { @include mq(sm, max) {
padding: 0 59px; padding: 0 8px;
margin-bottom: 32px; margin-bottom: 32px;
} }
@ -44,32 +44,36 @@
.sliderRightArrow { .sliderRightArrow {
visibility: hidden; visibility: hidden;
padding: 0;
margin: 0;
&::after { &::after {
visibility: visible; visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
padding: 0 40px 0 0;
@include mq(sm, max) {
padding: 0 48px 0 0; // @include mq(sm, max) {
} // padding: 0 48px 0 0;
// }
} }
} }
.sliderLeftArrow { .sliderLeftArrow {
visibility: hidden; visibility: hidden;
padding: 0;
margin: 0;
&::before { &::before {
visibility: visible; visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
padding: 0 0 0 40px;
@include mq(md, max) { @include mq(md, max) {
display: block; display: block;
} }
@include mq(sm, max) { // @include mq(sm, max) {
padding: 0 0 0 48px; // padding: 0 0 0 48px;
} // }
} }
} }

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

@ -1,5 +1,7 @@
.container { .container {
padding: 0; padding: 0;
max-width: 100% !important;
width: 100%;
@include mq(xl, min) { @include mq(xl, min) {
margin: 0 !important; margin: 0 !important;
@ -64,22 +66,19 @@
.productImageTag { .productImageTag {
width: 100% !important; width: 100% !important;
height: 100%; height: 100%;
max-height: 664px !important; max-height: unset !important;
object-fit: contain; object-fit: contain;
max-width: 664px !important; max-width: 100% !important;
@include mq(md, max) { @include mq(md, max) {
max-height: 100% !important; max-height: 100% !important;
max-width: 100% !important; max-width: 100% !important;
} }
// width: unset !important;
// max-height: unset !important;
} }
} }
.productImagesGallerySlide { .productImagesGallerySlide {
max-width: 664px !important; max-width: 100% !important;
width: 100% !important; width: 100% !important;
@include mq(md, max) { @include mq(md, max) {
@ -269,7 +268,7 @@
} }
.productImageTag { .productImageTag {
max-width: 664px; max-width: 100%;
@include mq(md, max) { @include mq(md, max) {
max-width: 100%; max-width: 100%;
@ -657,7 +656,6 @@
// DESCRIÇÃO // DESCRIÇÃO
.productDescriptionContainer { .productDescriptionContainer {
width: 100%; width: 100%;
padding-left: 32px;
@include mq(md, max) { @include mq(md, max) {
padding-left: 0; padding-left: 0;

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

@ -1,6 +1,10 @@
.container--structure { .container--structure {
padding: 0 40px; padding: 0 40px;
@include mq(xl, min) {
padding: 0 360px;
}
&::after { &::after {
content: "Você também pode gostar:"; content: "Você também pode gostar:";
display: block; display: block;
@ -19,8 +23,8 @@
:global(.vtex-store-components-3-x-productImageTag--img-description--main) { :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
width: 100% !important; width: 100% !important;
max-height: 632px !important; max-height: 100% !important;
max-width: 632px !important; max-width: 100% !important;
@include mq(md, max) { @include mq(md, max) {
max-width: unset !important; max-width: unset !important;
@ -92,7 +96,7 @@
@include mq(xl, min) { @include mq(xl, min) {
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 26px;
} }
@include mq(md, max) { @include mq(md, max) {
@ -101,7 +105,7 @@
height: fit-content; height: fit-content;
padding: 0 !important; padding: 0 !important;
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 38px;
} }
} }
} }