From e7e7715e6c795723e07899c4a5476454f6016afc Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Mon, 26 Dec 2022 20:50:49 -0300 Subject: [PATCH 1/2] =?UTF-8?q?feat(header):=20criado=20e=20alterado=20est?= =?UTF-8?q?iliza=C3=A7=C3=A3o.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/arquivos/sass/partials/_header.scss | 129 ++++++++++++++++-- 1 file changed, 120 insertions(+), 9 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..db823f6 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,8 +1,18 @@ /* _header.scss */ .headerCheckout { + width: 100%; + border-bottom: 1px solid $color-black2; + .container { width: auto !important; + margin: 0; + padding: 24px 131px; + + @include mq(xl, min) { + padding: 29px 256px; + } } + &__wrapper { align-items: center; display: flex; @@ -11,26 +21,127 @@ &__logo { img { - height: 52px; - width: auto; + width: 155px; + height: 37px; + + @include mq(xl, min) { + width: 382px; + height: 91px; + } } } &__safeBuy { + display: flex; + align-items: center; + span { - align-items: center; - display: flex; + font-weight: 400; + line-height: 16px; text-transform: uppercase; font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 12px; - line-height: 14px; - color: $color-gray; + color: $color-black1; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } } - i { + img { + width: 12px; + height: 14px; margin-right: 8px; + + @include mq(xl, min) { + width: 29px; + height: 41px; + } + } + } + + .progress-bar { + display: flex; + width: 439px; + height: 35px; + justify-content: space-between; + + @include mq(xl, min) { + width: 1078px; + height: 67px; + } + + &__container-items { + list-style: none; + } + + &__container-item { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + + &__circle1, + &__circle2, + &__circle3 { + height: 12px; + width: 12px; + border-radius: 50%; + border: 1px solid $color-black2; + + @include mq(xl, min) { + height: 24px; + width: 24px; + } + } + + &__line1, + &__line2 { + position: absolute; + background-color: $color-black2; + height: 1px; + bottom: 6px; + + @include mq(xl, min) { + bottom: 12px; + } + } + + &__line1 { + left: 59%; + width: 162px; + + @include mq(xl, min) { + width: 437px; + } + } + + &__line2 { + right: 60%; + width: 155px; + + @include mq(xl, min) { + width: 420px; + } + } + + .active { + background-color: $color-black2; + } + + &__text { + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } } } From 565fe07952922be68f7c7f38a061b70dec158820 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Mon, 26 Dec 2022 20:51:04 -0300 Subject: [PATCH 2/2] feat(header): criado e alterado script. --- checkout/src/arquivos/js/components/Header.js | 69 +++++++++++++++++-- 1 file changed, 63 insertions(+), 6 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..dfbc0ad 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -4,18 +4,75 @@ import { waitElement } from "m3-utils"; export default class Header { constructor() { this.init(); + this.criaBarraProgresso(); } async init() { await this.selectors(); - console.log(this.item); + this.monitoraBarraProgresso(); } async selectors() { - this.item = await waitElement("#my-element", { - //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar - timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise - interval: 1000, // vai verificar a cada 1 segundo se o elemento existe - }); + this.barraProgresso = document.querySelector(".progress-bar"); + this.circulo1 = await waitElement(".progress-bar__circle1"); + this.circulo2 = await waitElement(".progress-bar__circle2"); + this.circulo3 = await waitElement(".progress-bar__circle3"); + } + + criaBarraProgresso() { + this.barraProgresso.innerHTML = ` + + + + + + `; + } + + monitoraBarraProgresso() { + setInterval(() => { + if (window.location.hash == "#/cart") { + this.circulo1.classList.add("active"); + this.circulo2.classList.remove("active"); + this.circulo3.classList.remove("active"); + } else if (window.location.hash != "#/cart" && window.location.hash != "#/payment") { + this.circulo1.classList.remove("active"); + this.circulo2.classList.add("active"); + this.circulo3.classList.remove("active"); + } else if (window.location.hash == "#/payment") { + this.circulo1.classList.remove("active"); + this.circulo2.classList.remove("active"); + this.circulo3.classList.add("active"); + } + }, 100); } }