From fb72081f07c846da523597ff20c8d099fec36555 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Thu, 15 Dec 2022 23:23:59 -0300 Subject: [PATCH] feat: adiciona a prateleira de produtos e footer responsivo em todas as telas --- checkout/src/arquivos/js/components/Footer.js | 53 ++- checkout/src/arquivos/js/components/Header.js | 4 +- .../src/arquivos/sass/partials/_footer.scss | 332 +++++++++++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 3 +- 4 files changed, 364 insertions(+), 28 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index f68e8e8..655f0c6 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -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 { Imagem ${product.productName}
${product.productName}
-
- - +
${product.items.map((nameProduct) => { + return ` + ` + }).join("")}
-
- +
+
` footerPrat.children[1].appendChild(li) @@ -70,15 +69,15 @@ export default class Footer { ` iconCard.innerHTML = ` -
  • Imagem Master Card
    • -
  • Imagem Visa Card
    • -
  • Imagem American Express
    • -
  • Imagem Elo Card
    • -
  • Imagem Hiper Card
    • -
  • Imagem PayPal
    • -
  • Imagem Boleto
    • -
    • -
  • Imagem Vtex
    • +
  • Imagem Master Card
    • +
  • Imagem Visa Card
    • +
  • Imagem American Express
    • +
  • Imagem Elo Card
    • +
  • Imagem Hiper Card
    • +
  • Imagem PayPal
    • +
  • Imagem Boleto
    • +
    • +
  • Imagem Vtex
    • ` developedBy.innerHTML = `

  • Powered By

    Imagem VTEX
    • @@ -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, + } + } + ] }); } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 477ffa5..501c928 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -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 {
  • ` - } + }; if (this.progressBar && window.innerWidth <= 1024) { this.progressBar.innerHTML = ``; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 1b300ab..49cacbf 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -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; - } - } - .iconVtex { - height: 33px; + @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; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 3797a39..91a2a03 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -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;