feature/header #1

Merged
cainamilech merged 3 commits from feature/header into develop 2022-12-11 02:20:43 +00:00
4 changed files with 273 additions and 4 deletions

View File

@ -29,7 +29,7 @@ export default class Header {
<div class="containerLi div-1"> <div class="containerLi div-1">
<div> <div>
<p class="progress-bar-text">Meu Carrinho</p> <p class="progress-bar-text">Meu Carrinho</p>
<p id="progress-bar-circle-1" class="progress-bar-circle-1 active"></p> <p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
<p class="progress-bar-line-left"></p> <p class="progress-bar-line-left"></p>
</div> </div>
</div> </div>
@ -61,4 +61,208 @@ export default class Header {
this.progressBar.innerHTML = ``; this.progressBar.innerHTML = ``;
} }
} }
async progressBarProgress() {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarLista = document.querySelectorAll("#progressBar ul li");
progressBarLista.forEach((li) => {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
"active"
);
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].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"
) {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
"active"
);
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
}
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
"active"
);
}
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.add("active");
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
}
}
} else if (
window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping"
) {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.add("active");
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
}
}
} else if (window.location.hash == "#/payment") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.add("active");
}
}
});
});
}
}
} }

View File

@ -14,10 +14,16 @@ footer .footerCheckout__wrapper {
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,
header { header {
@include mq(tablet, min) {
width: 79.53125%; width: 79.53125%;
margin: 0 auto; margin: 0 auto;
} }
@include mq(tablet, max) {
margin: 0 16px;
}
}
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -13,6 +13,15 @@
width: 15.2829%; width: 15.2829%;
margin: 29px 0; margin: 29px 0;
@include mq(xxl, min) {
width: 19.2161%;
}
@include mq(tablet, max) {
width: 155.58px;
margin: 16px 0;
}
img { img {
width: 100%; width: 100%;
} }
@ -25,6 +34,17 @@
width: 12px; width: 12px;
height: 15px; height: 15px;
margin-right: 8px; margin-right: 8px;
@include mq(xxl, min) {
width: 29.47px;
height: 41.46px;
margin-right: 7.9px;
}
@include mq(tablet, max) {
width: 12px;
height: 13.33px;
}
} }
span { span {
align-items: center; align-items: center;
@ -36,6 +56,11 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
} }
i { i {
@ -46,8 +71,15 @@
.progress-bar { .progress-bar {
width: 446px; width: 446px;
@include mq(xxl, min) {
width: 1078.86px;
}
@include mq(tablet, max) {
display: none;
}
ul { ul {
border: 1px solid red;
list-style: none; list-style: none;
display: flex; display: flex;
align-items: center; align-items: center;
@ -82,6 +114,12 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
margin-bottom: 9px; margin-bottom: 9px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
margin-bottom: 15px;
}
} }
.progress-bar-line-left, .progress-bar-line-left,
@ -91,16 +129,30 @@
bottom: 5px; bottom: 5px;
height: 1px; height: 1px;
border-top: 1px solid $color-black-500; border-top: 1px solid $color-black-500;
@include mq(xxl, min) {
bottom: 11px;
}
} }
.progress-bar-line-left { .progress-bar-line-left {
left: 26%; left: 26%;
width: 96%; width: 96%;
@include mq(xxl, min) {
left: 21.2%;
width: 434px;
}
} }
.progress-bar-line-right { .progress-bar-line-right {
right: 21%; right: 21%;
width: 100%; width: 100%;
@include mq(xxl, min) {
right: 17.5%;
width: 450px;
}
} }
.active { .active {
@ -115,6 +167,11 @@
height: 12px; height: 12px;
border: 1px solid $color-black-500; border: 1px solid $color-black-500;
border-radius: 50%; border-radius: 50%;
@include mq(xxl, min) {
width: 24px;
height: 24px;
}
} }
} }
} }

View File

@ -27,7 +27,9 @@ $grid-breakpoints: (
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,
tablet: 1025px,
xl: 1200px, xl: 1200px,
xxl: 2500px,
) !default; ) !default;
$z-index: ( $z-index: (