From b263b8986d20f9bc662a9a1637a203a348995fd4 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sat, 17 Dec 2022 12:29:27 -0300 Subject: [PATCH] feat(slick): Torna slick responsivo mobile e desktop --- checkout/src/arquivos/js/components/Footer.js | 72 ++++++-- checkout/src/arquivos/sass/lib/_slick.scss | 35 +++- .../src/arquivos/sass/partials/_footer.scss | 160 +++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 4 files changed, 227 insertions(+), 42 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index f385334..6efba39 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -10,12 +10,16 @@ export default class Footer { await this.selectors(); this.footerIcons(); this.onUpdate(); - this.createContainerShelf(); + if (window.location.hash === "#/cart") { + await this.createContainerShelf(); + } + if (window.location.hash !== "#/cart") { + await this.removeShelf(); + } this.shelfItem = await waitElement(".footerCheckout__shelfList"); await this.createShelf(); - await this.addCarrossel(); + this.addCarrossel(); console.log(this.list); - // await this.createShelf(); } async selectors() { @@ -35,16 +39,15 @@ export default class Footer { let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - // console.log(mutation.type); - if ( - target.attributes.style.nodeValue == "display: none;" && - window.location.hash == "#/cart" - ) { - // const shelf = document.querySelector(".footerCheckout__prateleira"); - // this.createShelf(); - // console.log("Olá eu sou uma prateleira"); + console.log(mutation.type); + console.log(mutation); + + const footer = document.querySelector(".footerCheckout"); + console.log(footer); + if (target.attributes.style.nodeValue == "display: none;") { + footer.children[0].classList.remove("ativado"); } else { - console.log("Fui embora :(!"); + footer.children[0].classList.add("ativado"); } }); }); @@ -52,17 +55,25 @@ export default class Footer { observer.observe(target, config); } - createContainerShelf() { + async createContainerShelf() { if (this.shelf) { this.shelf.innerHTML = `

Você também pode gostar:

+ + `; } } + async removeShelf() { + if (this.shelf) { + this.shelf.innerHTML = ""; + } + } + async createShelf() { let structure = ""; @@ -74,13 +85,13 @@ export default class Footer {
${resp.name}
- + `; }); this.shelfItem.innerHTML = structure; - console.log("ioaioaioiaoioa"); + // console.log("ioaioaioiaoioa"); } async apiRequest() { @@ -106,6 +117,37 @@ export default class Footer { slidesToScroll: 1, infinite: false, arrows: true, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + infinite: false, + arrows: true, + }, + }, + + { + breakpoint: 992, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + infinite: false, + arrows: true, + }, + }, + + { + breakpoint: 374, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + infinite: false, + arrows: true, + }, + }, + ], }); } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..c7642e7 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -63,7 +63,10 @@ } .slick-slide { float: left; - height: 100%; + width: 100%; + height: auto; + margin-left: 8px; + margin-right: 8px; min-height: 1px; outline: none; [dir="rtl"] & { @@ -71,6 +74,7 @@ } img { display: block; + width: 100%; } &.slick-loading img { display: none; @@ -99,16 +103,41 @@ .slick-arrow { font-size: 0; position: absolute; + outline: 0; + border: 0; } .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; z-index: 4; - left: 10px; + bottom: 50%; + left: 20px; + cursor: pointer; + + @include mq(xxl, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") + no-repeat center; + bottom: 50%; + left: -949px; + z-index: 5; + width: 100%; + } } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; z-index: 4; - right: 10px; + bottom: 50%; + right: 20px; + cursor: pointer; + + @include mq(xxl, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center; + z-index: 5; + right: -910px; + width: 100%; + } } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index f43fedd..c04edf1 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -3,24 +3,6 @@ border-top: none; color: $color-gray2; - &__prateleira { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - - &__prateleira-title { - h2 { - font-family: $font-family-secundary; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - color: $color-black2; - } - } - .container { width: 94.9734%; display: flex; @@ -41,6 +23,7 @@ } &__wrapper { + margin-top: 68px !important; align-items: center; display: flex; flex-direction: column; @@ -225,14 +208,143 @@ } } } -} -.slick-slide { - &__shelf-card { - height: 390px; + &__prateleira { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } - ul { - list-style-type: none; + &__prateleira-title { + margin-bottom: 20px; + } + + &__shelfList { + width: 1016px; + + @include mq(pg, max) { + width: 991px; + } + + @include mq(lg, max) { + width: 760px; + } + + @include mq(md, max) { + width: 500px; + } + + @include mq(sm, max) { + width: 344px; + } + + @include mq(csin, max) { + width: 240px; + } + + @include mq(xxl, min) { + width: 1994.07px; + } + + ul { + display: flex; + justify-content: center; + margin: 0; + margin: 0 0 20px; + list-style-type: none; + // font-size: 0; + #text { + font-size: 0; + } + + li { + background: $color-blue2; + border-radius: 8px; + padding: 5px; + color: $color-white; + font-weight: 700; + font-size: 13px; + line-height: 18px; + font-family: $font-family; + text-transform: uppercase; + + @include mq(xxl, min) { + font-size: 26px; + line-height: 35px; + } + } + } + + figure { + margin: 0; + } + + figcaption { + margin: 20px 0; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: $color-black2; + font-family: $font-family; + + @include mq(xxl, min) { + font-weight: 400; + font-size: 26px; + line-height: 35px; + } + } + + .button-list { + width: 100%; + padding: 12px 72px; + border-radius: 8px; + background: $color-blue2; + outline: 0; + border: 0; + + a { + color: $color-white; + text-transform: uppercase; + font-weight: 700; + font-size: 13px; + line-height: 18px; + white-space: nowrap; + font-family: $font-family; + + @include mq(xxl, min) { + font-size: 26px; + line-height: 35px; + } + } + } + + button { + display: flex; + justify-content: center; + margin: 0; + } + } + + &__prateleira-title { + h2 { + font-family: $font-family-secundary; + font-style: normal; + text-align: center; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-black2; + + @include mq(xxl, min) { + font-size: 48px; + line-height: 76px; + } + } + } + + .ativado { + display: none !important; } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 056652e..0f0de87 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -17,6 +17,7 @@ $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-blue: #4267b2; +$color-blue2: #00c8ff; $color-green: #4caf50; @@ -25,6 +26,7 @@ $grid-breakpoints: ( xs: 0, csun: 285, csyn: 355, + csin: 370, cstm: 400, sm: 576px, md: 768px,