Vitor_soares/m3-academy-template-checkout-vitor-soares
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona responsividade e funcionalidade na barra de progresso

Browse Source
This commit is contained in:
Vitor Soares 2022-12-14 09:38:59 -03:00
parent f48a1ab079
commit 7dd01fcb4f
2 changed files with 103 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
checkout/src/arquivos/js/components/Header.js
View File

@ -28,12 +28,12 @@ export default class Header {
progress.innerHTML = ''; progress.innerHTML = '';
let progressBarHtml = ` let progressBarHtml = `
<div class="progress__container"> <div class="progress-bar__container">
<div class="progress__wrapper"> <div class="progress-bar__wrapper">
<div class="progress" id="progress"></div> <div class="progress-bar__div" id="progress"></div>
<div class="progress__items"><span>Meu Carrinho</span><div class="progress__circle1"></div></div> <div class="progress-bar__items"><span>Meu Carrinho</span><div class="progress-bar__circle1"></div></div>
<div class="progress__items"><span>Dados Pessoais</span><div class="progress__circle2"></div></div> <div class="progress-bar__items"><span>Dados Pessoais</span><div class="progress-bar__circle2"></div></div>
<div class="progress__items"><span>Pagamento</span><div class="progress__circle3"></div></div> <div class="progress-bar__items"><span>Pagamento</span><div class="progress-bar__circle3"></div></div>
</div> </div>
</div>`; </div>`;
@ -49,14 +49,15 @@ export default class Header {
} }
caseUpdate() { caseUpdate() {
const myCart = document.querySelector(".progress__circle1"); const myCart = document.querySelector(".progress-bar__circle1");
const personalData = document.querySelector(".progress__circle2"); const personalData = document.querySelector(".progress-bar__circle2");
const payment = document.querySelector(".progress__circle3"); const payment = document.querySelector(".progress-bar__circle3");
switch(location.hash) { switch(location.hash) {
case "#/cart": case "#/cart":
myCart.classList.add("active-bar"); myCart.classList.add("active-bar");
personalData.classList.remove("active-bar"); personalData.classList.remove("active-bar");
payment.classList.remove("active-bar");
break break
case "#/email": case "#/email":

168
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -9,6 +9,7 @@
width: 100%; width: 100%;
} }
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
@ -18,84 +19,10 @@
@include mq(md, max) { @include mq(md, max) {
padding: 16px; padding: 16px;
} }
.progress-bar {
@include mq(md, max) {
display: none;
}
.active {
background-color: $color-black-500;
}
.progress__wrapper::before {
content: "";
background: $color-black-500;
position: absolute;
top: 31px;
left: 14px;
height: 1px;
width: 83%;
z-index: -1;
transform: translateY(-50%);
}
.progress__wrapper {
display: flex;
justify-content: space-between;
position: relative;
width: 439px;
.progress__items {
position: relative;
}
span {
display: block;
margin-bottom: 9px;
font-size: 12px;
line-height: 14px;
font-family: $font-family-secundary;
transform: translateX(-40%);
}
}
.progress {
background: $color-black-500;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
.progress__items {
position: relative;
.progress__circle1, .progress__circle2, .progress__circle3 {
background: $color-white-500;
color: $color-black-500;
border-radius: 50%;
height: 12px;
width: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid $color-black-500;
transition: .4s ease;
}
.active-bar {
background: $color-black-500;
}
}
}
} }
&__logo { &__logo {
img { img {
height: 37px; height: 37px;
width: auto; width: auto;
@ -145,3 +72,94 @@
} }
} }
} }
.progress-bar {
@include mq(md, max) {
display: none;
}
&__wrapper::before {
content: "";
background: $color-black-500;
position: absolute;
top: 31px;
left: 14px;
height: 1px;
width: 83%;
z-index: -1;
transform: translateY(-50%);
@include mq(xl, min) {
top: 55px;
width: 87%;
}
}
&__wrapper {
display: flex;
justify-content: space-between;
position: relative;
width: 439px;
@include mq(xl, min) {
width: 1078px;
}
&__items {
position: relative;
}
span {
display: block;
margin-bottom: 9px;
font-size: 12px;
line-height: 14px;
font-family: $font-family-secundary;
transform: translateX(-40%);
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
margin-bottom: 13px;
}
}
}
&__div {
background: $color-black-500;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
&__items {
position: relative;
.progress-bar__circle1, .progress-bar__circle2, .progress-bar__circle3 {
background: $color-white-500;
color: $color-black-500;
border-radius: 50%;
height: 12px;
width: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid $color-black-500;
transition: .4s ease;
@include mq(xl, min) {
height: 24px;
width: 24px;
}
}
.active-bar {
background: $color-black-500;
}
}
}