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(body): Estilização das prateleiras

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2022-12-16 13:17:18 -03:00
parent 8e255dc0fc
commit 71bb9076ea
3 changed files with 75 additions and 8 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

@ -74,19 +74,19 @@ export default class Footer {
let listaInfocards = ``; let listaInfocards = ``;
for (const i of items) { for (const i of items) {
const elem = `<li class="infoCard"> const elem = `<li class="infoCard">
<img class="infoCard__image" src="${ <img class="infoCard__image" src="${i["imagem"]}" /><p class="infoCard__text">${
i["imagem"] i["nome"]
}" /><div class="infoCard__content"><p class="infoCard__text">${i["nome"]}</p> }</p>
<div class="infoCard__tamanho">${this.tamanhosProdutos(i["tamanho"], i["link"])}</div> ${this.tamanhosProdutos(i["tamanho"], i["link"])}
<a class="infoCard__link" href="${i["link"]}">VER PRODUTO</a></div></li>`; <a class="infoCard__link" href="${i["link"]}">VER PRODUTO</a></li>`;
listaInfocards += elem; listaInfocards += elem;
} }
return listaInfocards; return listaInfocards;
} }
tamanhosProdutos(tam, link) { tamanhosProdutos(tam, link) {
let listaTamanhos = `<ul class>`; let listaTamanhos = `<ul class="infoCard__tamanhos">`;
for (const n of tam) { for (const n of tam) {
const nums = `<li class=infoCard__tamanho__numero><a class=infoCard__tamanho__numero__link href="${link}">${n}</a></li>`; const nums = `<li class=infoCard__tamanho><a class=infoCard__tamanho__link href="${link}">${n}</a></li>`;
listaTamanhos += nums; listaTamanhos += nums;
} }
listaTamanhos += `</ul>`; listaTamanhos += `</ul>`;
@ -94,7 +94,7 @@ export default class Footer {
} }
async renderInfoCards(Items) { async renderInfoCards(Items) {
this.prateleiraInfoCards.innerHTML = `<h2>Você também pode gostar:</h2><ul class="infoCards">${this.estruturaInfoCard( this.prateleiraInfoCards.innerHTML = `<h2 class="prateleira__subtitle">Você também pode gostar:</h2><ul class="infoCards">${this.estruturaInfoCard(
Items Items
)}</ul>`; )}</ul>`;
} }

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

@ -22,6 +22,72 @@
justify-content: center; justify-content: center;
margin: 0 !important; margin: 0 !important;
} }
&__prateleira {
margin: 0 !important;
width: 100% !important;
display: flex;
flex-direction: column;
align-items: center;
.prateleira__subtitle {
font-size: 24px;
font-family: $font-family-secundary;
font-weight: 400;
color: #000;
line-height: 38px;
}
.infoCards {
width: 79.375%;
display: flex;
align-items: center;
.infoCard {
width: 23.81%;
height: 390px;
border: 1px solid #000;
display: flex;
flex-direction: column;
align-items: center;
&__image {
width: 100%;
object-fit: fill;
border-radius: 8px;
}
&__text {
margin-top: 20px;
margin-bottom: 0;
font-family: $font-family;
font-size: 13px;
color: #000;
font-weight: 400;
}
&__tamanhos {
margin-top: 20px;
display: flex;
flex-direction: row;
list-style: none;
}
&__tamanho {
margin-right: 5px;
background-color: $color-blue-300;
border-radius: 8px;
&__numero {
display: flex;
justify-content: center;
}
&__link {
color: $color-white;
margin: 5px;
font-family: $font-family;
font-size: 13px;
font-weight: 700;
}
}
}
}
}
&__address { &__address {
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;

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

@ -16,6 +16,7 @@ $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue-300: #00c8ff;
$color-green: #4caf50; $color-green: #4caf50;