From 5c4205d6285b83f84c094ac2084817b439259193 Mon Sep 17 00:00:00 2001 From: Caroline Moran Date: Fri, 16 Dec 2022 14:59:39 -0400 Subject: [PATCH] fix: ajustes no footer --- checkout/src/arquivos/js/components/Footer.js | 8 ++- .../sass/checkout/_checkout-carrinho.scss | 11 +++- .../src/arquivos/sass/checkout/_checkout.scss | 39 ++++++++---- .../src/arquivos/sass/partials/_footer.scss | 63 +++++++++++++++++-- 4 files changed, 99 insertions(+), 22 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index cf245ce..9a47a16 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,9 +7,10 @@ export default class Footer { async init() { await this.selectors(); + this.onUpdateReload(); this.onUpdate(); - // document.addEventListener("onload", this.onUpdate.bind(this)); await this.footerItens(); + this.body.onresize = this.onUpdate(); } async selectors() { @@ -24,6 +25,7 @@ export default class Footer { this.checkoutVazio.style.display == "none" ) { this.prateleiraHTML(); + checkoutVazioTitle.style.display = "block"; } if (this.checkoutVazio.style.display === "block") { @@ -32,7 +34,6 @@ export default class Footer { } } onUpdate() { - this.onUpdateReload(); let observer = new MutationObserver((mutations) => { mutations.forEach((mutationRecord) => { console.log(mutationRecord); @@ -107,8 +108,9 @@ export default class Footer { infinite: false, }, }, + { - breakpoint: 601, + breakpoint: 769, settings: { slidesToShow: 2, slidesToScroll: 1, diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 614f590..d210dce 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -108,6 +108,9 @@ } .cart-items { + .product { + width: auto; + } .product-item { padding: 16px 0; } @@ -769,12 +772,12 @@ padding: 0 16px; width: calc(100% - 32px); float: none; - margin-bottom: 50px; + // margin-bottom: 50px; } @include mq(md, min) { margin: 0; - padding-bottom: 50px; + padding-bottom: 13px; } .link-choose-more-products-wrapper { @@ -865,3 +868,7 @@ } } } + +.cart-template.full-cart { + margin-bottom: 0; +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 76d2de6..62d633d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -20,7 +20,6 @@ header { border-bottom: 1px solid #000; } -footer .footerCheckout__prateleira, .headerCheckout .container { width: 79.53125%; margin: 0 auto; @@ -30,9 +29,23 @@ footer .footerCheckout__prateleira, } footer .footerCheckout__prateleira { width: 79.375%; + margin: 0 auto; + min-width: 1016px; + @media (min-width: 2500px) { + width: 79.76%; + max-width: 1994px; + } + @media (min-width: 1280px) { + width: 79.76%; + max-width: 1016px; + } @media (max-width: 1024px) { - width: auto; - padding: 0 16px; + width: 96.77%; + min-width: unset; + } + @media (max-width: 490px) { + width: 91.73%; + min-width: 344; } } body { @@ -71,6 +84,9 @@ body { .container-order-form, .container-cart { width: 80%; + @media (max-width: 490px) { + width: auto; + } } } @@ -89,18 +105,15 @@ body { #cart-title, #orderform-title { - color: $color-gray2; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + letter-spacing: 0.05em; text-transform: uppercase; - - @include mq(md, max) { - margin-left: 30px; - } + color: #292929; } .dropdown { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 485eae0..ac73a9c 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -7,6 +7,7 @@ display: flex; justify-content: center; flex-direction: column; + h3 { font-family: $font-family-secundary; font-style: normal; @@ -15,10 +16,20 @@ line-height: 38px; text-align: center; color: #000000; + margin-top: 0; + margin-bottom: 0; @media (min-width: 2500px) { font-size: 48px; line-height: 76px; } + @media (max-width: 1024px) { + font-size: 24px; + line-height: 38px; + } + @media (max-width: 490px) { + font-size: 14px; + line-height: 28px; + } } ul { margin: 0; @@ -41,21 +52,30 @@ &__produto { width: 242px !important; @media (min-width: 2500px) { - width: 488.07px !important; + width: 485.07px !important; } @media (max-width: 1024px) { width: 320px !important; } @media (max-width: 600px) { + width: 230px !important; + } + @media (max-width: 490px) { width: 164px !important; } + @media (max-width: 360px) { + width: 256px !important; + } ul { display: flex; align-items: center; justify-content: center; flex-direction: column; - gap: 20px; + row-gap: 20px; + @media (min-width: 2500px) { + row-gap: unset; + } .name { font-family: $font-family; font-style: normal; @@ -67,13 +87,19 @@ @media (min-width: 2500px) { font-size: 26px; line-height: 35px; + margin-top: 21.95px; + margin-bottom: 20px; } } .skus { display: flex; align-items: center; justify-content: center; - gap: 5px; + column-gap: 5px; + @media (min-width: 2500px) { + min-height: 45px; + margin-bottom: 20px; + } @media (max-width: 600px) { width: 92%; min-height: 61px; @@ -117,7 +143,13 @@ width: 100%; text-align: center; text-transform: uppercase; - padding: 12px 0; + height: 42px; + display: flex; + align-items: center; + justify-content: center; + @media (min-width: 2500px) { + height: 59px; + } } } } @@ -163,6 +195,9 @@ order: 2; width: 100%; } + @media (max-width: 360px) { + font-size: 9px; + } } &__stamps { @@ -173,6 +208,7 @@ width: 33%; margin: 0; @media (max-width: 1024px) { + justify-content: flex-start; width: 100%; order: 1; } @@ -191,12 +227,19 @@ margin: 0 10px 0 4.37px; height: 24px; } + @media (max-width: 360px) { + height: 18px; + margin: 0 2px; + } } } &__vtexpci { figure { width: 53px; + @media (max-width: 360px) { + width: 44px; + } img { width: 100%; } @@ -221,6 +264,9 @@ @media (max-width: 1024px) { gap: 5px; } + @media (max-width: 360px) { + gap: 2px; + } li { width: auto; } @@ -229,18 +275,27 @@ @media (min-width: 2500px) { width: 67.93px; } + @media (max-width: 360px) { + width: 28px; + } } figure.pequeno { width: 35.65px; @media (min-width: 2500px) { width: 69.63px; } + @media (max-width: 360px) { + width: 29px; + } } figure.medio { width: 36.52px; @media (min-width: 2500px) { width: 71.33px; } + @media (max-width: 360px) { + width: 30px; + } } }