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() { renderIconCreditCards() {
this.footerIconsCreditCards.innerHTML = ` this.footerIconsCreditCards.innerHTML = `
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" /></span> <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" /></span> <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" />
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" /></span> <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" /></span> <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" /></span> <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" /></span> <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" /></span>`; <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />`;
} }
renderIconVtexPci() { 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() { renderIconsDeveloped() {
this.footerIconsDeveloped.innerHTML = ` 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>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 src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.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.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar"); this.progressBar = await waitElement("#progressBar");
this.footerIconsCreditCard = await waitElement(".footerCheckout__payments");
} }
progressBarHTML() { progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
@ -33,7 +32,9 @@ export default class Header {
<li> <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> <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> </ul>
`; `;
} }

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

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