From 44053428023b6d29f48c681c844cf3b6cfeddf1a Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Wed, 14 Dec 2022 16:53:47 -0300 Subject: [PATCH] feat(checkout): Cria footer mobile e desktop --- checkout/src/arquivos/js/components/Footer.js | 42 +++++ .../src/arquivos/sass/checkout/_checkout.scss | 2 +- .../src/arquivos/sass/partials/_footer.scss | 166 ++++++++++++++++-- .../src/arquivos/sass/partials/_header.scss | 15 +- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 5 files changed, 205 insertions(+), 22 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..e5d16cb 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,12 +7,15 @@ export default class Footer { async init() { await this.selectors(); + this.footerIcons(); // this.onUpdate(); } async selectors() { //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.CredicardIcon = await waitElement(".footerCheckout__payments"); + this.vtexPciIcon = await waitElement(".footerCheckout__vtexpci"); this.checkoutVazio = await waitElement(".empty-cart-content"); } @@ -30,6 +33,7 @@ export default class Footer { observer.observe(target, config); } + async addCarrossel() { const elemento = await waitElement("#my-element"); $(elemento).slick({ @@ -37,4 +41,42 @@ export default class Footer { slidesToScroll: 1, }); } + + footerIcons() { + if (this.CredicardIcon) { + this.CredicardIcon.innerHTML = ` +
MasterCard
+
Visa
+
American Express
+
Elo
+
HiperCard
+
Paypal
+
Boleto
+ `; + } + + if (this.vtexPciIcon) { + this.vtexPciIcon.innerHTML = ` +
VTEX PCI Certified
+ `; + } + + const footerDevelopedBy = document.getElementsByClassName("footerCheckout__developedBy"); + + if (footerDevelopedBy) { + const vtexIcon = footerDevelopedBy[0].children[0].children[0]; + const m3Icon = footerDevelopedBy[0].children[1].children[0]; + + vtexIcon.innerHTML = ` + Powered By +
VTEX
+ `; + + m3Icon.innerHTML = ` + Developed By +
M3
+ `; + console.log(m3Icon); + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 093b6c0..00466a1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,7 +9,7 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + width: 100%; margin: auto auto 0 auto; } footer .footerCheckout__prateleira, diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..66b34f5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -3,13 +3,82 @@ border-top: none; color: $color-gray2; + .container { + width: 94.9734%; + display: flex; + align-items: center; + justify-content: center; + padding: 27px 0 24px; + margin: 0; + + @include mq(pg, max) { + align-items: flex-start; + flex-direction: column; + padding: 16px 8px !important; + } + + @include mq(csun, max) { + padding: 16px 0 8px 8px !important; + } + } + &__wrapper { align-items: center; display: flex; + flex-direction: column; justify-content: space-between; + border-top: 1px solid $color-black2; + + @include mq(pg, max) { + align-items: flex-start; + } + } + + &__payments { + display: flex; + + img { + height: 20px; + margin: 0; + margin-right: 13.35px; + max-width: fit-content; + + @include mq(sm, max) { + margin-right: 5.22px; + } + + @include mq(csun, max) { + margin-right: 0; + } + + @include mq(xxl, min) { + height: 39.06px; + } + } + + figure { + margin: 0; + } + } + + &__vtexpci { + img { + height: 33px; + margin: 0; + max-width: fit-content; + } + + ul { + padding: 189px; + } + + figure { + margin: 0; + } } &__address { + width: 33.33%; color: $color-gray2; font-family: $font-family; font-style: normal; @@ -19,37 +88,76 @@ text-transform: capitalize; max-width: 40%; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; + @include mq(pg, max) { + order: 2; + margin: 8px 0 8px; + line-height: 14px; + white-space: nowrap; + color: $color-black; + } + + // @include mq(md, max) { + // margin-bottom: 24px; + // max-width: 100%; + // } + + @include mq(xxl, min) { + font-size: 20px; + line-height: 27px; + text-transform: capitalize; + color: $color-black; } } &__stamps { + width: 33.33%; align-items: center; display: flex; - justify-self: center; + justify-content: center; list-style: none; + margin: 0; - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + @include mq(csyn, max) { + flex-wrap: wrap; } + @include mq(pg, max) { + order: 1; + margin-bottom: 8px; + justify-content: flex-start; + } + + // @include mq(md, max) { + // align-self: center; + // margin-bottom: 12px; + // } + &__divider { background-color: $color-gray4; display: inline-block; height: 24px; margin: 0 8px; width: 1px; + + @include mq(cstm, max) { + margin: 0 10px 0 0; + } } } &__developedBy { + width: 33.33%; align-items: center; display: flex; list-style-type: none; margin: 0; + justify-content: flex-end; + + @include mq(pg, max) { + order: 3; + justify-content: flex-start; + margin-top: 8px; + } li:last-child { margin-left: 16px; @@ -57,17 +165,45 @@ a { align-items: center; - color: $color-gray2; display: flex; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - text-decoration: none; span { - margin-right: 8px; + color: $color-gray2; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 12px; + margin-right: 10.12px; + + @include mq(pg, max) { + font-size: 9px; + line-height: 12px; + white-space: nowrap; + color: $color-black; + } + + @include mq(xxl, min) { + font-size: 18px; + line-height: 25px; + color: $color-black; + } + } + + figure { + margin: 0; + + @include mq(pg, max) { + width: max-content; + } + } + + img { + height: 16px; + + @include mq(xxl, min) { + height: 31.25px; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index e73608d..ef06ada 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,14 +1,17 @@ /* _header.scss */ .headerCheckout { - .container { - width: auto !important; - } + width: 100%; + border-bottom: 1px solid #000; + + // .container { + // width: auto !important; + // } &__wrapper { align-items: center; display: flex; justify-content: space-between; - padding: 29px 131px; - border-bottom: 1px solid $color-black2; + padding: 29px 0; + // border-bottom: 1px solid $color-black2; @include mq(pg, max) { padding: 16px; @@ -115,7 +118,7 @@ &__logo { img { - height: 52px; + height: 37.14px; width: auto; cursor: pointer; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f03a179..056652e 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -23,6 +23,8 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, + csun: 285, + csyn: 355, cstm: 400, sm: 576px, md: 768px, -- 2.34.1