From e9bebeac50e716220a041ac767e3d0e681798ed7 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Sun, 25 Dec 2022 19:11:19 -0300 Subject: [PATCH] fix: corrige aparecimento de titulo quando o carrinho estiver vazio ou nao --- checkout/src/arquivos/js/components/Footer.js | 8 +++ .../sass/checkout/_checkout-autenticacao.scss | 10 +++- .../sass/checkout/_checkout-carrinho.scss | 57 +++++++++++++++++-- .../src/arquivos/sass/checkout/_checkout.scss | 8 +++ checkout/src/arquivos/sass/lib/_slick.scss | 4 +- .../arquivos/sass/partials/_prateleira.scss | 22 +++++-- 6 files changed, 98 insertions(+), 11 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index fd47b66..cc63a08 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -23,6 +23,7 @@ export default class Footer { this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci"); this.footerCheckoutDevelopedBy = await waitElement(".footerCheckout__developedBy"); this.footerCheckoutShelf = await waitElement(".footerCheckout__prateleira"); + this.cartTitle = await waitElement("#cart-title"); @@ -35,20 +36,25 @@ export default class Footer { // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver let target = this.checkoutVazio; + let title = this.cartTitle; let shelf = this.footerCheckoutShelf; let config = { childList: true, attributes: true }; if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" && this.checkoutVazio.style.display == "none") { + title.style.visibility = "initial"; shelf.classList.remove("none"); this.createfooterShelf(); } else { + title.style.visibility = "hidden" shelf.classList.add("none"); } window.addEventListener("hashchange", () => { if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + title.style.visibility = "initial"; shelf.classList.remove("none") this.createfooterShelf(); } else if (window.location.hash != "#/cart") { + title.style.visibility = "hidden" shelf.classList.add("none"); } @@ -58,9 +64,11 @@ export default class Footer { let observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (target.style.display == "none" && window.location.hash == "#/cart") { + title.style.visibility = "initial"; shelf.classList.remove("none"); this.createfooterShelf(); } else { + title.style.visibility = "hidden" shelf.classList.add("none"); } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index afb15df..9af4f1a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1102,7 +1102,8 @@ li.hproduct.item.muted { span.newsletter-text { @media (min-width: 2500px) { - + font-size: 24px; + line-height: 33px; margin-left: 8.05px; } } @@ -1114,6 +1115,13 @@ span.newsletter-text { } } +span.error { + @media (min-width: 2500px) { + font-size: 26px; + line-height: 33px; + } +} + .vtex-omnishipping-1-x-addressFormPart1 small { @media (min-width: 2500px) { font-size: 24px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index cf3ba4e..f8824cc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -106,7 +106,6 @@ #payment-data-submit { background: $color-blue2; - ; border: none; border-radius: 8px; color: $color-white; @@ -116,6 +115,9 @@ margin: 0 auto; @media (min-width: 2500px) { + display: flex; + justify-content: center; + align-items: center; font-size: 28px; line-height: 38px; } @@ -557,11 +559,14 @@ @include mq(md, max) { margin-bottom: 40px; + + @media (max-width:4900px) { + margin-bottom: 0; + } } .srp-pickup-my-location__button { background-color: $color-blue2; - ; border: none; border-radius: 5px; color: $color-white; @@ -575,6 +580,12 @@ line-height: 16px; letter-spacing: 0.05em; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + min-width: 543px; + } + &:hover { background-color: lighten($color-black, 5); } @@ -588,6 +599,10 @@ .srp-toggle { margin: 0 0 34px; + @media (min-width: 2500px) { + min-width: 543px; + } + &__wrapper { background-color: $color-white; border-radius: 100px; @@ -612,6 +627,11 @@ label { width: 50%; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } + &:active { background-color: $color-gray3; } @@ -628,6 +648,11 @@ line-height: 14px; color: $color-black; margin-bottom: 12px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } input { @@ -670,7 +695,7 @@ left: 100%; font-size: 28px; line-height: 38px; - top: 30%; + top: 40%; margin-left: 18.04px; } @@ -721,6 +746,11 @@ left: 0; width: 100%; top: 17px; + + @media (min-width: 2500px) { + font-size: 18px; + line-height: 45px; + } } } } @@ -1051,6 +1081,8 @@ flex-direction: column; width: 343px; + + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); @@ -1063,6 +1095,11 @@ padding-bottom: 50px; } + @media (max-width:1025px) { + margin-bottom: 0; + + } + .link-choose-more-products-wrapper { display: block; text-align: center; @@ -1156,9 +1193,12 @@ display: none; } + } - +.icon-lock:before { + display: none; +} .payment-group-list-btn { margin: 0; @@ -1293,4 +1333,13 @@ i.icon.icon-remove.item-remove-ico { height: 61px; font-size: 28px; } +} + +element.style {} + +.row-fluid .full-cart { + @media (max-width:490px) { + + margin-bottom: 0; + } } \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 3fec6ec..5586edc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -18,6 +18,10 @@ footer .footerCheckout__prateleira, header { width: 79.53125%; margin: 0 auto; + + @media (max-width:1024px) { + width: 98%; + } } body { @@ -53,6 +57,10 @@ body { .container-order-form, .container-cart { width: 80%; + + @media (max-width:1024px) { + width: 100%; + } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index ca85619..3d0130b 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -128,7 +128,7 @@ } @media (max-width: 490px) { - bottom: 45.33% + bottom: 48.33% } } @@ -142,7 +142,7 @@ } @media (max-width: 490px) { - left: 13px; + left: 10px; } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 9f345c2..b611393 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -22,8 +22,8 @@ @media (min-width:2500px) { font-size: 48px; line-height: 76px; - } + } &__list { @@ -35,6 +35,15 @@ gap: 16.94px; } + @media (max-width:490px) { + margin: 0 15px 56px; + } + + @media (min-width:370px) and (max-width:380px) { + + margin: 0 0 56px; + } + .footerCheckout__card { width: 100%; @@ -53,6 +62,10 @@ + + + + .footerCheckout__container { display: flex; @@ -62,6 +75,10 @@ gap: 20px; height: auto; + @media (min-width:370px) and (max-width:380px) { + width: 164px; + } + li, a { @@ -154,9 +171,6 @@ flex-wrap: wrap; min-height: 61px; - &__skuName { - height: 28px; - } } }