diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index f9fd29d..a06fcf9 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -63,6 +63,21 @@ export default class Footer { } } + onUpdate() { + //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: + // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver + // 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 config = { childList: true, attributes: true }; + let observer = new MutationObserver((mutations) => { + mutations.forEach(function (mutation) { + console.log(mutation.type); + }); + }); + + observer.observe(target, config); + } + createPrateleira() { if (this.itensShelf) { this.itensShelf.innerHTML = ` @@ -82,7 +97,7 @@ export default class Footer { structure += `
  • -
    +
    ${response.name}
    @@ -140,9 +155,9 @@ export default class Footer { creditCardIconsHTML() { this.creditCardIcons.innerHTML = ` -
  • Mastercard
  • -
  • -
  • American Express
  • +
  • Mastercard
  • +
  • +
  • American Express
  • Elo
  • Hipercard
  • PayPal
  • @@ -154,37 +169,23 @@ export default class Footer { developedByIconsHTML() { this.developedByIcons.innerHTML = ` -
  • -
    +
  • +
    - Powered By + Powered By
  • -
    + -
  • + + `; } - onUpdate() { - //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: - // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver - // 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 config = { childList: true, attributes: true }; - let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); - }); - - observer.observe(target, config); - } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 942e981..67985c7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -753,6 +753,7 @@ max-width: 60px; width: 60px; height: 60px; + object-fit: cover; } span { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index fe8e911..22aeff1 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -12,6 +12,7 @@ color: #000000; margin-bottom: 20px; } + ul.footerCheckout__carrossel-itens { display: flex; list-style: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index fd8a4ce..21ce0c0 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -12,15 +12,12 @@ display: flex; align-items: center; padding: 0 16px; - width: 100%; + width: 98%; justify-content: space-between; + position: fixed; + bottom: 0; - @media (min-width: 1200px) { - width: 100%; - } - - @include mq(md, max) { - margin: 0 0 0 9px; + @include mq(xl, max) { display: grid; } } @@ -69,13 +66,27 @@ justify-self: center; list-style: none; width: 404px; - margin: 16px auto 16px auto; + margin: 0 auto; @include mq(md, max) { align-self: center; margin-bottom: 12px; } + .master, + .visa, + .amex, + .elo, + .hiper, + .paypal, + .boleto { + height: 20px; + } + + .vtex { + height: 33px; + } + &__divider { display: inline-block; background-color: $color-gray4; @@ -98,7 +109,6 @@ display: flex; align-items: center; margin: 0; - margin-bottom: 16px; list-style-type: none; .vtex-logo, @@ -109,10 +119,16 @@ .by-m3 { display: flex; + a { + color: $color-black-100; + } } .by-vtex { display: flex; + a { + color: $color-black-100; + } } .list { @@ -140,7 +156,7 @@ text-decoration: none; span { - margin-right: 8px; + margin-right: 10px; } } }