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

feat: Cria footer mobile

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-12-11 13:55:11 -03:00
parent 4da9906cb9
commit 4252a76865
5 changed files with 9925 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,35 @@ export default class Footer {
} }
buildIconList() { buildIconList() {
this.footerIconList.innerHTML = `
<li class="footerCheckout__payments-icon">
<img src="${this.imgLinks}masterCardM3Academy.png" alt="Logo Cartão Mastercard"/>
</li>
<li class="footerCheckout__payments-icon">
<img src="${this.imgLinks}visaM3Academy.png" alt="Logo Cartão VISA"/>
</li>
<li class="footerCheckout__payments-icon">
<img src="${this.imgLinks}amexM3Academy.png" alt="Logo Cartão American Express"/>
</li>
<li class="footerCheckout__payments-icon">
<img src="${this.imgLinks}eloM3Academy.png" alt="Logo Cartão Elo"/>
</li>
<li class="footerCheckout__payments-icon">
<img src="${this.imgLinks}hiperCardM3Academy.png" alt="Logo Cartão Hipercard"/>
</li>
<li class="footerCheckout__payments-icon">
<img src="${this.imgLinks}payPalM3Academy.png" alt="Logo Paypal"/>
</li>
<li class="footerCheckout__payments-icon">
<img src="${this.imgLinks}boletoM3Academy.png" alt="Logo Boleto"/>
</li>
<li>
<span class="footerCheckout__stamps__divider"></span>
</li>
<li class="footerCheckout__payments-vtex-icon">
<img src="${this.imgLinks}vtexPCIM3Academy.png" alt="Certificado VTEX PCI"/>
</li>
`;
Object.values(this.footerIconList.children).forEach((li, index) => { Object.values(this.footerIconList.children).forEach((li, index) => {
const child = li.children[0].classList.contains("footerCheckout__payments") const child = li.children[0].classList.contains("footerCheckout__payments")
? li.children[0] ? li.children[0]
@ -31,32 +60,12 @@ export default class Footer {
if (index === 0) if (index === 0)
child.innerHTML = ` child.innerHTML = `
<ul class="footerCheckout__payments-list"> <ul class="footerCheckout__payments-list">
<li class="footerCheckout__payments-item">
<img class="footerCheckout__payments-icon" src="${this.imgLinks}masterCardM3Academy.png" alt="Logo Cartão Mastercard"/>
</li>
<li class="footerCheckout__payments-item">
<img class="footerCheckout__payments-icon" src="${this.imgLinks}visaM3Academy.png" alt="Logo Cartão VISA"/>
</li>
<li class="footerCheckout__payments-item">
<img class="footerCheckout__payments-icon" src="${this.imgLinks}amexM3Academy.png" alt="Logo Cartão American Express"/>
</li>
<li class="footerCheckout__payments-item">
<img class="footerCheckout__payments-icon" src="${this.imgLinks}eloM3Academy.png" alt="Logo Cartão Elo"/>
</li>
<li class="footerCheckout__payments-item">
<img class="footerCheckout__payments-icon" src="${this.imgLinks}hiperCardM3Academy.png" alt="Logo Cartão Hipercard"/>
</li>
<li class="footerCheckout__payments-item">
<img class="footerCheckout__payments-icon" src="${this.imgLinks}payPalM3Academy.png" alt="Logo Paypal"/>
</li>
<li class="footerCheckout__payments-item">
<img class="footerCheckout__payments-icon" src="${this.imgLinks}boletoM3Academy.png" alt="Logo Boleto"/>
</li>
</ul> </ul>
`; `;
else else
child.innerHTML = ` child.innerHTML = `
<img class="footerCheckout__payments-vtex-icon" src="${this.imgLinks}vtexPCIM3Academy.png" alt="Certificado VTEX PCI"/>
`; `;
}); });
} }

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

@ -3,12 +3,21 @@
border-top: 1px solid $black-500; border-top: 1px solid $black-500;
padding: 16px 32px; padding: 16px 32px;
@include mq(mobile, max) {
padding: 22px 8px 16px;
}
.container { .container {
width: 100%; width: 100%;
display: flex; display: grid;
grid-auto-flow: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@include mq(mobile, max) {
grid-auto-flow: row;
}
&::before, &::before,
&::after { &::after {
content: ""; content: "";
@ -20,33 +29,22 @@
color: $black-400; color: $black-400;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 14px;
text-transform: capitalize; text-transform: capitalize;
@include mq(mobile, max) {
grid-area: 2;
margin-bottom: 16px;
}
@include mq(4k, min) { @include mq(4k, min) {
font-size: 20px; font-size: 20px;
line-height: 27px; line-height: 27px;
} }
} }
&__payments-list {
list-style-type: none;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
}
&__payments-icon {
width: 35px;
margin-right: 13px;
@include mq(4k, min) {
width: 39px;
}
}
&__stamps { &__stamps {
margin: 0; margin: 0;
align-items: center; align-items: center;
@ -54,17 +52,13 @@
justify-self: center; justify-self: center;
list-style: none; list-style: none;
li { @include mq(mobile, max) {
&:not(:first-of-type), margin-bottom: 16px;
&:not(:last-of-type) { }
height: 24px;
@include mq(4k, min) { li {
height: 43px; display: flex;
display: flex; align-items: center;
align-items: center;
}
}
} }
&__divider { &__divider {
@ -80,9 +74,31 @@
} }
} }
&__payments-icon {
width: 35px;
margin-right: 10px;
@include mq(sm, max) {
width: 10%;
}
@include mq(mobile, max) {
margin-right: 4px;
}
@include mq(4k, min) {
width: 67px;
margin-right: 13px;
}
}
&__payments-vtex-icon { &__payments-vtex-icon {
width: 53px; width: 53px;
@include mq(sm, max) {
width: 15%;
}
@include mq(4k, min) { @include mq(4k, min) {
width: 103px; width: 103px;
} }

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

@ -17,7 +17,7 @@ $white-500: #fff;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 400,
sm: 576px, sm: 375px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,
mobile: 1024px, mobile: 1024px,

20
package-lock.json generated
View File

@ -45,6 +45,7 @@
"jquery": "^3.6.0", "jquery": "^3.6.0",
"m3-utils": "^0.1.0", "m3-utils": "^0.1.0",
"sass": "^1.38.1", "sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4" "terser-webpack-plugin": "^5.1.4"
}, },
"devDependencies": { "devDependencies": {
@ -3484,6 +3485,8 @@
}, },
"checkout/node_modules/core-util-is": { "checkout/node_modules/core-util-is": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
"license": "MIT" "license": "MIT"
}, },
"checkout/node_modules/cosmiconfig": { "checkout/node_modules/cosmiconfig": {
@ -4844,6 +4847,8 @@
}, },
"checkout/node_modules/get-intrinsic": { "checkout/node_modules/get-intrinsic": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
"integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
@ -6294,6 +6299,8 @@
}, },
"checkout/node_modules/micromatch": { "checkout/node_modules/micromatch": {
"version": "4.0.5", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"braces": "^3.0.2", "braces": "^3.0.2",
@ -6305,6 +6312,8 @@
}, },
"checkout/node_modules/micromatch/node_modules/braces": { "checkout/node_modules/micromatch/node_modules/braces": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"fill-range": "^7.0.1" "fill-range": "^7.0.1"
@ -19345,6 +19354,7 @@
"m3-utils": "^0.1.0", "m3-utils": "^0.1.0",
"prettier": "^2.3.2", "prettier": "^2.3.2",
"sass": "^1.38.1", "sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4", "terser-webpack-plugin": "^5.1.4",
"webpack": "^5.51.1", "webpack": "^5.51.1",
"webpack-merge": "^5.8.0" "webpack-merge": "^5.8.0"
@ -21672,7 +21682,9 @@
} }
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.3" "version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
}, },
"cosmiconfig": { "cosmiconfig": {
"version": "7.1.0", "version": "7.1.0",
@ -22645,6 +22657,8 @@
}, },
"get-intrinsic": { "get-intrinsic": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
"integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
"requires": { "requires": {
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
"has": "^1.0.3", "has": "^1.0.3",
@ -23679,6 +23693,8 @@
}, },
"micromatch": { "micromatch": {
"version": "4.0.5", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"requires": { "requires": {
"braces": "^3.0.2", "braces": "^3.0.2",
"picomatch": "^2.3.1" "picomatch": "^2.3.1"
@ -23686,6 +23702,8 @@
"dependencies": { "dependencies": {
"braces": { "braces": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"requires": { "requires": {
"fill-range": "^7.0.1" "fill-range": "^7.0.1"
} }

9829
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff