From 4da9906cb949571385e85e72b1ca1ce1131d596c Mon Sep 17 00:00:00 2001 From: Saulo Klein Nery Date: Sat, 10 Dec 2022 17:23:16 -0300 Subject: [PATCH] feat: Cria footer desktop --- checkout/src/arquivos/js/components/Footer.js | 100 ++++++++++++++---- .../src/arquivos/sass/checkout/_checkout.scss | 20 +--- .../src/arquivos/sass/partials/_footer.scss | 100 ++++++++++++++---- .../src/arquivos/sass/partials/_header.scss | 11 +- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 5 files changed, 170 insertions(+), 63 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..32147f1 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -6,35 +6,97 @@ export default class Footer { } async init() { + this.imgLinks = "https://agenciamagma.vteximg.com.br/arquivos/"; await this.selectors(); + this.buildIconList(); + this.buildDevelopedByList(); // this.onUpdate(); } async selectors() { + this.footerIconList = await waitElement(".footerCheckout__stamps"); + this.footerDevelopedByList = await waitElement(".footerCheckout__developedBy"); //Para verificar se o carrinho está vazio e remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement - this.checkoutVazio = await waitElement(".empty-cart-content"); + // this.checkoutVazio = await waitElement(".empty-cart-content"); } - 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); - }); - }); + buildIconList() { + Object.values(this.footerIconList.children).forEach((li, index) => { + const child = li.children[0].classList.contains("footerCheckout__payments") + ? li.children[0] + : null; + if (child === null) return; - observer.observe(target, config); - } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, + if (index === 0) + child.innerHTML = ` + + `; + else + child.innerHTML = ` + Certificado VTEX PCI + `; }); } + + buildDevelopedByList() { + Object.values(this.footerDevelopedByList.children).forEach((li, index) => { + const a = li.children[0]; + + if (index === 0) + a.innerHTML = ` + Powered By + Logo VTEX + `; + else + a.innerHTML = ` + Developed By + Logo M3 + `; + }); + } + + // 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); + // } + // async addCarrossel() { + // const elemento = await waitElement("#my-element"); + // $(elemento).slick({ + // slidesToShow: 4, + // slidesToScroll: 1, + // }); + // } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index f1eea2d..97787f4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -3,27 +3,11 @@ @import "./checkout-pagamento"; @import "./checkout-autenticacao"; -html { - height: 100%; - min-height: 100%; -} - -footer .footerCheckout__wrapper { - width: 94.9734%; - margin: auto auto 0 auto; -} -footer .footerCheckout__prateleira, -header { - width: 79.53125%; - margin: 0 auto; +img { + display: block; } body { - display: flex; - flex-direction: column; - min-height: 100% !important; - padding-top: 0 !important; - @include mq(md, max) { padding-left: 0; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index e41b3a5..1f89396 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,47 +1,90 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: #7d7d7d; + border-top: 1px solid $black-500; + padding: 16px 32px; - &__wrapper { - align-items: center; + .container { + width: 100%; display: flex; + align-items: center; justify-content: space-between; + + &::before, + &::after { + content: ""; + display: none; + } } &__address { - color: #7d7d7d; + color: $black-400; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 10px; line-height: 12px; text-transform: capitalize; - max-width: 40%; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; + @include mq(4k, min) { + font-size: 20px; + line-height: 27px; + } + } + + &__payments-list { + list-style-type: none; + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + } + + &__payments-icon { + width: 35px; + margin-right: 13px; + + @include mq(4k, min) { + width: 39px; } } &__stamps { + margin: 0; align-items: center; display: flex; justify-self: center; list-style: none; - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + li { + &:not(:first-of-type), + &:not(:last-of-type) { + height: 24px; + + @include mq(4k, min) { + height: 43px; + display: flex; + align-items: center; + } + } } &__divider { - background-color: #8d8d8d; + background-color: $gray-400; display: inline-block; height: 24px; - margin: 0 8px; + margin: 0 10px 0 0; width: 1px; + + @include mq(4k, min) { + height: 43px; + } + } + } + + &__payments-vtex-icon { + width: 53px; + + @include mq(4k, min) { + width: 103px; } } @@ -52,22 +95,39 @@ margin: 0; li:last-child { - margin-left: 16px; + margin-left: 10px; + } + + li { + a { + img { + height: 16px; + width: auto; + + @include mq(4k, min) { + height: 30px; + } + } + } } a { align-items: center; - color: #7d7d7d; + color: $black-400; display: flex; font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; + font-weight: 400; + font-size: 9px; line-height: 12px; text-decoration: none; + @include mq(4k, min) { + font-size: 18px; + line-height: 25px; + } + span { - margin-right: 8px; + margin-right: 10px; } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index db15af9..b4167ac 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,15 +1,14 @@ /* _header.scss */ .headerCheckout { border-bottom: 1px solid $black-500; - width: 100%; + padding: 29px 131px; + + @include mq(mobile, max) { + padding: 16px; + } .container { width: auto !important; - margin: 29px 131px; - - @include mq(mobile, max) { - margin: 16px; - } } &__wrapper { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index c6f2d7b..3672331 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -9,6 +9,8 @@ $font-family-secundary: "Tenor Sans", sans-serif; $black-400: #292929; $black-500: #000; +$gray-400: #c4c4c4; + $white-500: #fff; /* Grid breakpoints */