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

Merge pull request 'feat: adiciona a prateleira de produtos e footer responsivo em todas as telas' (#4) from feature/prateleira-style into main

Browse Source 
Reviewed-on: #4
This commit is contained in:
Thiago Bronisio Damascena 2022-12-16 02:24:45 +00:00
commit c3ef8b1c6e
4 changed files with 364 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,8 +3,6 @@ import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
constructor() { constructor() {
this.init(); this.init();
} }
async init() { async init() {
@ -50,14 +48,15 @@ export default class Footer {
<img src="${product.items[0].images[0].imageUrl}" alt="Imagem ${product.productName}" /> <img src="${product.items[0].images[0].imageUrl}" alt="Imagem ${product.productName}" />
<figcaption>${product.productName}</figcaption> <figcaption>${product.productName}</figcaption>
</figure> </figure>
<div> <div class="container-tamanho-cores">${product.items.map((nameProduct) => {
return ` <input name="tamanho" type="radio"/>
<label name="tamanho"> <label name="tamanho">
${product.items.name} ${nameProduct.name}
</label> </label>`
<input name="tamanho" type="radio"/> }).join("")}
</div> </div>
<div> <div class="container-button-prateleira">
<button> </button> <a href=""><button>Ver produto</button></a>
</div> </div>
` `
footerPrat.children[1].appendChild(li) footerPrat.children[1].appendChild(li)
@ -108,6 +107,24 @@ export default class Footer {
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
arrows: true, arrows: true,
responsive: [
{
breakpoint: 376,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
}
},
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
}
}
]
}); });
} }
} }

4
checkout/src/arquivos/js/components/Header.js
View File

