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

feat: Estiliza header para telas 4k

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2022-12-15 18:18:05 -03:00
parent efefbf6683
commit ee3a660f64
4 changed files with 120 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,18 +54,16 @@ export default class Footer {
let li = document.createElement("li")
li.setAttribute("id", product.productId)
li.innerHTML = `
<img src="${product.items[0].images[0].imageUrl}" alt=imagem "${product.productName}" />
<p class= "product-name">${product.productName}</p>
<div class="product-sizes">${product.items.map((name) => {
return `<a name = "tamanho" class= "tamanho">${name.name}</a>`
<img src="${product.items[0].images[0].imageUrl}" alt="${product.productName}" />
<p class="product-name">${product.productName}</p>
<div class="product-variation">${product.items.map((name) => {
return `<a name="product-variation__variation" class="product-variation__variation">${name.name}</a>`
}).join("")}</div>
<button class= "show-products">Ver produto</button>
<button class="show-product">Ver produto</button>
`;
prateleira.children[1].appendChild(li);
});
// document.querySelector(".footerCheckout__prateleira").innerHTML = jsonBody[0];
// console.log(jsonBody);
});
}
@ -102,7 +100,7 @@ export default class Footer {
<a href="https://vtex.com.br-pt/">
<span>Powered By</span>
</a>
<img class= "vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX">
<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
</div>
</li>
@ -111,7 +109,7 @@ export default class Footer {
<a href="https://vtex.com.br-pt/">
<span>Developed By</span>
</a>
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3">
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
</div>
</li>
`;

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

@ -2,7 +2,7 @@
.footerCheckout {
border-top: none;
color: $black-400;
.container {
width: 100%;
border-top: 1px solid $black-500;
@ -67,7 +67,6 @@
}
}
&__developedBy {
align-items: center;
display: flex;
@ -91,7 +90,6 @@
gap: 12px;
}
li .by-m3 {
gap: 10.93px;
}

50
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -50,7 +50,16 @@
line-height: 28px;
color: $black-500;
width: 39.9103%;
@media (min-width: 2500px) {
font-size: 24px;
}
}
@media (min-width: 2500px) {
width: 1078.86px;
}
}
li.central {
@ -64,6 +73,12 @@
height: 12px;
border: 1px solid $black-500;
border-radius: 50%;
@media (min-width: 2500px) {
width: 24px;
height: 24px;
}
}
li #progress-bar-circle-1.active,
@ -81,6 +96,12 @@
width: 174px;
height: 1px;
border-top: 1px solid $black-500;
@media (min-width: 2500px) {
left: 23%;
bottom: 11px;
width: 448px;
}
}
li .progress-bar-line-2 {
@ -91,17 +112,15 @@
width: 174px;
height: 1px;
border-top: 1px solid $black-500;
@media (min-width: 2500px) {
right: 21%;
bottom: 11px;
width: 448px;
}
}
// li #progress-bar-line-3 {
// position: absolute;
// right: 21%;
// transform: translateY(-50%);
// bottom: 5px;
// width: 100%;
// height: 1px;
// border-top: 1px solid $black-500;
// }
}
&__wrapper {
@ -118,6 +137,10 @@
height: auto;
width: 100%;
}
@media (min-width: 2500px) {
width: 19.213%;
}
}
&__safeBuy {
@ -135,10 +158,19 @@
line-height: 14px;
padding: 0 0 0 8px;
color: $black-400;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 33px;
}
}
img {
width: 12px;
@media (min-width: 2500px) {
width: 29.47px;
}
}
i {

71
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -1 +1,72 @@
/* _prateleira.scss */
.footerCheckout {
&__prateleira {
h2 {
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: $black-500;
}
.carrossel-itens {
.product-name {
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
text-align: center;
color: $black-500;
}
.product-variation {
display: flex;
align-items: center;
&__variation {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $white;
background: $vivid-blue;
border: none;
border-radius: 8px;
padding: 5px 4px;
margin: 20px 0 20px 0;
gap: 5px;
}
.show-product {
background-color: $vivid-blue;
color: $white;
border: none;
border-radius: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 12px 72px;
&:hover {
background-color: $vivid-blue-lighten;
}
&:active {
background-color: $vivid-blue-darker;
}
}
}
}
}
}