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

feature/optimization #1

Merged
josecarloslins merged 16 commits from feature/optimization into main 2022-12-17 01:38:19 +00:00
Conversation 0 Commits 16 Files Changed 14 +171 -85
3 changed files with 171 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fc65e03992 - Show all commits

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

@ -1,5 +1,3 @@
import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
constructor() { constructor() {
this.init(); this.init();
@ -14,7 +12,6 @@ export default class Footer {
async selectors() { async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
// this.checkoutVazio = await waitElement(".empty-cart-content");
this.checkoutVazio = document.querySelector(".empty-cart-content"); this.checkoutVazio = document.querySelector(".empty-cart-content");
this.checkoutPayments = document.querySelector(".footerCheckout__stamps"); this.checkoutPayments = document.querySelector(".footerCheckout__stamps");
this.developBy = document.querySelector(".footerCheckout__developedBy"); this.developBy = document.querySelector(".footerCheckout__developedBy");

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

@ -77,6 +77,7 @@
width: 90% !important; width: 90% !important;
margin: 0; margin: 0;
font-size: 12px; font-size: 12px;
height: 52px;
&::placeholder { &::placeholder {
font-family: $font-family; font-family: $font-family;
@ -105,7 +106,7 @@
padding: 0 14px; padding: 0 14px;
height: 54px; height: 54px;
right: 0; right: 0;
top: 0; top: -1px;
color: $color-black-neutra; color: $color-black-neutra;
@media (max-width: 490px) { @media (max-width: 490px) {

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

@ -64,10 +64,109 @@
justify-self: center; justify-self: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
width: 33.2329%;
li:first-child {
width: 80.067%;
div.footerCheckout__payments {
display: flex;
height: auto;
gap: 4.0154%;
img.paymentFooter {
min-width: 10.4683%;
height: auto;
}
}
}
li:nth-child(2) {
margin: 0 10px;
}
li:last-child {
width: 13.12%;
div.footerCheckout__payments {
display: flex;
width: 100%;
justify-content: flex-start;
img.vtexIcon {
min-width: 74.8814%;
height: auto;
}
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
grid-area: stamps; grid-area: stamps;
margin: 0 0 0 8px; margin: 0 0 0 8px;
justify-self: auto;
width: max-content;
li:first-child {
width: auto;
div.footerCheckout__payments {
gap: 10px;
img.paymentFooter {
min-width: 35px;
height: 20px;
}
}
}
li:last-child {
width: auto;
div.footerCheckout__payments {
img.vtexIcon {
width: 53px;
height: 33px;
}
}
}
}
@media (max-width: 640px) {
li:first-child {
width: max-content;
div.footerCheckout__payments {
gap: 4px;
}
}
li:nth-child(2) {
margin: 0 10px 0 4px;
}
li:last-child {
width: max-content;
}
}
@media (max-width: 350px) {
display: block;
li:first-child {
width: max-content;
div.footerCheckout__payments {
gap: 4px;
}
}
li:nth-child(2) {
display: none;
}
li:last-child {
margin-top: 16px;
width: max-content;
}
} }
&__divider { &__divider {
@ -77,60 +176,6 @@
height: 24px; height: 24px;
width: 1px; width: 1px;
} }
@media screen and (min-width: 2500px) {
width: 29.0648%;
li:first-child {
width: 100%;
}
li:last-child {
width: 14.9275%;
}
&__divider {
height: 43px;
}
}
}
&__payments {
.paymentFooter {
width: 35.65px;
height: 20px;
margin-right: 13.35px;
@media (max-width: 640px) {
margin-right: 4.35px;
}
}
.vtexIcon {
width: 53px;
height: 33px;
margin-left: 10px;
}
@media screen and (min-width: 2500px) {
width: 100%;
min-width: 103px;
height: auto;
white-space: nowrap;
.paymentFooter {
width: 11.4548%;
min-width: 69.63px;
margin-right: 13.35px;
height: auto;
}
.vtexIcon {
width: 100%;
height: auto;
margin-left: 10px;
}
}
} }
&__developedBy { &__developedBy {
@ -138,9 +183,31 @@
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
width: 17.8453%;
gap: 11px;
li:first-child {
width: 48.6151%;
display: flex;
a {
.logoVtexFooter {
min-width: 29.8571%;
height: auto;
}
}
}
li:last-child { li:last-child {
margin-left: 16px; display: flex;
width: 44.4541%;
a {
.logoM3Footer {
min-width: 29.1684%;
height: auto;
}
}
} }
a { a {
@ -156,24 +223,7 @@
span { span {
margin-right: 11px; margin-right: 11px;
} white-space: nowrap;
}
.logoVtexFooter {
width: 44.92px;
height: 16px;
}
.logoM3Footer {
width: 28.66px;
height: 15.65px;
}
@media (max-width: 1024px) {
margin-left: 16px;
li:last-child {
margin-left: 11px;
} }
} }
@ -181,23 +231,61 @@
width: 16.3437%; width: 16.3437%;
white-space: nowrap; white-space: nowrap;
li { li:first-child {
width: 100%; width: 50.6151%;
display: flex;
a {
.logoVtexFooter {
min-width: 29.8571%;
height: auto;
}
}
}
li:last-child {
display: flex;
width: 46.4541%;
a {
.logoM3Footer {
min-width: 29.1684%;
height: auto;
}
}
} }
a { a {
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
} }
}
.logoVtexFooter { @media (max-width: 1024px) {
width: 47.1666%; margin-left: 16px;
height: auto; width: max-content;
li:first-child {
width: max-content;
a {
.logoVtexFooter {
min-width: 45px;
height: 16px;
}
}
} }
.logoM3Footer { li:last-child {
width: 30.0967%; width: max-content;
height: auto; margin-left: 11px;
a {
.logoM3Footer {
min-width: 29px;
height: 16px;
}
}
} }
} }
} }