@ -14,7 +14,7 @@ export default class Header {
async selectors() { async selectors() {
this.header = await waitElement(".headerCheckout"); this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar") this.progressBar = await waitElement("#progressBar");
} }
progressBarHTML() { progressBarHTML() {
@ -31,7 +31,7 @@ export default class Header {
<li></li> <li></li>
</ul> </ul>
` `
} };
if (this.progressBar && window.innerWidth <= 1024) { if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``; this.progressBar.innerHTML = ``;
} }

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

@ -2,24 +2,277 @@
padding: 0 16px; padding: 0 16px;
position: relative; position: relative;
&__prateleira {
margin-bottom: 123px;
@media screen and (min-width: 2500px) {
margin-bottom: 156px;
}
@media screen and (max-width: 1024px) {
margin-bottom: 188px;
}
h2 {
display: flex;
margin: 0 0 20px;
font-weight: 400;
line-height: 38px;
font-size: 24px;
justify-content: center;
font-family: $font-family-secundary;
@media screen and (min-width: 2500px) {
font-size: 48px;
line-height: 76px;
}
}
.container-carousel-item {
display: flex;
margin: 0;
padding: 0 116px;
list-style: none;
@media screen and (min-width: 2500px) {
padding: 0 237px;
}
@media screen and (max-width: 1024px) {
padding: 0;
}
li {
width: 96.1% !important;
@media screen and (min-width: 1280px) and (max-width: 1281px) {
width: 242px !important;
margin-right: 16px;
}
@media screen and (min-width: 2500px) and (max-width: 2501px) {
width: 485.07px !important;
margin-right: 16.93px;
}
@media screen and (min-width: 1023px) and (max-width: 1024px) {
width: 320px !important;
margin-right: 15px;
}
figure {
margin: 0;
img {
width: 100%;
background: $color-gray-100;
}
figcaption {
display: flex;
margin-top: 20px;
justify-content: center;
font-weight: 400;
font-size: 13px;
align-items: center;
text-align: center;
line-height: 18px;
font-family: $font-family;
@media screen and (min-width: 2500px) {
font-size: 26px;
line-height: 35px;
}
@media screen and (min-width: 726px) and (max-width: 1024px) {
margin: 20px 0;
}
@media screen and (min-width: 376px) and (max-width: 725px) {
margin-top: 11px;
min-height: 36px;
}
@media screen and (min-width: 1025px) and (max-width: 1188px) {
min-height: 36px;
}
}
}
.container-tamanho-cores {
display: flex;
margin-top: 20px;
gap: 5px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
@media screen and (max-width: 725px) {
min-height: 61px;
}
@media screen and (min-width: 1025px) and (max-width: 1188px) {
min-height: 61px;
}
input {
display: none;
}
label {
display: flex;
padding: 5px;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
line-height: 18px;
align-items: center;
text-align: center;
text-transform: uppercase;
background: $color-blue-100;
letter-spacing: 0.05em;
color: $color-white;
justify-content: center;
@media screen and (min-width: 2500px) {
padding: 6.1px;
font-size: 26px;
line-height: 35px;
}
}
label:last-child {
margin-right: 0;
}
}
.container-button-prateleira {
margin-top: 20px;
@media screen and (min-width: 726px) and (max-width: 1024px) {
margin-top: 20px;
}
a {
text-decoration: none;
}
button {
width: 100%;
height: 42px;
font-weight: 700;
font-size: 13px;
line-height: 13px;
border: none;
border-radius: 8px;
color: $color-white;
background: $color-blue-100;
letter-spacing: 0.05em;
text-transform: uppercase;
font-family: $font-family;
@media screen and (min-width: 2500px) {
height: 59px;
font-size: 26px;
line-height: 35px;
letter-spacing: 0.05em;
}
}
}
}
}
.slick-prev {
width: 13px;
height: 29.5px;
border: none;
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg)
no-repeat center center;
z-index: 4;
left: 125px;
top: 43%;
@media screen and (min-width: 2500px) {
width: 26px;
height: 58px;
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg)
no-repeat center center;
left: 255px;
top: 45%;
}
@media screen and (max-width: 1024px) {
width: 13.65px;
height: 29.47px;
left: 10px;
top: 48%;
}
}
.slick-next {
width: 13px;
height: 29.5px;
border: none;
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg)
no-repeat center center;
z-index: 4;
top: 43%;
right: 137px;
@media screen and (min-width: 2500px) {
width: 26px;
height: 58px;
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg)
no-repeat center center;
top: 45%;
right: 265px;
}
@media screen and (max-width: 1024px) {
width: 13.65px;
height: 29.47px;
top: 48%;
right: 20px;
}
}
}
.container { .container {
display: flex; display: flex;
margin: 16px 0; margin: 16px 0;
width: 100% !important; width: 100% !important;
@media screen and (max-width: 1024px) {
display: grid;
}
} }
&__wrapper { &__wrapper {
width: 100% !important; width: 100% !important;
border-top: solid 1px $black-padrao; border-top: solid 1px $black-padrao;
position: fixed; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@media screen and (min-width: 2500px) {
height: 80px;
margin: 0 0 16px !important;
}
} }
&__address { &__address {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 16px; padding-left: 16px;
@media screen and (min-width: 2500px) {
padding-left: 63px;
}
@media screen and (max-width: 1024px) {
padding-left: 16px;
margin: 16px 0;
}
p { p {
margin: 0; margin: 0;
height: 14px; height: 14px;
@ -29,28 +282,62 @@
text-transform: capitalize; text-transform: capitalize;
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
@media screen and (min-width: 2500px) {
font-size: 20px;
line-height: 27px;
}
} }
} }
&__stamps { &__stamps {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
width: 32.4%;
align-items: center; align-items: center;
list-style: none; list-style: none;
width: 32.4%; justify-content: center;
@media screen and (max-width: 1024px) {
order: -1;
margin: 0;
width: 100%;
padding-left: 8px;
justify-content: flex-start;
}
&__item { &__item {
margin-right: 13px; margin-right: 13px;
@media screen and (max-width: 1024px) {
margin-right: 5px;
}
img { img {
width: 100%; width: 35.65px;
height: 20px; height: 20px;
object-fit: cover; object-fit: cover;
@media screen and (min-width: 2500px) {
width: 69.65px;
height: 39px;
} }
} }
.iconVtex { .iconVtex {
width: 53px;
height: 33px; height: 33px;
@media screen and (min-width: 2500px) {
width: 103.5px;
height: 64.45px;
}
@media screen and (max-width: 1024px) {
width: 53px;
margin-right: 5px;
}
}
} }
&__divider { &__divider {
@ -58,6 +345,11 @@
height: 24px; height: 24px;
margin: 0 10px 0 0; margin: 0 10px 0 0;
border: 1px solid $color-gray-100; border: 1px solid $color-gray-100;
@media screen and (min-width: 2500px) {
display: flex;
height: 43px !important;
}
} }
} }
@ -67,6 +359,14 @@
list-style: none; list-style: none;
padding-right: 16px; padding-right: 16px;
@media screen and (min-width: 2500px) {
padding-right: 62px;
}
@media screen and (max-width: 1024px) {
padding-left: 16px;
}
&__item-Vtex { &__item-Vtex {
display: flex; display: flex;
align-items: center; align-items: center;
@ -78,10 +378,19 @@
line-height: 12px; line-height: 12px;
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
@media screen and (min-width: 2500px) {
font-size: 18px;
line-height: 25px;
}
} }
img { img {
height: 16px; height: 16px;
@media screen and (min-width: 2500px) {
width: 87.75px;
height: 31.25px;
}
} }
} }
@ -90,11 +399,20 @@
align-items: center; align-items: center;
p { p {
margin: 0 11px 0 0; margin: 0 11px 0 0;
font-weight: 400;
font-size: 9px; font-size: 9px;
@media screen and (min-width: 2500px) {
font-size: 18px;
line-height: 25px;
}
} }
img { img {
height: 16px; height: 16px;
@media screen and (min-width: 2500px) {
width: 56px;
height: 30.55px;
}
} }
} }
} }

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

@ -10,7 +10,7 @@ $color-black: #292929;
$color-white: #fff; $color-white: #fff;
$color-gray-100: #c4c4c4; $color-gray-100: #eee;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray2: #7d7d7d; $color-gray2: #7d7d7d;
@ -19,6 +19,7 @@ $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue-100: #00c8ff;
$color-green: #4caf50; $color-green: #4caf50;