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 = ``;
for (const i of items) {
const elem = `<li class="infoCard">
<img class="infoCard__image" src="${
i["imagem"]
}" /><div class="infoCard__content"><p class="infoCard__text">${i["nome"]}</p>
<div class="infoCard__tamanho">${this.tamanhosProdutos(i["tamanho"], i["link"])}</div>
<a class="infoCard__link" href="${i["link"]}">VER PRODUTO</a></div></li>`;
<img class="infoCard__image" src="${i["imagem"]}" /><p class="infoCard__text">${
i["nome"]
}</p>
${this.tamanhosProdutos(i["tamanho"], i["link"])}
<a class="infoCard__link" href="${i["link"]}">VER PRODUTO</a></li>`;
listaInfocards += elem;
}
return listaInfocards;
}
tamanhosProdutos(tam, link) {
let listaTamanhos = `<ul class>`;
let listaTamanhos = `<ul class="infoCard__tamanhos">`;
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 += `</ul>`;
@ -94,7 +94,7 @@ export default class Footer {
}
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
)}</ul>`;
}

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

@ -22,6 +22,72 @@
justify-content: center;
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 {
color: $color-black;
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-blue: #4267b2;
$color-blue-300: #00c8ff;
$color-green: #4caf50;