From 94114ce2ba8e85d101306aad3d4cfa8908d46199 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Thu, 15 Dec 2022 00:42:10 -0300 Subject: [PATCH] feat(checkout-empty): created initial styles for medium,small devices --- checkout/src/arquivos/js/components/Footer.js | 38 ++++-- .../sass/checkout/_checkout-vazio.scss | 120 +++++++++++++++--- .../src/arquivos/sass/checkout/_checkout.scss | 6 - .../src/arquivos/sass/partials/_header.scss | 11 ++ .../src/arquivos/sass/utils/_variaveis.scss | 2 +- 5 files changed, 141 insertions(+), 36 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 71e1d38..398d48f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -15,15 +15,16 @@ export default class Footer { await this.selectors(); this.innerToPayments(); this.innerDevelopedBy(); - // this.onUpdate(); + 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.checkoutVazio = await waitElement(".empty-cart-content"); + this.checkoutEmpty = await waitElement(".empty-cart-content"); this.paymentContainer = await waitElement(".footerCheckout__stamps"); this.developedByContainer = await waitElement(".footerCheckout__developedBy"); + this.checkoutContainer = await waitElement(".container-main"); } innerToPayments() { @@ -83,15 +84,32 @@ export default class Footer { //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); + if (this.checkoutEmpty && this.checkoutContainer) { + if (this.checkoutContainer.classList.contains("container-cart-fill")) { + this.checkoutContainer.classList.remove("container-cart-fill"); + } else { + this.checkoutContainer.classList.add("container-cart-fill"); + } + + let target = this.checkoutEmpty; + let config = { childList: true, attributes: true }; + let observer = new MutationObserver((mutations) => { + for (let i = 0; i < mutations.length; i++) { + if (mutations[i].attributeName === "style") { + if (this.checkoutContainer.classList.contains("container-cart-fill")) { + this.checkoutContainer.classList.remove("container-cart-fill"); + } else { + this.checkoutContainer.classList.add("container-cart-fill"); + } + + break; + } + } + }); + + observer.observe(target, config); + } } async addCarrossel() { const elemento = await waitElement("#my-element"); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 9b0258b..eae28f7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,34 +1,116 @@ +@mixin btn-secondary { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid $clr-common-black; + border-radius: 0; + font-weight: 400; + font-family: $font-family-200; + color: $clr-common-black; + background-color: $clr-common-white; +} + +.container-cart { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + #cart-title { + display: none !important; + } + .cart-template, + .checkout-container { + min-height: auto; + } + + .checkout-container { + padding: 0 16px; + } + + .cart-template { + margin: 0; + } + + @media screen and (min-width: 375px) { + .checkout-container { + width: fluid(300px, 375px); + margin: 0 auto; + } + + .link-choose-products { + width: fluid(250px, 300px); + max-width: 250px; + margin: 0 auto; + } + } + + @media screen and (min-width: 1025px) { + .checkout-container { + width: fluid(400px, 1280px); + padding: 0; + } + + .link-choose-products { + width: fluid(327px, 400px); + max-width: none; + } + } +} + +.empty-cart { + &-message { + display: none; + } +} + .empty-cart { font-family: $font-family-100; &-content { color: $clr-gray-600; text-align: center; - @include mq(md, max) { - padding: 0 16px; - } - } + .empty-cart-title { + font-size: 0px; - &-title { - font-size: 20px; + &::before { + content: "Seu carrinho está vazio."; + text-align: center; + font-size: 18px; + text-transform: uppercase; + } + } + + @media screen and (min-width: 1024px) { + padding: 0; + } + + @media screen and (min-width: 1280px) { + .empty-cart-title { + &::before { + font-size: 24px; + } + } + } } &-links { .link-choose-products { - background: $clr-gray-600; - border: none; - border-radius: 5px; + @include btn-secondary(); transition: ease-in 0.22s all; - outline: none; - font-family: $font-family-100; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $clr-common-white; - text-transform: uppercase; + font-size: 0px; + padding: 16px 0; + + &::before { + content: "Continuar Comprando"; + font-size: 14px; + font-style: normal; + line-height: 16px; + letter-spacing: 0.05em; + text-transform: uppercase; + } &:hover { background: lighten($clr-gray-600, 5); diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index e54b94b..50d09aa 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -3,8 +3,6 @@ @import "./checkout-pagamento"; @import "./checkout-autenticacao"; - - body { display: flex; flex-direction: column; @@ -34,10 +32,6 @@ body { padding-left: 0; } } - .container-order-form, - .container-cart { - width: 80%; - } } .btn-success { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8a7f5f4..741b5b4 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,4 +1,15 @@ /* _header.scss */ +body { + margin: 0; + padding: 0; +} + +body * { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body :where(ul, li, ol) { list-style: none; margin: 0; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 9577752..7f541c2 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -27,7 +27,7 @@ $grid-breakpoints: ( xs: 280, sm: 375px, md: 600px, - lg: 1024px, + lg: 1025px, xl: 1280px, xxl: 2500px, ) !default;