fix(header): corrige alinhamento da progressBar e ajusta responsividade do header

This commit is contained in:
Andrea Matsunaga 2022-12-23 14:33:39 -03:00
parent 740079307e
commit 8864c52de5
5 changed files with 178 additions and 61 deletions

View File

@ -8,33 +8,39 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
this.progressBarStructure(); await this.progressBarStructure();
await this.progressBarMove(); await this.progressBarMove();
} }
async selectors() { async selectors() {
// this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar"); this.progressBar = await waitElement("#progressBar");
} }
progressBarStructure() { async progressBarStructure() {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
<ul class="progress-bar__container"> <ul class="progress-bar__container">
<li class="progress-bar__stage"> <div class="progress-bar__stage-wrapper">
<p class="progress-bar__stage--text">Meu carrinho</p> <li class="progress-bar__stage">
<div class="progress-bar__stage--circle" id="progress-bar__cart"></div> <p class="progress-bar__stage--text">Meu carrinho</p>
</li> <div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
</li>
</div>
<li class="progress-bar__stage"> <div class="progress-bar__stage-wrapper">
<p class="progress-bar__stage--text">Dados Pessoais</p> <li class="progress-bar__stage">
<div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div> <p class="progress-bar__stage--text">Dados Pessoais</p>
</li> <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> </ul>
` `
} }
@ -48,7 +54,7 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
const progressBarStages = document.querySelectorAll((".progress-bar__stage")); const progressBarStages = document.querySelectorAll(".progress-bar__stage");
progressBarStages.forEach((stage) => { progressBarStages.forEach((stage) => {

View File

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

View File

@ -1,52 +1,136 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
// position: relative;
margin: 0; margin: 0;
padding: 30px 131px; padding: 29px 131px;
border-bottom: 1px solid $black-500; border-bottom: 1px solid $black-500;
@include mq(xl, min) {
padding: 29px 256px;
}
@include mq(lg, max) {
padding: 16px 16px;
}
.container { .container {
width: auto !important; width: auto !important;
} }
&__wrapper { &__wrapper {
width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: 1fr 43.22% 1fr;
// display: flex;
// justify-content: space-between;
align-items: center; align-items: center;
justify-content: center;
@include mq(xl, min) {
grid-template-columns: 1fr 54.22% 1fr;
}
@include mq(lg, max) {
display: flex;
justify-content: space-between;
}
} }
&__logo { &__logo {
img { img {
height: 37.14px; height: 37.14px;
width: auto; width: 155.58px;
@include mq(xl, min) {
height: 91.2px;
width: 382.07px;
}
@include mq(lg, max) {
height: 33px;
}
@include mq(xs, max) {
width: 114px;
height: auto;
}
} }
} }
.progress-bar { .progress-bar {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
width: 440px;
&__container { &__container {
// position:relative;
margin: 0; margin: 0;
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
// display: flex;
// align-items: center;
// justify-content: space-between;
list-style: none; list-style: none;
} }
&__stage { &__stage-wrapper {
position: relative; position: relative;
display: flex; 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; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -58,6 +142,12 @@
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 12px; font-size: 12px;
color: $black-500; color: $black-500;
@include mq(xl, min) {
margin-bottom: 15px;
line-height: 28px;
font-size: 24px;
}
} }
&--circle { &--circle {
@ -69,29 +159,11 @@
&.active { &.active {
background: $black-500; background: $black-500;
} }
}
&::before, @include mq(xl, min) {
&::after { width: 24px;
content: ''; height: 24px;
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;
} }
} }
} }
@ -105,6 +177,15 @@
img { img {
width: 12px; width: 12px;
height: 15px; height: 15px;
@include mq(xl, min) {
width: 29.47px;
height: 41.46px;
}
@include mq(lg, max) {
height: 13.33px;
}
} }
span { span {
@ -113,6 +194,11 @@
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
color: $black-300; color: $black-300;
@include mq(xl, min) {
line-height: 33px;
font-size: 24px;
}
} }
} }
} }

View File

@ -22,12 +22,12 @@ $color-green: #4caf50;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 375px,
cstm: 400, cstm: 400,
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 1025px,
xl: 1200px xl: 2500px
) !default; ) !default;
$z-index: ( $z-index: (

View File

@ -9,7 +9,33 @@
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
</a> </a>
</div> </div>
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso <div id="progressBar" class="progress-bar">
Aqui entra a barra de progresso
<ul class="progress-bar__container">
<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>
<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>
</ul>
</div> </div>
<div class="headerCheckout__safeBuy"> <div class="headerCheckout__safeBuy">
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>