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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,33 +8,39 @@ export default class Header {
async init() {
await this.selectors();
this.progressBarStructure();
await this.progressBarStructure();
await this.progressBarMove();
}
async selectors() {
// this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
}
progressBarStructure() {
async progressBarStructure() {
if (this.progressBar && window.innerWidth > 1024) {
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>
`
}
@ -48,7 +54,7 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarStages = document.querySelectorAll((".progress-bar__stage"));
const progressBarStages = document.querySelectorAll(".progress-bar__stage");
progressBarStages.forEach((stage) => {

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

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

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

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

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

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

28
checkout/src/template-checkout/checkout-header.html
View File

@ -9,7 +9,33 @@
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
</a>
</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 class="headerCheckout__safeBuy">
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>