From b7c46985968de54d221abdb8e81016e1acc2f336 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Thu, 15 Dec 2022 23:27:58 -0300 Subject: [PATCH] fix(scss): header funcional com o js e estilizado --- checkout/src/arquivos/js/components/Header.js | 275 ++++++++---------- .../src/arquivos/sass/partials/_header.scss | 108 ++++++- 2 files changed, 219 insertions(+), 164 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 8b17e55..aa48675 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,17 +8,17 @@ export default class Header { async init() { await this.selectors(); - console.log(this.progressBar); this.progressBarHTML(); - await this.barProgress(); + await this.progressBarProgress(); } async selectors() { - this.header = await waitElement(".headerCheckout__wrapper", { + this.header = await waitElement(".headerCheckout", { //#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.progressBar = await waitElement("#progressBar", { //#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 @@ -30,214 +30,167 @@ export default class Header { if (this.progressBar && window.innerWidth > 1024) { this.progressBar.innerHTML = ` - `; + + + + + + + `; } + if (this.progressBar && window.innerWidth <= 1024) { this.progressBar.innerHTML = ``; } } - async barProgress() { + async progressBarProgress() { if (this.progressBar && window.innerWidth > 1024) { - const barList = document.querySelectorAll(".progress-bar ul li"); - barList.forEach((li) => { + const progressBarLista = document.querySelectorAll("#progressBar ul li"); + progressBarLista.forEach((li) => { + // console.log(li) + const liOne = li.children[0].children[1].children["progress-bar-circle-1"]; + const liTwo = li.children[0].children["progress-bar-circle-2"]; + const liThree = li.children[0].children[1].children["progress-bar-circle-3"]; + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { - if (li.children[0].children["progress-bar-circle-1"]) { - li.children[0].children["progress-bar-circle-1"].classList.add("active"); + if (liOne) { + liOne.classList.add("active"); } - if (li.children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children["progress-bar-circle-2"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-2"].classList.remove( - "active" - ); + + if (liTwo) { + if (liTwo.classList.contains("active")) { + liTwo.classList.remove("active"); } } - if (li.children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children["progress-bar-circle-3"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-3"].classList.remove( - "active" - ); + if (liThree) { + if (liThree.classList.contains("active")) { + liThree.classList.remove("active"); } } } else if ( window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" || - window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping" + window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" ) { - if (li.children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children["progress-bar-circle-1"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-1"].classList.remove( - "active" - ); + if (liOne) { + if (liOne.classList.contains("active")) { + liOne.classList.remove("active"); } } - - if (li.children[0].children["progress-bar-circle-2"]) { - li.children[0].children["progress-bar-circle-2"].classList.add("active"); + if (liTwo) { + liTwo.classList.add("active"); } - if (li.children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children["progress-bar-circle-3"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-3"].classList.remove( - "active" - ); + if (liThree) { + if (liThree.classList.contains("active")) { + liThree.classList.remove("active"); } } } else if ( window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" ) { - if (li.children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children["progress-bar-circle-1"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-1"].classList.remove( - "active" - ); + if (liOne) { + if (liOne.classList.contains("active")) { + liOne.classList.remove("active"); } } - if (li.children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children["progress-bar-circle-2"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-2"].classList.remove( - "active" - ); + + if (liTwo) { + if (liTwo.classList.contains("active")) { + liTwo.classList.remove("active"); } } - if (li.children[0].children["progress-bar-circle-3"]) { - li.children[0].children["progress-bar-circle-3"].classList.add("active"); + + if (liThree) { + liThree.classList.add("active"); } } window.addEventListener("hashchange", () => { if (window.location.hash == "#/cart") { - if (li.children[0].children["progress-bar-circle-1"]) { - li.children[0].children["progress-bar-circle-1"].classList.add( - "active" - ); + if (liOne) { + liOne.classList.add("active"); } - if (li.children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children["progress-bar-circle-2"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-2"].classList.remove( - "active" - ); + if (liTwo) { + if (liTwo.classList.contains("active")) { + liTwo.classList.remove("active"); + } } - } - if (li.children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children["progress-bar-circle-3"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-3"].classList.remove( - "active" - ); + if (liThree) { + if (liThree.classList.contains("active")) { + liThree.classList.remove("active"); + } } - } } else if ( - window.location.hash == "#/email" || - window.location.hash == "#/profile" || - window.location.hash == "#/shipping" + window.location.hash === "#/email" || + window.location.hash === "#/profile" || + window.location.hash === "#/shipping" ) { - if (li.children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children["progress-bar-circle-1"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-1"].classList.remove( - "active" - ); + if (liOne) { + if (liOne.classList.contains("active")) { + liOne.classList.remove("active"); } } - - if (li.children[0].children["progress-bar-circle-2"]) { - li.children[0].children["progress-bar-circle-2"].classList.add( - "active" - ); - - } - if (li.children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children["progress-bar-circle-3"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-3"].classList.remove( - "active" - ); + if (liTwo) { + liTwo.classList.add("active"); + } + + if (liThree) { + if (liThree.classList.contains("active")) { + liThree.classList.remove("active"); + } } - } } else if (window.location.hash == "#/payment") { - if (li.children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children["progress-bar-circle-1"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-1"].classList.remove( - "active" - ); + if (liOne) { + if (liOne.classList.contains("active")) { + liOne.classList.remove("active"); } } - if (li.children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children["progress-bar-circle-2"].classList.contains( - "active" - ) - ) { - li.children[0].children["progress-bar-circle-2"].classList.remove( - "active" - ); + + if (liTwo) { + if (liTwo.classList.contains("active")) { + liTwo.classList.remove("active"); } } - if (li.children[0].children["progress-bar-circle-3"]) { - li.children[0].children["progress-bar-circle-3"].classList.add( - "active" - ); + if (liThree) { + liThree.classList.add("active"); } } }); diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..cc8f53f 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -2,7 +2,108 @@ .headerCheckout { .container { width: auto !important; + #progressBar { + width: 439px; + + ul { + list-style-type: none; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + } + + li .containerLi { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + position: relative; + } + + li.central .containerLi { + align-items: center; + margin-left: 7px; + } + + li:last-child .containerLi { + align-items: flex-end; + } + + li .container div { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + li { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: "Tenor Sans"; + font-size: 12px; + font-weight: 400; + line-height: 28px; + color: #000000; + width: 39.9103%; + @media (min-width: 2500px) { + font-size: 24px; + } + } + li.central { + width: auto; + } + li #progress-bar-circle-1, + li #progress-bar-circle-2, + li #progress-bar-circle-3 { + width: 12px; + height: 12px; + border: 1px solid #000000; + border-radius: 50%; + @media (min-width: 2500px) { + width: 24px; + height: 24px; + } + } + + li #progress-bar-circle-1.active, + li #progress-bar-circle-2.active, + li #progress-bar-circle-3.active { + border: none; + background-color: #000000; + } + + li .progress-bar-line-1 { + position: absolute; + left: 25%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid #000000; + } + + li .progress-bar-line-2 { + position: absolute; + right: 21%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid #000000; + } + } + + .active { + background: #000000; + } + } + + &__wrapper { align-items: center; display: flex; @@ -19,17 +120,18 @@ &__safeBuy { span { align-items: center; - display: flex; + text-transform: uppercase; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; + line-height: 15px; color: $color-gray; } - i { + img { + width: 12px; margin-right: 8px; } }