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

Merge branch 'feature/header' into development

Browse Source
This commit is contained in:
Andrea Matsunaga 2022-12-23 14:43:00 -03:00
commit 8d2a436841
4 changed files with 101 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,38 +7,41 @@ export default class Header {
}
async init() {
console.log("entrou no init do header")
await this.selectors();
await this.progressBarStructure();
await this.progressBarMove();
}
async selectors() {
// this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
console.log("progressBar await element")
}
async progressBarStructure() {
if (this.progressBar && window.innerWidth > 1024) {
console.log("entrou no if do progressBarStructure")
this.progressBar.innerHTML = `
<ul class="progress-bar__container">
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Meu carrinho</p>
<div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
</li>
<div class="progress-bar__stage-wrapper">
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Meu carrinho</p>
<div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
</li>
</div>
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Dados Pessoais</p>
<div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
</li>
<div class="progress-bar__stage-wrapper">
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Dados Pessoais</p>
<div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
</li>
</div>
<div class="progress-bar__stage-wrapper">
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Pagamento</p>
<div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
</li>
</div>
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Pagamento</p>
<div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
</li>
</ul>
`
}
@ -52,8 +55,6 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) {
console.log("entrou no if do progressBarMove")
const progressBarStages = document.querySelectorAll(".progress-bar__stage");
progressBarStages.forEach((stage) => {

3
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -16,8 +16,7 @@ footer .footerCheckout__wrapper {
width: 100%;
// margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {
footer .footerCheckout__prateleira {
width: 79.53125%;
margin: 0 auto;
}

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

@ -1,17 +1,15 @@
/* _header.scss */
.headerCheckout {
// position: relative;
margin: 0;
padding: 30px 131px;
width: 100%;
padding: 29px 131px;
border-bottom: 1px solid $black-500;
@include mq(xl, min) {
padding: 30px 256px;
padding: 29px 256px;
}
@include mq(lg, max) {
padding: 16px 16px;
padding: 16px;
}
.container {
@ -19,15 +17,14 @@
}
&__wrapper {
width: 100%;
display: grid;
grid-template-columns: 1fr 43.22% 1fr;
//repeat(3, 1fr);
// display: flex;
// justify-content: space-between;
align-items: center;
justify-content: center;
@include mq(xl, min) {
grid-template-columns: 1fr 54.27% 1fr;
grid-template-columns: 1fr 54.22% 1fr;
}
@include mq(lg, max) {
@ -38,42 +35,102 @@
&__logo {
img {
width: 155.58px;
height: 37.14px;
width: auto;
@include mq(xl, min) {
width: 382.07px;
height: 91.2px;
}
@include mq(lg, max) {
height: 32.12px;
height: 33px;
}
@include mq(xs, max) {
width: 114px;
height: auto;
}
}
}
.progress-bar {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// width: 43.22%; //440px;
&__container {
// position:relative;
margin: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
// display: flex;
// align-items: center;
// justify-content: space-between;
list-style: none;
}
&__stage {
&__stage-wrapper {
position: relative;
display: flex;
&::before,
&::after {
content: "";
position: absolute;
bottom: 6.5px;
height: 1px;
background: $black-500;
@include mq(xl, min) {
bottom: 12.5px;
}
}
&:nth-child(1) {
justify-content: flex-start;
&::after{
width: calc(100% - 45.23px);//68.81%;
right: 0;
@include mq(xl, min) {
width: calc(100% - 89.965px);//77.63%;
}
}
};
&:nth-child(2) {
justify-content: center;
&::before,
&::after {
width: calc(50% - 7px);
@include mq(xl, min) {
width: calc(50% - 13px);
}
}
&::before {
left: 0;
}
&::after{
right: 0;
}
};
&:nth-child(3) {
justify-content: flex-end;
&::before{
width: calc(100% - 38.315px);//73.54%;
left: 0;
@include mq(xl, min) {
width: calc(100% - 76.125px); //81.05%;
}
}
};
};
&__stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@ -89,6 +146,7 @@
color: $black-500;
@include mq(xl, min) {
margin-bottom: 15px;
line-height: 28px;
font-size: 24px;
}
@ -109,29 +167,6 @@
height: 24px;
}
}
&::before,
&::after {
content: '';
position: absolute;
bottom: 6.5px;
width: calc(50% - 7px);
height: 1px;
background: $black-500;
}
&::before {
left: 0;
}
&::after{
left: calc(50% + 7px);
}
&:first-child::before,
&:last-child::after {
display: none;
}
}
}

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -30,7 +30,7 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
xs: 375px,
cstm: 400,
sm: 576px,
md: 768px,