From 1853b3d2e302561dc00a649c82db598e927f82a3 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 21 Dec 2022 08:31:44 -0300 Subject: [PATCH] feat: adiciona css checkout dados pessoais 1024px --- checkout/src/arquivos/js/components/Footer.js | 21 +-- .../sass/checkout/_checkout-autenticacao.scss | 22 +++- .../sass/checkout/_checkout-carrinho.scss | 22 ++-- .../sass/checkout/_checkout-pagamento.scss | 124 +++++++++++++++++- checkout/src/arquivos/sass/lib/_slick.scss | 2 + .../src/arquivos/sass/partials/_footer.scss | 8 ++ 6 files changed, 175 insertions(+), 24 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 77b6c85..4e860da 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,17 +8,17 @@ export default class Footer { async init() { this.list = await this.fetchApiData(); await this.selectors(); + this.events(); this.cartTitle = await waitElement("#cart-title"); if (window.location.hash === "#/cart") { await this.cartUpdate(); } this.emptyButton = await waitElement(".link-choose-products"); - this.paymentsMethods = await waitElement(".footerCheckout__payments"); - this.certification = await waitElement(".footerCheckout__vtexpci"); this.emptyCartButton(); + this.paymentsMethods = await waitElement(".footerCheckout__payments"); this.addPaymentsMethodsIcons(); + this.certification = await waitElement(".footerCheckout__vtexpci"); this.addCertificationIcon(); - this.events(); this.items = await waitElement(".footerCheckout__prateleira-container"); await this.renderItems(); await this.addCarrossel(); @@ -39,7 +39,6 @@ export default class Footer { events() { window.addEventListener("hashchange", this.outPrateleira.bind(this)); - window.addEventListener("resize", this.onRisize.bind(this)); } async cartUpdate() { @@ -176,12 +175,6 @@ export default class Footer { `; } - async onRisize(e) { - const windowSize = e.target.innerWidth; - - console.log(windowSize); - } - async addCarrossel() { const elemento = await waitElement(".footerCheckout__prateleira-container"); $(elemento).slick({ @@ -192,6 +185,14 @@ export default class Footer { "", nextArrow: "", + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + }, + }, + ], }); } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 4485c48..e883986 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -80,7 +80,7 @@ width: 54.883%; @media (max-width: 1024px) { - width: 97% !important; + width: 96.875% !important; } input { @@ -128,6 +128,10 @@ width: 12.762%; } + @media (max-width: 900px) { + font-size: 8px; + } + @media (max-width: 490px) { height: 48px; margin: 0; @@ -149,7 +153,7 @@ border: 1px solid $color-black; border-radius: 5px; margin-top: 10px; - width: 35.743%; + width: 366px; @media (min-width: 1025px) and (max-width: 1026px) { margin-top: 0; @@ -157,7 +161,7 @@ } @media (max-width: 1024px) { - width: 30.177%; + width: 343px; } h3 { @@ -204,6 +208,16 @@ border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; + width: 90.052%; + + @media (max-width: 1024px) { + width: 293.77%; + margin-left: 16px; + } + + @media (max-width: 767px) { + width: 141.5%; + } // .accordion-heading { // span { @@ -253,7 +267,7 @@ color: $color-gray9; font-family: "Open Sans"; font-style: normal; - font-weight: 700; + font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0.05em; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 9a9f90a..4007ad2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -74,6 +74,8 @@ display: flex; align-items: center; color: $color-black; + display: flex; + justify-content: space-between; &:not(:first-child) { margin-top: 8px; @@ -233,11 +235,8 @@ @media (max-width: 1024px) { position: absolute; - top: 0; - } - - @include mq(lg, max) { - width: 250px; + margin-left: 65px; + width: 15%; } a { @@ -379,6 +378,11 @@ @media (max-width: 1024px) { margin: 28px 0 0 16px; + width: 11% !important; + } + + @media (max-width: 750px) { + width: 15% !important; } @media (max-width: 490px) { @@ -396,9 +400,9 @@ color: $color-gray2; box-shadow: none; - @include mq(lg, max) { - width: 24px !important; - } + // @include mq(lg, max) { + // width: 24px !important; + // } } .icon-plus-sign { @@ -429,7 +433,7 @@ .item-quantity-change { @media (max-width: 979px) and (min-width: 768px) { - position: inherit; + position: relative; bottom: inherit; left: inherit; height: inherit; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index baf2901..7dcb0fd 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -7,6 +7,11 @@ body .container-main.container-order-form .orderform-template.active { border: 1px solid $color-gray5; border-radius: 8px; + @media (max-width: 1024px) { + width: 98.413%; + margin-left: 16px; + } + .description { margin: 0 !important; width: 90px; @@ -21,7 +26,7 @@ body .container-main.container-order-form .orderform-template.active { .url { height: 60px; - width: 78.93px; + width: 60px; margin-right: 7px; img { @@ -33,6 +38,117 @@ body .container-main.container-order-form .orderform-template.active { .orderform-template-holder { width: 66.1132%; + .row-fluid { + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } + + .client-email { + @media (max-width: 767px) { + width: 102%; + } + + #client-email { + width: 95.67%; + + @media (max-width: 1024px) { + width: 98.54%; + } + + @media (max-width: 767px) { + max-width: 100% !important; + height: 42px !important; + } + } + } + + .client-first-name { + width: 50%; + margin: 0; + @media (max-width: 1024px) { + } + + #client-first-name { + width: 85.87%; + @media (max-width: 1024px) { + width: 95.512%; + } + } + } + + .client-last-name { + width: 50%; + + label { + margin-left: 10px; + } + + @media (max-width: 1024px) { + } + + #client-last-name { + width: 85.87%; + margin-left: 8px; + @media (max-width: 1024px) { + width: 95.512%; + margin-left: 7px; + } + } + } + + .client-document { + width: 50%; + margin-right: 0; + + @media (max-width: 1024px) { + margin: 0; + } + + #client-document { + width: 86.585%; + + @media (max-width: 1024px) { + width: 95.512%; + margin-bottom: 0; + } + } + } + + .client-phone { + width: 50%; + + @media (max-width: 1024px) { + margin: 0; + } + + label { + margin-left: 10px; + } + + #client-phone { + width: 85.87%; + margin-left: 8px; + + @media (max-width: 1024px) { + width: 95.512%; + margin-bottom: 0; + } + } + } + + #shipping-data { + margin: 0; + } + + #payment-data { + margin: 0; + .step { + margin-bottom: 17px; + } + } + } + .client-profile-data { .accordion-group { .accordion-heading { @@ -169,4 +285,10 @@ body .container-main.container-order-form .orderform-template.active { color: $color-gray2; } } + + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + padding-right: 16px; + } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index a1ffcd7..32c0d08 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -132,6 +132,7 @@ @media (max-width: 1024px) { left: 2.5%; + top: 48%; } } .slick-next { @@ -147,6 +148,7 @@ @media (max-width: 1024px) { left: 96.5%; + top: 48%; } } .slick-arrow.slick-hidden { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 88fdf04..7583f8d 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -82,6 +82,10 @@ @media (min-width: 1025px) and (max-width: 1107px) { font-size: 11.5px; } + + @media (min-width: 600px) and (max-width: 690px) { + font-size: 10.5px; + } } &__sku { @@ -113,6 +117,10 @@ @media (min-width: 1025px) and (max-width: 1107px) { font-size: 9.7px; } + + @media (min-width: 600px) and (max-width: 714px) { + font-size: 8.5px; + } } }