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"] {
display: flex;
gap: 32px;
}
[class*="add-to-cart-button"] {
width: 100%;
}
[class*="html--product-summary"] {
padding: 0 40px;
}
@media only screen and (max-width: 1024px) {
[class*="html--buy-button"] :global(.vtex-button) {
width: 100%;
@ -27,6 +32,7 @@
[class*="description-container"] {
flex-direction: column;
gap: 0;
}
}
@ -44,3 +50,9 @@
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": {
"props": {
"testId": "product-summary-list"
"testId": "product-summary-list",
"blockClass": "product-summary"
},
"children": [
"slider-layout#carousel"

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

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

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

@ -21,7 +21,7 @@
padding: 0 !important;
margin: 0;
width: 100% !important;
max-width: 664px !important;
max-width: unset !important;
}
@media only screen and (max-width: 1025px) {
.stretchChildrenWidth {
@ -37,6 +37,11 @@
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
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) {
padding: 0;

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

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

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

@ -12,16 +12,16 @@
/* Grid breakpoints */
.sliderLayoutContainer {
margin-bottom: 64px;
padding: 0 67px;
padding: 0 16px;
}
@media only screen and (max-width: 1025px) {
.sliderLayoutContainer {
padding: 0 63px;
padding: 0 12px;
}
}
@media only screen and (max-width: 767px) {
.sliderLayoutContainer {
padding: 0 59px;
padding: 0 8px;
margin-bottom: 32px;
}
}
@ -56,33 +56,25 @@
.sliderRightArrow {
visibility: hidden;
padding: 0;
margin: 0;
}
.sliderRightArrow::after {
visibility: visible;
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 {
visibility: hidden;
padding: 0;
margin: 0;
}
.sliderLeftArrow::before {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
padding: 0 0 0 40px;
}
@media only screen and (max-width: 1025px) {
.sliderLeftArrow::before {
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 */
.container {
padding: 0;
max-width: 100% !important;
width: 100%;
}
@media only screen and (min-width: 1920px) {
.container {
@ -72,9 +74,9 @@
.productImage .productImageTag {
width: 100% !important;
height: 100%;
max-height: 664px !important;
max-height: unset !important;
object-fit: contain;
max-width: 664px !important;
max-width: 100% !important;
}
@media only screen and (max-width: 1025px) {
.productImage .productImageTag {
@ -84,7 +86,7 @@
}
.productImagesGallerySlide {
max-width: 664px !important;
max-width: 100% !important;
width: 100% !important;
}
@media only screen and (max-width: 1025px) {
@ -238,7 +240,7 @@
}
.productImageTag {
max-width: 664px;
max-width: 100%;
}
@media only screen and (max-width: 1025px) {
.productImageTag {
@ -560,7 +562,6 @@
.productDescriptionContainer {
width: 100%;
padding-left: 32px;
}
@media only screen and (max-width: 1025px) {
.productDescriptionContainer {

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

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

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

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

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

@ -9,7 +9,7 @@
padding: 0 !important;
margin: 0;
width: 100% !important;
max-width: 664px !important;
max-width: unset !important;
@include mq(md, max) {
max-width: unset !important;
@ -23,6 +23,10 @@
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
padding: 0 40px;
@include mq(xl, min) {
padding: 0 360px;
}
}
: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 {
width: 105%;
height: 314px;
max-height: unset;
max-width: 314px;
object-fit: contain;
@include mq(md, max) {
height: 291.2px;

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

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

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

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

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

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