SavioCarvalhoMoraes/m3-academy-template-checkout-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(footer): Alinhar o footer

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2022-12-14 18:26:51 -03:00
parent 007cf8b13c
commit 98efe6486d
3 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
checkout/src/arquivos/js/components/Footer.js
View File

@ -65,22 +65,22 @@ export default class Footer {
renderIconCreditCards() {
this.footerIconsCreditCards.innerHTML = `
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" /></span>`;
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />`;
}
renderIconVtexPci() {
this.footerIconVtexPci.innerHTML = `<span><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" /></span>`;
this.footerIconVtexPci.innerHTML = `<img class="IconVtexImg" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" />`;
}
renderIconsDeveloped() {
this.footerIconsDeveloped.innerHTML = `
<li><a href="https://vtex.com/br-pt/"><span>Powered By</span><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/> </a></li>
<li><a href="https://vtex.com/br-pt/"><span>Developed By</span><img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/> </a></li>`;
<li><a href="https://vtex.com/br-pt/"><span>Powered By</span><img class="iconDevV" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/> </a></li>
<li><a href="https://vtex.com/br-pt/"><span>Developed By</span><img class="iconDeveLM3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/> </a></li>`;
}
}

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

@ -22,7 +22,6 @@ export default class Header {
});*/
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
this.footerIconsCreditCard = await waitElement(".footerCheckout__payments");
}
progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) {
@ -33,7 +32,9 @@ export default class Header {
<li>
<div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
<li><div class="containerLi><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p><p id="progress-bar-line-2" class="progress-bar-line-2"></p></div></div></li>
<li>
<div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p id="progress-bar-line-2" class="progress-bar-line-2"></p></div></div> </li>
</ul>
`;
}

29
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -1,5 +1,8 @@
/* _footer.scss */
.footerCheckout {
width: 100%;
display: flex;
flex-direction: column;
border-top: none;
color: $color-gray2;
@ -8,7 +11,10 @@
display: flex;
justify-content: space-between;
}
.container {
display: flex;
flex-direction: row;
}
&__address {
color: $color-gray2;
font-family: $font-family;
@ -26,11 +32,13 @@
}
&__stamps {
width: 31.56%;
align-items: center;
display: flex;
justify-self: center;
list-style: none;
flex-direction: row;
margin: 0;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
@ -43,9 +51,20 @@
margin: 0 8px;
width: 1px;
}
&__payments {
display: flex;
flex-direction: row;
}
.IconCredImg {
width: 12.25%;
}
.IconVtexImg {
width: 87%;
}
}
&__developedBy {
width: 18.6%;
align-items: center;
display: flex;
list-style-type: none;
@ -69,6 +88,12 @@
span {
margin-right: 8px;
}
.iconDevV {
width: 19.65%;
}
.iconDeveLM3 {
width: 15.65%;
}
}
}
}