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

feat(Informações do produto e Descrição do produto): Ajusta para telas menores que 1024px

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2023-02-09 13:51:10 -03:00
parent c09ff0ca2f
commit 91632df73c
10 changed files with 202 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,29 @@
[class*="html--quantity-wrapper"] {
[class*='html--quantity-wrapper'] {
display: flex;
align-items: center;
margin-bottom: 16px;
}
[class*="vtex-product-quantity-1-x-quantitySelectorContainer"] {
[class*='vtex-product-quantity-1-x-quantitySelectorContainer'] {
margin: 0;
}
[class*="quantitySelectorTitle"] {
[class*='quantitySelectorTitle'] {
display: none;
}
[class*="vtex-numeric-stepper-container"] {
[class*='vtex-numeric-stepper-container'] {
margin-right: 10px;
height: 49px;
}
[class*="vtex-numeric-stepper__input"],
[class*="vtex-numeric-stepper__plus-button"],
[class*="vtex-numeric-stepper__minus-button"] {
[class*='vtex-numeric-stepper__input'],
[class*='vtex-numeric-stepper__plus-button'],
[class*='vtex-numeric-stepper__minus-button'] {
height: 49px;
}
[class*="vtex-numeric-stepper__input"] {
[class*='vtex-numeric-stepper__input'] {
border: 1px solid #afafaf;
border-right: none;
border-left: none;
@ -31,37 +31,38 @@
font-weight: 400;
font-size: 16px;
line-height: 22px;
width: 44px;
}
[class*="vtex-numeric-stepper__minus-button"] {
[class*='vtex-numeric-stepper__minus-button'] {
border: none;
border: 1px solid #afafaf;
border-radius: 0;
}
[class*="vtex-numeric-stepper__minus-button-container"],
[class*="vtex-numeric-stepper__minus-button__text"] {
[class*='vtex-numeric-stepper__minus-button-container'],
[class*='vtex-numeric-stepper__minus-button__text'] {
border: none;
}
[class*="vtex-numeric-stepper__plus-button"] {
[class*='vtex-numeric-stepper__plus-button'] {
border: none;
border: 1px solid #afafaf;
border-radius: 0;
}
[class*="vtex-numeric-stepper__plus-button-container"],
[class*="vtex-numeric-stepper__plus-button__text"] {
[class*='vtex-numeric-stepper__plus-button-container'],
[class*='vtex-numeric-stepper__plus-button__text'] {
border: none;
}
[class*="vtex-numeric-stepper__plus-button__text"],
[class*="vtex-numeric-stepper__minus-button__text"] {
[class*='vtex-numeric-stepper__plus-button__text'],
[class*='vtex-numeric-stepper__minus-button__text'] {
display: flex;
align-items: center;
color: #000000;
}
[class*="html--buy-button"] {
[class*='html--buy-button'] {
width: 100%;
}

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

@ -154,7 +154,8 @@
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
"paddingBottom": 7,
"blockClass": "conteudo-principal"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
@ -182,8 +183,9 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "51%",
"rowGap": 0
// "width": "52%",
"rowGap": 0,
"blockClass": "conteudo-imagens"
}
},
"flex-layout.row#product-image": {

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

@ -12,6 +12,7 @@
position: relative;
padding: 0;
margin: 0;
gap: 32px;
}
.flexRowContent--container-compra {
@ -23,4 +24,21 @@
.flexRowContent--preco {
margin: 0;
}
.stretchChildrenWidth {
padding: 0;
}
@media screen and (max-width: 1024px) {
.flexRowContent--conteudo-principal {
flex-direction: column;
}
.flexRowContent--conteudo-principal .stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
.flexCol {
position: relative;
}
}

7
styles/css/vtex.product-identifier.css
View File

@ -19,4 +19,11 @@
}
.product-identifier__label, .product-identifier__separator {
display: none;
}
@media screen and (max-width: 1024px) {
.product-identifier {
left: 0;
top: 42px;
}
}

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

@ -153,7 +153,7 @@
.shippingContainer :global(.vtex-input-prefix__group) {
height: 49px;
padding-right: 21px;
padding-right: 23px;
display: flex;
align-items: center;
}
@ -330,6 +330,29 @@
color: #929292;
}
@media screen and (max-width: 1024px) {
.productImageTag {
max-height: 994px !important;
}
.productImagesThumb {
height: auto !important;
width: 90px !important;
margin-right: 16px;
padding-right: 0 !important;
margin-bottom: 0;
}
.figure {
width: 90px;
height: 90px;
}
.productNameContainer {
text-align: left !important;
margin-bottom: 51px !important;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
left: 312px;
}
}
@media screen and (min-width: 1920px) {
.container {
padding: 0 360px;

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

@ -42,4 +42,34 @@
display: flex;
gap: 32px;
padding: 32px 32px 0;
}
@media screen and (max-width: 1024px) {
.container {
padding-top: 0;
}
.container .listContainer {
flex-direction: column;
padding: 16px 0;
border-top: 1px solid #b9b9b9;
gap: 16px;
}
.container .listItem :global(.vtex-button) {
width: 100%;
}
.container .listItem :global(.vtex-button) :global(.vtex-button__label) {
flex-direction: column;
align-items: flex-start;
padding: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.container .listItemActive :global(.vtex-button) {
border-bottom: none !important;
}
}
@media screen and (min-width: 1920px) {
.container {
padding: 16px 360px 0;
}
}

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

@ -2,6 +2,7 @@
position: relative;
padding: 0;
margin: 0;
gap: 32px;
}
.flexRowContent--container-compra {
@ -14,3 +15,26 @@
.flexRowContent--preco {
margin: 0;
}
.stretchChildrenWidth {
padding: 0;
}
// .flexCol--conteudo-imagens {
// width: 98.35% !important;
// }
@media screen and (max-width: 1024px) {
.flexRowContent--conteudo-principal {
flex-direction: column;
.stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}
.flexCol {
position: relative;
}
}

7
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -12,3 +12,10 @@
display: none;
}
}
@media screen and (max-width: 1024px) {
.product-identifier {
left: 0;
top: 42px;
}
}

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

@ -177,7 +177,7 @@
.shippingContainer {
:global(.vtex-input-prefix__group) {
height: 49px;
padding-right: 21px;
padding-right: 23px;
display: flex;
align-items: center;
:global(.vtex-input__suffix) {
@ -386,6 +386,38 @@
color: $color-gray7;
}
@media screen and (max-width: 1024px) {
.productImageTag {
max-height: 994px !important;
}
.productImagesThumb {
height: auto !important;
width: 90px !important;
margin-right: 16px;
padding-right: 0 !important;
margin-bottom: 0;
}
.figure {
width: 90px;
height: 90px;
}
.productNameContainer {
text-align: left !important;
margin-bottom: 51px !important;
}
.shippingContainer {
:global(.vtex-address-form__postalCode) {
:global(.vtex-address-form__postalCode-forgottenURL) {
left: 312px;
}
}
}
}
@media screen and (min-width: 1920px) {
.container {
padding: 0 360px;

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

@ -44,3 +44,39 @@
}
}
}
@media screen and (max-width: 1024px) {
.container {
padding-top: 0;
.listContainer {
flex-direction: column;
padding: 16px 0;
border-top: 1px solid $color-gray11;
gap: 16px;
}
.listItem {
:global(.vtex-button) {
width: 100%;
:global(.vtex-button__label) {
flex-direction: column;
align-items: flex-start;
padding: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
}
.listItemActive {
:global(.vtex-button) {
border-bottom: none !important;
}
}
}
}
@media screen and (min-width: 1920px) {
.container {
padding: 16px 360px 0;
}
}