From ff5f79a00699dbc9a427ca3a6570b1ebdc26881d Mon Sep 17 00:00:00 2001 From: Patrick Date: Mon, 26 Dec 2022 22:41:39 -0300 Subject: [PATCH 1/2] feat: adiciona css --- checkout/src/arquivos/js/components/Footer.js | 31 ++++++++--- checkout/src/arquivos/js/components/Header.js | 9 ++++ .../sass/checkout/_checkout-carrinho.scss | 1 - .../sass/checkout/_checkout-vazio.scss | 19 ++++++- .../src/arquivos/sass/checkout/_checkout.scss | 42 +++++++++++++-- .../src/arquivos/sass/partials/_footer.scss | 25 ++++++--- .../src/arquivos/sass/partials/_header.scss | 51 +++++++++++++++---- .../arquivos/sass/partials/_prateleira.scss | 15 +++++- 8 files changed, 161 insertions(+), 32 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index f004854..9d55065 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -29,6 +29,22 @@ export default class Footer { $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + }, + }, + { + breakpoint: 375, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + }, + }, + ], }); } async apiProducts(container) { @@ -65,23 +81,24 @@ export default class Footer { }); } async addPrateleira() { + const checkSlick = document.querySelector(".slick-initialized"); const slickContainer = document.createElement("div"); const url = window.location.hash; const orderForm = await fetch("/api/checkout/pub/orderForm/") .then((response) => response.json()) .then((response) => response) .catch((err) => console.error(err)); - console.log(orderForm.items); - if (orderForm.items.length > 0 && url === "#/cart") { + /* console.log(orderForm.items); */ + + if (orderForm.items.length > 0 && url === "#/cart" && checkSlick === null) { const titlePrateleira = document.createElement("h2"); titlePrateleira.classList.add("title-prateleira"); titlePrateleira.innerText = "Você também pode gostar:"; this.prateleira.appendChild(titlePrateleira); - this.prateleira.appendChild(slickContainer); await this.apiProducts(slickContainer); await this.addCarrossel(slickContainer); - } else { + } else if (orderForm.items.length == 0 || url !== "#/cart") { slickContainer.remove(); console.log(slickContainer); const slickInitialize = document.querySelector(".slick-initialized"); @@ -98,9 +115,9 @@ export default class Footer { const cardList3 = ["logoVTEXM3Academy.png", "logoM3M3Academy.png"]; query3[0].innerHTML = ""; cardList3.forEach(function (item, index) { - query3[0].innerHTML += `${ + query3[0].innerHTML += `
${ index === 0 ? "Powered By" : "Developed By" - }
`; }); @@ -111,7 +128,7 @@ export default class Footer { const cardList2 = ["masterCardM3Academy.png"]; query2[0].innerHTML = ""; cardList2.forEach(function (item) { - query2[0].innerHTML = ``; + query2[0].innerHTML = ``; }); const stampsContainer = await waitElement(".footerCheckout__payments"); diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index ce203da..07cd080 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -6,10 +6,12 @@ export default class Header { constructor() { this.init(); this.addProgressBar(); + this.MeuCarrinhoTittle(); } async init() { await this.selectors(); + console.log(this.item); } @@ -47,4 +49,11 @@ export default class Header { `; } + + async MeuCarrinhoTittle() { + if (orderForm.items.length < 0 && url === "#/cart") { + const MeuCarrinhoTittleCheck = (document.querySelector("#cart-title").style.display = + "none"); + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index f5456da..ce3fe97 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -798,7 +798,6 @@ @include mq(md, min) { margin: 0; - padding-bottom: 50px; } .link-choose-more-products-wrapper { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 82dc4d0..23fd231 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -10,7 +10,17 @@ } &-title { - font-size: 20px; + font-family: "Open Sans"; + font-style: normal; + text-transform: uppercase; + line-height: 32px; + font-size: 24px; + margin: 0; + font-weight: 700; + + @media (min-width: 280px) and (max-width: 1024px) { + font-size: 18px; + } } &-links { @@ -23,6 +33,13 @@ padding: 15px 62px 17px 62px; background-color: transparent; color: #000000; + border-radius: 0; + margin-top: 32px; + @media (min-width: 280px) and (max-width: 1024px) { + width: 250px; + margin-top: 22px; + padding: 14px 9px 14px 9px; + } &:hover { background: #00c8ff8c; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 8598906..10ae38e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -8,22 +8,44 @@ html { min-height: 100%; } footer .container { - margin-top: 16px; display: flex; align-items: center; + margin: 0 32px 0 32px; + height: 100%; + width: 100%; justify-content: space-between; - gap: 65px; + @media (min-width: 280px) and (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + gap: 16px; + margin: 32px 0 0 16px; + } + + &::before { + display: none; + } + + &::after { + display: none; + } +} +.footerCheckout__stamps { + margin: 0; } footer .footerCheckout__wrapper { border-top: 1px solid black; - width: 100%; + /* width: 100%; */ /* width: 94.9734%; */ margin: auto auto 0 auto; + width: 2500px; + max-width: 100%; + height: 67px; } footer .footerCheckout__prateleira, header { - width: 79.53125%; + max-width: 100%; + width: 1016px; margin: 0 auto; } @@ -58,7 +80,15 @@ body { } .container-order-form, .container-cart { - width: 80%; + /* width: 80%; */ + /* height: 544px; */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* @media (min-width: 375px) and (max-width: 1024px) { + height: 532px; + } */ } } @@ -87,6 +117,8 @@ body { margin: 40px 0 30px; letter-spacing: 0.1em; text-transform: uppercase; + /* color: transparent; + position: absolute; */ @include mq(md, max) { margin-left: 30px; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..41367bf 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,7 +1,9 @@ /* _footer.scss */ + .footerCheckout { border-top: none; color: $color-gray2; + width: 100%; &__wrapper { align-items: center; @@ -10,17 +12,22 @@ } &__address { - color: $color-gray2; - font-family: $font-family; + color: #292929; + font-family: "Open Sans"; font-style: normal; - font-weight: normal; font-size: 10px; - line-height: 12px; + line-height: 14px; text-transform: capitalize; max-width: 40%; + font-weight: 400; + + @media (min-width: 280px) and (max-width: 1024px) { + order: 2; + display: flex; + } @include mq(md, max) { - margin-bottom: 24px; + /* margin-bottom: 24px; */ max-width: 100%; } } @@ -32,7 +39,7 @@ list-style: none; @include mq(md, max) { - align-self: center; + /* align-self: center; */ margin-bottom: 12px; } @@ -50,6 +57,7 @@ display: flex; list-style-type: none; margin: 0; + gap: 11px; li:last-child { margin-left: 16px; @@ -72,3 +80,8 @@ } } } +.div-addStamps { + @media (max-width: 375px) { + font-size: 9px; + } +} diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 4c0b851..63db1ac 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,6 +1,12 @@ /* _header.scss */ .headerCheckout { .container { + width: 2500px; + height: 96px; + max-width: 100%; + @media (min-width: 280px) and (max-width: 1024px) { + height: 65px; + } /* width: auto !important; */ } &__wrapper { @@ -40,7 +46,11 @@ } .headerCheckout__wrapper { - margin: 30px 0 30px 0; + height: 100%; + margin: 0 131px 0 131px; + @media (min-width: 280px) and (max-width: 1024px) { + margin: 0 16px 0 16px; + } } .headerCheckout__safeBuy { @@ -53,6 +63,12 @@ margin-right: 8px; } +.headerCheckout__safeBuy span { + @media (min-width: 305px) { + font-size: 11px; + } +} + .checkout-li { height: 12px; width: 12px; @@ -62,10 +78,14 @@ } .progress-bar { - width: 439px; + width: 40%; + @media (max-width: 1024px) { + display: none; + } } .progress-bar-container { + margin: 0; display: flex; position: relative; height: fit-content; @@ -82,7 +102,7 @@ position: absolute; display: block; content: ""; - width: 70%; + width: 67%; height: 1px; background-color: black; z-index: -1; @@ -126,22 +146,31 @@ } .headerCheckout__logo { - margin-left: 131px; + /* margin-left: 131px; */ + + @media (min-width: 280px) and (max-width: 1024px) { + margin: 0; + } + + @media (max-width: 305px) { + height: 35px; + width: 130px; + } + @media (min-width: 2500px) { + width: 382px; + height: 91px; + } } .headerCheckout__safeBuy { - margin-right: 131px; + @media (min-width: 280px) and (max-width: 1024px) { + margin: 0; + } } .headerCheckout__safeBuy img { margin-bottom: 2px; } -.empty-cart-title { - text-transform: uppercase; - font-size: 50px; - line-height: 32px; -} - .empty-cart-message { display: none; } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 6d3799d..362b741 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -23,7 +23,11 @@ } .btn-item-link { - padding: 12px 75px; + display: flex; + align-items: center; + justify-content: center; + width: 242px; + height: 42px; color: #ffffff; font-family: "Open Sans"; font-style: normal; @@ -32,6 +36,9 @@ border-radius: 8px; background-color: #00c8ff; text-transform: uppercase; + @media (min-width: 280px) and (max-width: 1024px) { + width: 94.5%; + } } .btn-tamanho { @@ -59,6 +66,9 @@ font-weight: 400; font-size: 13px; color: #000000; + @media (min-width: 280px) and (max-width: 1024px) { + width: 94.5%; + } } /* .bora { @@ -68,6 +78,9 @@ .product-img { width: 242px; + @media (min-width: 280px) and (max-width: 1024px) { + width: 94.5%; + } } .container-produto { From 76e1825cdcdf3d4b65543f5506d6b3cf528d097c Mon Sep 17 00:00:00 2001 From: Patrick Date: Mon, 26 Dec 2022 23:28:58 -0300 Subject: [PATCH 2/2] feat: adiciona responsividade slick --- checkout/src/arquivos/js/components/Footer.js | 4 ++-- checkout/src/arquivos/sass/partials/_footer.scss | 5 +++++ checkout/src/arquivos/sass/partials/_prateleira.scss | 5 +++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9d55065..b80b7df 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -31,14 +31,14 @@ export default class Footer { slidesToScroll: 1, responsive: [ { - breakpoint: 1025, + breakpoint: 1026, settings: { slidesToShow: 3, slidesToScroll: 1, }, }, { - breakpoint: 375, + breakpoint: 376, settings: { slidesToShow: 2, slidesToScroll: 1, diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 41367bf..5309fe5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -53,11 +53,16 @@ } &__developedBy { + display: flex; + order: 3; align-items: center; display: flex; list-style-type: none; margin: 0; gap: 11px; + @media (min-width: 280px) and (max-width: 1024px) { + order: 3; + } li:last-child { margin-left: 16px; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 362b741..5e2b751 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -47,6 +47,11 @@ width: 242px; justify-content: center; margin-bottom: 20px; + @media (min-width: 280px) and (max-width: 1024px) { + display: flex; + flex-wrap: wrap; + width: 94.5%; + } } .span-item-name {