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() {
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) => {
const child = li.children[0].classList.contains("footerCheckout__payments")
? li.children[0]
@ -31,32 +60,12 @@ export default class Footer {
if (index === 0)
child.innerHTML = `
<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>
`;
else
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;
padding: 16px 32px;
@include mq(mobile, max) {
padding: 22px 8px 16px;
}
.container {
width: 100%;
display: flex;
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: space-between;
@include mq(mobile, max) {
grid-auto-flow: row;
}
&::before,
&::after {
content: "";
@ -20,33 +29,22 @@
color: $black-400;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
line-height: 14px;
text-transform: capitalize;
@include mq(mobile, max) {
grid-area: 2;
margin-bottom: 16px;
}
@include mq(4k, min) {
font-size: 20px;
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 {
margin: 0;
align-items: center;
@ -54,17 +52,13 @@
justify-self: center;
list-style: none;
li {
&:not(:first-of-type),
&:not(:last-of-type) {
height: 24px;
@include mq(mobile, max) {
margin-bottom: 16px;
}
@include mq(4k, min) {
height: 43px;
display: flex;
align-items: center;
}
}
li {
display: flex;
align-items: center;
}
&__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 {
width: 53px;
@include mq(sm, max) {
width: 15%;
}
@include mq(4k, min) {
width: 103px;
}

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

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

20
package-lock.json generated
View File

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

9829
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff