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

feat: adicionando css a header da pagina

Browse Source
This commit is contained in:
PATRICK DE SOUZA SILVA 2022-12-15 20:03:08 -03:00
parent eb0cdf0455
commit aa96543ca6
2 changed files with 81 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,11 +18,15 @@ export default class Header {
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
this.document = $(document);
this.window = $(window);
}
events() {
this.document.ready(() => {
this.createProgressBar();
});
this.window.on("hashchange", () => {
this.isActive();
});
}
createProgressBar() {
@ -40,7 +44,17 @@ export default class Header {
<span class="progress-bar__status payment"></span>
</div>
`;
console.log(this.progressBar);
this.progressBar.innerHTML = progressBar;
this.isActive();
}
isActive() {
$(`.progress-bar__status.active`).removeClass("active");
const hash = window.location.hash.replace("#/", "");
$(`.progress-bar__status.${hash}`).addClass("active");
console.log(`.progress-bar__status .${hash}`);
if (hash === "email" || hash === "shipping") {
$(`.progress-bar__status.profile`).addClass("active");
}
}
}

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

@ -10,13 +10,20 @@
}
&__logo {
min-width: 382px;
img {
height: 52px;
width: auto;
height: auto;
width: 100%;
}
a {
width: 100%;
display: block;
}
}
&__safeBuy {
display: flex;
min-width: 235px;
span {
align-items: center;
display: flex;
@ -29,7 +36,7 @@
color: $color-gray;
}
i {
img {
margin-right: 8px;
}
}
@ -37,13 +44,64 @@
.progress-bar {
display: flex;
width: 100%;
justify-content: space-between;
margin: 0px 219px 0px 73px;
&__title {
margin-bottom: 15px;
}
&__wrapper {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
position: relative;
&:not(:first-child, :last-child) {
&::before {
content: "";
width: 50%;
height: 1px;
background: #000000;
position: absolute;
left: 0;
top: 77%;
z-index: -1;
}
&::after {
content: "";
width: 50%;
height: 1px;
background: #000000;
position: absolute;
right: 0;
top: 77%;
z-index: -1;
}
}
&:last-child {
&::before {
content: "";
width: 50%;
height: 1px;
background: #000000;
position: absolute;
left: 0;
top: 77%;
z-index: -1;
}
}
&:first-child {
&::after {
content: "";
width: 50%;
height: 1px;
background: #000000;
position: absolute;
right: 0;
top: 77%;
z-index: -1;
}
}
}
&__status {
@ -51,10 +109,14 @@
height: 24px;
border: 1px solid #000000;
border-radius: 50%;
z-index: 1;
background: #ffffff;
&.cart {
padding: 0;
margin: 0;
}
&.active {
background: #000000;
}
}
}