Desafio 4 M3 Academy #1

Merged
naianfelix merged 11 commits from develop into main 2022-12-19 08:58:14 +00:00
2 changed files with 45 additions and 21 deletions
Showing only changes of commit d29a89b9a8 - Show all commits

View File

@ -9,7 +9,8 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
this.progressBarHTML(); this.progressBarHTML();
await this.progressBarProgress(); this.progressBarProgress();
// this.progressUpdate();
} }
async selectors() { async selectors() {
@ -37,23 +38,40 @@ export default class Header {
} }
} }
// async progressBarProgress() { progressBarProgress() {
// if (this.progressBar && window.innerWidth > 1024) { this.progressUpdate();
// const progressBarList = document.querySelectorAll("#progressBar ul li");
// progressBarList.forEach((li) => { window.addEventListener("hashchange", () => {
// if (window.location.href === "htts://m3academy.myvtex.com/checkout/#/cart") { this.progressUpdate();
// if (li.children[0].children[0].children["progress-bar-circle-1"]) { });
// li.children[0].children[0].children["progress-bar-circle-1"].classList.add( }
// "active"
// ); progressUpdate() {
// } const meuCarrinho = document.querySelector(".progress-bar-circle-1");
// if (li.children[0].children[0].children["progress-bar-circle-2"]) { const dadosPessoais = document.querySelector(".progress-bar-circle-2");
// if ( const pagamento = document.querySelector(".progress-bar-circle-3");
// li.children[0].children[0].children["progress-bar-circle-2"]
// ) switch (location.hash) {
// } case "#/cart":
// } meuCarrinho.classList.add("active");
// }); dadosPessoais.classList.remove("active");
// } pagamento.classList.remove("active");
// }
break;
case "#/profile":
case "#/shipping":
meuCarrinho.classList.remove("active");
dadosPessoais.classList.add("active");
pagamento.classList.remove("active");
break;
case "#/payment":
dadosPessoais.classList.remove("active");
meuCarrinho.classList.remove("active");
pagamento.classList.add("active");
break;
}
}
} }

View File

@ -42,15 +42,21 @@
} }
.progress-bar { .progress-bar {
width: 67%; width: 43.123772102161%;
@include mq(xl, max) { @include mq(xl, max) {
width: 0; width: 0;
} }
@include mq(2xl, min) {
width: 52.6787109375%;
}
.list { .list {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 0;
.central { .central {
width: 33%; width: 33%;
} }