forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'feat: adiciona a prateleira de produtos e footer responsivo em todas as telas' (#4) from feature/prateleira-style into main
Reviewed-on: #4
This commit is contained in:
commit
c3ef8b1c6e
@ -3,8 +3,6 @@ import { waitElement } from "m3-utils";
|
||||
export default class Footer {
|
||||
constructor() {
|
||||
this.init();
|
||||
|
||||
|
||||
}
|
||||
|
||||
async init() {
|
||||
@ -50,14 +48,15 @@ export default class Footer {
|
||||
<img src="${product.items[0].images[0].imageUrl}" alt="Imagem ${product.productName}" />
|
||||
<figcaption>${product.productName}</figcaption>
|
||||
</figure>
|
||||
<div>
|
||||
<div class="container-tamanho-cores">${product.items.map((nameProduct) => {
|
||||
return ` <input name="tamanho" type="radio"/>
|
||||
<label name="tamanho">
|
||||
${product.items.name}
|
||||
</label>
|
||||
<input name="tamanho" type="radio"/>
|
||||
${nameProduct.name}
|
||||
</label>`
|
||||
}).join("")}
|
||||
</div>
|
||||
<div>
|
||||
<button> </button>
|
||||
<div class="container-button-prateleira">
|
||||
<a href=""><button>Ver produto</button></a>
|
||||
</div>
|
||||
`
|
||||
footerPrat.children[1].appendChild(li)
|
||||
@ -108,6 +107,24 @@ export default class Footer {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 376,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ export default class Header {
|
||||
|
||||
async selectors() {
|
||||
this.header = await waitElement(".headerCheckout");
|
||||
this.progressBar = await waitElement("#progressBar")
|
||||
this.progressBar = await waitElement("#progressBar");
|
||||
}
|
||||
|
||||
progressBarHTML() {
|
||||
@ -31,7 +31,7 @@ export default class Header {
|
||||
<li></li>
|
||||
</ul>
|
||||
`
|
||||
}
|
||||
};
|
||||
if (this.progressBar && window.innerWidth <= 1024) {
|
||||
this.progressBar.innerHTML = ``;
|
||||
}
|
||||
|
||||
@ -2,24 +2,277 @@
|
||||
padding: 0 16px;
|
||||
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 {
|
||||
display: flex;
|
||||
margin: 16px 0;
|
||||
width: 100% !important;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
width: 100% !important;
|
||||
border-top: solid 1px $black-padrao;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 80px;
|
||||
margin: 0 0 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
margin: 0;
|
||||
height: 14px;
|
||||
@ -29,28 +282,62 @@
|
||||
text-transform: capitalize;
|
||||
color: $color-black;
|
||||
font-family: $font-family;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
width: 32.4%;
|
||||
align-items: center;
|
||||
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 {
|
||||
margin-right: 13px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
width: 35.65px;
|
||||
height: 20px;
|
||||
object-fit: cover;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 69.65px;
|
||||
height: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconVtex {
|
||||
width: 53px;
|
||||
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 {
|
||||
@ -58,6 +345,11 @@
|
||||
height: 24px;
|
||||
margin: 0 10px 0 0;
|
||||
border: 1px solid $color-gray-100;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
display: flex;
|
||||
height: 43px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,6 +359,14 @@
|
||||
list-style: none;
|
||||
padding-right: 16px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
padding-right: 62px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
&__item-Vtex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -78,10 +378,19 @@
|
||||
line-height: 12px;
|
||||
color: $color-black;
|
||||
font-family: $font-family;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 16px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 87.75px;
|
||||
height: 31.25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -90,11 +399,20 @@
|
||||
align-items: center;
|
||||
p {
|
||||
margin: 0 11px 0 0;
|
||||
font-weight: 400;
|
||||
font-size: 9px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 16px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 56px;
|
||||
height: 30.55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ $color-black: #292929;
|
||||
|
||||
$color-white: #fff;
|
||||
|
||||
$color-gray-100: #c4c4c4;
|
||||
$color-gray-100: #eee;
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
$color-gray2: #7d7d7d;
|
||||
@ -19,6 +19,7 @@ $color-gray4: #8d8d8d;
|
||||
$color-gray5: #e5e5e5;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
$color-blue-100: #00c8ff;
|
||||
|
||||
$color-green: #4caf50;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user