From 2123afe1a467c481492ce28f7f2fabcd9e6a88d0 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Wed, 14 Dec 2022 08:33:23 -0300 Subject: [PATCH 01/11] feat(header):Criando barra de progresso --- checkout/src/arquivos/js/components/Header.js | 90 +++++++++++++++++-- .../src/arquivos/sass/partials/_header.scss | 86 +++++++++++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 1 + .../template-checkout/checkout-header.html | 3 + 4 files changed, 174 insertions(+), 6 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..0ff3caf 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,94 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + // console.log(this.item); + this.progressBarHtml(); + this.progressBarProgress(); + window.addEventListener("hashchange", () => { + this.progressBarProgress(); + }); } async selectors() { - this.item = await waitElement("#my-element", { - //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar - timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise - interval: 1000, // vai verificar a cada 1 segundo se o elemento existe + this.header = await waitElement(".headerCheckout"); + this.progressBar = await waitElement("#progressBar"); + } + + progressBarHtml() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` +
+
+

Meu carrinho

+
+
+
+

Dados Pessoais

+
+
+ +
+

Pagamento

+
+
+ +
+
+
+
+
+
+
+
+ `; + } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } + } + + checkActiveColor(elements, index) { + elements.forEach((element, position) => { + if (index === position) { + if (!element.classList.contains("active")) { + element.classList.add("active"); + } + } else { + if (element.classList.contains("active")) { + element.classList.remove("active"); + } + } }); } + + progressBarProgress() { + if (this.progressBar && window.innerWidth > 1024) { + const progressBarLista = document.querySelectorAll("#circle-progress"); + progressBarLista.forEach((_element, _index, array) => { + const urlCart = "https://m3academy.myvtex.com/checkout/#/cart"; + const urlEmail = "https://m3academy.myvtex.com/checkout/#/email"; + const urlProfile = "https://m3academy.myvtex.com/checkout/#/profile"; + const urlShipping = "https://m3academy.myvtex.com/checkout/#/shipping"; + const urlPayment = "https://m3academy.myvtex.com/checkout/#/payment"; + switch (window.location.href) { + case urlCart: + this.checkActiveColor(array, 0); + break; + case urlEmail: + this.checkActiveColor(array, 1); + break; + case urlProfile: + this.checkActiveColor(array, 1); + break; + case urlShipping: + this.checkActiveColor(array, 1); + break; + case urlPayment: + this.checkActiveColor(array, 2); + break; + default: + } + }); + } + } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..2eaa24e 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -2,11 +2,95 @@ .headerCheckout { .container { width: auto !important; + + header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + } + + .container-progress-bar { + width: 440px; + display: flex; + flex-direction: row; + height: 100px; + justify-content: space-between; + position: relative; + } + + .step-one, .step-two, .step-three { + width: 100px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .box-progress-bar { + position: absolute; + top: 43%; + z-index: -1; + transform: translateY(-50%); + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 22px; + width: 100%; + height: 10px; + } + + .bar-one { + width: calc(50% - 50px); + height: 1px; + background-color: #000; + } + + .bar-two { + width: calc(50% - 50px); + height: 1px; + background-color: #000; + } + + .circle-progress1, .circle-progress2, .circle-progress3 { + width: 12px; + height: 12px; + border-radius: 6px; + background-color: #fff; + border: 1px solid #000; + } + + .active { + border: none; + background-color:#000; + } + + .step-one p, .step-two p, .step-three p { + line-height: 15px; + margin-bottom: 15px; + text-align: center; + } + + .line { + position: relative; + width: 100%; + } + + + hr { + position: absolute; + width: 100%; + // margin: 10px 0; + border-top: 1px solid black; + } + + } &__wrapper { align-items: center; display: flex; - justify-content: space-between; + justify-content:space-between; } &__logo { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..9e74ab1 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-black-full:#000000; $color-white: #fff; diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html index 258a0d6..16d0f04 100644 --- a/checkout/src/template-checkout/checkout-header.html +++ b/checkout/src/template-checkout/checkout-header.html @@ -18,3 +18,6 @@ + + + From 069ff9e7ce35fb0530fdd96b9dfdb35a1fe83170 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Thu, 15 Dec 2022 15:09:24 -0300 Subject: [PATCH 02/11] feat(footer):Criando footer --- checkout/src/arquivos/js/components/Footer.js | 67 ++++++++++++++- checkout/src/arquivos/js/components/Header.js | 1 - checkout/src/arquivos/sass/checkout.scss | 2 + .../arquivos/sass/partials/_prateleira.scss | 85 +++++++++++++++++++ .../template-checkout/checkout-footer.html | 1 + 5 files changed, 152 insertions(+), 4 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..d8f8193 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,11 +8,16 @@ export default class Footer { async init() { await this.selectors(); // this.onUpdate(); + this.addProductShelf(); + this.addCarrossel(); } async selectors() { - //Para verificar se o carrinho está vazio e remover a prateleira de produtos: - // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement + this.footerShelf = await waitElement(".footerCheckout__prateleira"); + this.footerAddress = await waitElement("footerCheckout__address"); + this.footerStamps = await waitElement(".footerCheckout__stamps"); + this.footerCheckoutPayment = await waitElement("footerCheckout__payments"); + this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy"); this.checkoutVazio = await waitElement(".empty-cart-content"); } @@ -30,11 +35,67 @@ export default class Footer { observer.observe(target, config); } + + addProductShelf() { + const createNode = (element) => { + return document.createElement(element); + }; + + // let image = this.footerStamps; + let shelf = this.footerShelf; + shelf.innerHTML = ` + +

Você também pode gostar

+ + `; + + const url = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + + fetch(url) + .then((resp) => resp.json()) + .then(function (data) { + console.log(data); + return data.map(function (product) { + let li = createNode("li"); + li.setAttribute("id", product.productId); + li.setAttribute("class", "card"); + li.innerHTML = ` +
+ +

${product.productName}

+
+
+ ${product.items.map((size) => { + return ` + + `; + })} +
+
+ +
+ + `; + + shelf.children[1].appendChild(li); + }); + }); + } + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".container-carrousel-item"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, }); } } + +// let img = createNode("img"); +// let span = createNode("span"); +// img.src = `${produto.items[0].images[0].images}` +// span.innerHTML = `${product.name.first} ${product.name.last}`; +// append(li, img); +// append(li, span); +// append(div, li); diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 0ff3caf..5a93efb 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,7 +8,6 @@ export default class Header { async init() { await this.selectors(); - // console.log(this.item); this.progressBarHtml(); this.progressBarProgress(); window.addEventListener("hashchange", () => { diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..a6d143a 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,4 +2,6 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira.scss"; @import "./checkout/checkout.scss"; + diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..68e09ff 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,86 @@ /* _prateleira.scss */ +.container-carrousel-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 16px; +} + +.card { + width: 242px; + height: 390px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 54px; +} + +.title-card { + font-family: 'Open Sans'; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: #000000; + margin-bottom: 20px; +} + +.footer-card { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center ; + padding: 0 20px 20px; +} + + +.button-card { + width:242px; + height:42px; + background: #00C8FF; + border-radius: 8px; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #FFFFFF; + padding: 12px 0; +} + +.button-div { + display: flex; + justify-content: center; + align-items: center; +} +.image-card { + width: 242px; + height: 242px; +} + +img { + height: 0; + max-width: 242px; + margin-bottom: 20px; +} +.sku { + width: 26px; + height: 28px; + background: #00C8FF; + border-radius: 8px; + padding: 5px; + color: #FFFFFF; + font-weight: 700; + font-size: 13px; + line-height: 18px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +// .sku:nth-child(10) { +// width: 80px; +// height: 28px; +// } diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..2cf5bfa 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -36,3 +36,4 @@ + From 785f7659c68328cab940b355f8d9327f7863ecf7 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Fri, 16 Dec 2022 13:40:48 -0300 Subject: [PATCH 03/11] feat(refactor) corrigindo estrutura js do footer --- checkout/src/arquivos/js/components/Footer.js | 63 ++++++++++++++++--- .../src/arquivos/sass/partials/_footer.scss | 13 ++++ .../arquivos/sass/partials/_prateleira.scss | 35 +++++++---- 3 files changed, 91 insertions(+), 20 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index d8f8193..82a0246 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,18 +7,20 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.onUpdate(); this.addProductShelf(); this.addCarrossel(); + this.addIconsFooter(); + this.addIconPayment(); } async selectors() { this.footerShelf = await waitElement(".footerCheckout__prateleira"); - this.footerAddress = await waitElement("footerCheckout__address"); - this.footerStamps = await waitElement(".footerCheckout__stamps"); - this.footerCheckoutPayment = await waitElement("footerCheckout__payments"); this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy"); + this.footerAddress = await waitElement(".footerCheckout__address"); + this.footerStamps = await waitElement(".footerCheckout__stamps"); this.checkoutVazio = await waitElement(".empty-cart-content"); + this.footerCheckoutPayment = await waitElement(".footerCheckout__payments"); } onUpdate() { @@ -29,7 +31,7 @@ export default class Footer { let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + this.footerShelf.style.display = "none"; }); }); @@ -41,7 +43,6 @@ export default class Footer { return document.createElement(element); }; - // let image = this.footerStamps; let shelf = this.footerShelf; shelf.innerHTML = ` @@ -67,8 +68,8 @@ export default class Footer {
${product.items.map((size) => { - return ` - + return ` `; })}
@@ -83,6 +84,52 @@ export default class Footer { }); } + addIconsFooter() { + this.footerStamps.children[0].innerHTML = ` +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ `; + this.footerStamps.children[2].innerHTML = ` +
+ +
+ `; + } + + addIconPayment() { + this.footerDevelopedBy.children[0].children[0].innerHTML = ` + ${this.footerDevelopedBy.children[0].children[0].children[0].innerHTML} +
+ +
+ `; + this.footerDevelopedBy.children[1].children[0].innerHTML = ` + ${this.footerDevelopedBy.children[1].children[0].children[0].innerHTML} +
+ +
+ `; + } + async addCarrossel() { const elemento = await waitElement(".container-carrousel-item"); $(elemento).slick({ diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..d2fb438 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -7,7 +7,13 @@ align-items: center; display: flex; justify-content: space-between; + + .container { + display: flex; } + } + + &__address { color: $color-gray2; @@ -19,6 +25,8 @@ text-transform: capitalize; max-width: 40%; + + @include mq(md, max) { margin-bottom: 24px; max-width: 100%; @@ -31,6 +39,11 @@ justify-self: center; list-style: none; + li:first-child { + display: flex; + flex-direction: row; + + } @include mq(md, max) { align-self: center; margin-bottom: 12px; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 68e09ff..4c3935c 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -11,7 +11,7 @@ width: 242px; height: 390px; display: flex; - flex-direction: column; + flex-direction: row; align-items: center; justify-content: center; margin-bottom: 54px; @@ -25,6 +25,8 @@ text-align: center; color: #000000; margin-bottom: 20px; + width: 242px; + height: 18px; } .footer-card { @@ -50,11 +52,11 @@ padding: 12px 0; } -.button-div { - display: flex; - justify-content: center; - align-items: center; -} +// .button-div { +// display: flex; +// justify-content: center; +// align-items: center; +// } .image-card { width: 242px; height: 242px; @@ -66,11 +68,11 @@ img { margin-bottom: 20px; } .sku { - width: 26px; + min-width: 26px; height: 28px; background: #00C8FF; border-radius: 8px; - padding: 5px; + padding: 4px; color: #FFFFFF; font-weight: 700; font-size: 13px; @@ -78,9 +80,18 @@ img { text-align: center; letter-spacing: 0.05em; text-transform: uppercase; + border-width: 0; + display: flex; + align-self: center; } -// .sku:nth-child(10) { -// width: 80px; -// height: 28px; -// } +.icon-image { + width: 36.52px; + height: 20px; + display: flex; + flex-direction: row; +} + +.icons { + margin-right: 13.2px; +} From 9ed1dfdc4c758727798f17986b459c59c2fe9fbc Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sat, 17 Dec 2022 11:32:49 -0300 Subject: [PATCH 04/11] feat(refactor): alterando cores e fontes do header/footer --- checkout/src/arquivos/js/components/Footer.js | 29 +-- checkout/src/arquivos/js/components/Header.js | 7 +- .../sass/checkout/_checkout-carrinho.scss | 45 ++-- .../sass/checkout/_checkout-vazio.scss | 9 +- .../src/arquivos/sass/checkout/_checkout.scss | 15 +- .../src/arquivos/sass/partials/_footer.scss | 39 +++- .../src/arquivos/sass/partials/_header.scss | 21 +- .../arquivos/sass/partials/_prateleira.scss | 198 +++++++++++------- .../src/arquivos/sass/utils/_variaveis.scss | 9 +- 9 files changed, 235 insertions(+), 137 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 82a0246..29c27d6 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -46,8 +46,8 @@ export default class Footer { let shelf = this.footerShelf; shelf.innerHTML = ` -

Você também pode gostar

-
    +

    Você também pode gostar:

    +
      `; const url = @@ -60,23 +60,26 @@ export default class Footer { return data.map(function (product) { let li = createNode("li"); li.setAttribute("id", product.productId); - li.setAttribute("class", "card"); + li.setAttribute("class", "containerCarousel__card"); li.innerHTML = `
      - -

      ${product.productName}

      + +

      ${product.productName}

      -
      - ${product.items.map((size) => { - return ` `; - })} + }) + .join("")}
      -
      - +
      +
      - `; shelf.children[1].appendChild(li); @@ -131,7 +134,7 @@ export default class Footer { } async addCarrossel() { - const elemento = await waitElement(".container-carrousel-item"); + const elemento = await waitElement(".containerCarousel"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 5a93efb..d13c524 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -25,16 +25,16 @@ export default class Header { this.progressBar.innerHTML = `
      -

      Meu carrinho

      +

      Meu carrinho

      -

      Dados Pessoais

      +

      Dados Pessoais

      -

      Pagamento

      +

      Pagamento

      @@ -44,7 +44,6 @@ export default class Header {
      -
      `; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..2a4fc9b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -114,7 +114,7 @@ color: $color-black; padding: 0 0 16px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; @@ -155,7 +155,7 @@ } a { - color: $color-blue; + color: $color-black-full; font-style: normal; font-weight: normal; font-size: 12px; @@ -179,7 +179,7 @@ } td.shipping-date { - color: $color-gray2; + color: $color-gray6; font-size: 12px; line-height: 14px; @@ -190,6 +190,12 @@ .product-price { min-width: 100px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-black; @include mq(md, max) { min-width: 78px; } @@ -216,9 +222,9 @@ } td.quantity { + border-radius: 8px; align-items: center; border: 1px solid $color-gray3; - border-radius: 0; box-sizing: border-box; display: flex; justify-content: center; @@ -242,7 +248,7 @@ margin: 0 !important; padding: 8px 0; width: 38px; - color: $color-gray2; + color: $color-black-full; box-shadow: none; @include mq(lg, max) { @@ -253,7 +259,7 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-white; display: block; font-weight: 500; padding: 1px 12px; @@ -263,14 +269,18 @@ .icon-minus-sign { &:before { content: "-"; + border-radius: 50%; font-size: 16px; + background-color: $color-blue2; } } .icon-plus-sign { &:before { content: "+"; - font-size: 14px; + font-size: 16px; + background-color: $color-blue2; + border-radius:50%; } } @@ -297,9 +307,9 @@ } span { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; color: $color-black; } } @@ -315,7 +325,7 @@ top: 0; } .icon::before { - color: $color-gray4; + color: $color-gray7; font-size: 15px; @include mq(md, max) { @@ -355,8 +365,8 @@ font-style: normal; font-weight: normal; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + color: $color-black-full; @include mq(md, max) { margin-top: 0; @@ -365,20 +375,21 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-weight: 400; + font-size: 14px; line-height: 18px; margin: 0 0 12px; } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray8; border: none; border-radius: 5px; - color: $color-gray2; - font-size: 16px; + color: $color-black-full; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; - font-weight: 500; + font-weight: 400; outline: none; padding: 12px 40px; transition: all 0.2s linear; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..0876fb9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -10,7 +10,14 @@ } &-title { - font-size: 20px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + color: $color-black-full; } &-links { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..ae5f80f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,11 +9,10 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + width: 100%; margin: auto auto 0 auto; } -footer .footerCheckout__prateleira, -header { +footer .footerCheckout__prateleira { width: 79.53125%; margin: 0 auto; } @@ -68,13 +67,13 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; + font-weight: 700; + font-size: 24px; + line-height: 33px; margin: 40px 0 30px; - letter-spacing: 0.1em; + letter-spacing: 0.05em; text-transform: uppercase; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index d2fb438..1349d4e 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -4,12 +4,15 @@ color: $color-gray2; &__wrapper { - align-items: center; display: flex; - justify-content: space-between; + width: 100%; + border-top: 1px solid $color-black-full; + .container { display: flex; + width: 100%; + justify-content: space-between; } } @@ -24,8 +27,12 @@ line-height: 12px; text-transform: capitalize; max-width: 40%; + display: flex; + align-items: center; - + span { + margin-left: 32px; + } @include mq(md, max) { margin-bottom: 24px; @@ -42,6 +49,8 @@ li:first-child { display: flex; flex-direction: row; + justify-content: center; + align-items: center; } @include mq(md, max) { @@ -84,4 +93,28 @@ } } } + + .footerCheckout::after, + ::before { + display: none; + content: none; + } + + .footerCheckout::before, + ::after { + display: none; + content: none; + } + } + +figure { + width: 100%; + margin-block-start: 0; + margin-block-end: 0; + margin-inline-start: 0; + margin-inline-end: 0; +} + + + diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 2eaa24e..26c6a52 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -25,6 +25,14 @@ flex-direction: column; justify-content: center; align-items: center; + + p { + font-family: 'Tenor Sans'; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-black-full; + } } .box-progress-bar { @@ -77,20 +85,13 @@ width: 100%; } - - hr { - position: absolute; - width: 100%; - // margin: 10px 0; - border-top: 1px solid black; - } - - } &__wrapper { align-items: center; display: flex; - justify-content:space-between; + justify-content:space-around; + width: 100%; + border-bottom: 1px solid black; } &__logo { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 4c3935c..5fa06e1 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1,88 +1,85 @@ /* _prateleira.scss */ -.container-carrousel-item { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 16px; -} - -.card { - width: 242px; - height: 390px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - margin-bottom: 54px; -} - -.title-card { - font-family: 'Open Sans'; - font-weight: 400; - font-size: 13px; - line-height: 18px; - text-align: center; - color: #000000; - margin-bottom: 20px; - width: 242px; - height: 18px; -} - -.footer-card { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center ; - padding: 0 20px 20px; -} + .containerCarousel { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 16px; + width: 100%; -.button-card { - width:242px; - height:42px; - background: #00C8FF; - border-radius: 8px; - font-weight: 700; - font-size: 13px; - line-height: 18px; - letter-spacing: 0.05em; - text-transform: uppercase; - color: #FFFFFF; - padding: 12px 0; + &__card { + width: 95% !important; + margin-bottom: 54px; + } + + &__image { + width: 100%; + height: 242px; + background-color:$color-gray5; + } + + + &__title { + font-family: $font-family; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: $color-black-full; + margin-bottom: 20px; + width: 242px; + height: 18px; + } + + &__div { + display: flex; + align-items: center; + justify-content: center; + padding: 0 20px 20px; + gap: 5px; + + } + + &__sku { + min-width: 26px; + height: 28px; + background: $color-blue2; + border-radius: 8px; + padding: 4px; + color: $color-white; + font-weight: 700; + font-size: 13px; + line-height: 18px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + border-width: 0; + display: flex; + flex-direction: row; + } + } -// .button-div { -// display: flex; -// justify-content: center; -// align-items: center; -// } -.image-card { - width: 242px; - height: 242px; -} +.buttonDiv { + display: flex; + align-items: center; + justify-content: center; -img { - height: 0; - max-width: 242px; - margin-bottom: 20px; -} -.sku { - min-width: 26px; - height: 28px; - background: #00C8FF; - border-radius: 8px; - padding: 4px; - color: #FFFFFF; - font-weight: 700; - font-size: 13px; - line-height: 18px; - text-align: center; - letter-spacing: 0.05em; - text-transform: uppercase; - border-width: 0; - display: flex; - align-self: center; + &__card { + background: $color-blue2; + border-radius: 8px; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + padding: 12px 0; + width:242px; + height:42px; + border:none; + } } .icon-image { @@ -95,3 +92,46 @@ img { .icons { margin-right: 13.2px; } + +img { + height: 0; + margin-bottom: 20px; +} + + +hr { + width: 100%; + height: 2px; + border-top: 1px solid $color-black-full; + margin-bottom: 65px; +} + +.title-footer { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: $color-black-full; +} + + +.slick-prev { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + no-repeat center center; + z-index: 4; + left: 22px; + top: 41%; + border: none; + height: 30px; +} +.slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + z-index: 4; + right: 20px; + top: 41%; + border: none; + height: 30px; +} diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 9e74ab1..85260a5 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -7,16 +7,21 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; $color-black-full:#000000; - $color-white: #fff; - $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray8: #ededed; +$color-gray6: #989898; +$color-gray7: #C4C4C4;; + + + $color-blue: #4267b2; +$color-blue2:#00C8FF; $color-green: #4caf50; From 038e0733f15270955011a866cde7f99997a30f43 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sat, 17 Dec 2022 13:18:30 -0300 Subject: [PATCH 05/11] feat(refactor):modificando css do header --- .../sass/checkout/_checkout-autenticacao.scss | 74 +++++++++++++++---- .../sass/checkout/_checkout-carrinho.scss | 64 ++++++++-------- .../src/arquivos/sass/checkout/_checkout.scss | 2 +- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 4 files changed, 96 insertions(+), 45 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..e5c76aa 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -8,9 +8,20 @@ a { color: $color-black; font-size: 14px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + + /* Black */ + + color: #000000; &:hover { - color: lighen($color-black, 10); + color: lighen($color-black-full, 10); } } } @@ -25,12 +36,25 @@ margin-bottom: 16px; span { - color: #303030; - font-size: 24px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: $color-black-full; } small { - color: $color-gray4; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: $color-black-full; } } } @@ -40,10 +64,11 @@ input { box-shadow: none; - color: $color-black; + color: $color-black-full; font-family: $font-family; + font-weight: 400; padding: 0 16px; - border: 2px solid $color-gray3; + border: 2px solid $color-black-full; box-sizing: border-box; border-radius: 5px; @@ -53,7 +78,17 @@ } button { - background-color: $color-black; + background-color: $color-blue2; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + + color:$color-black-full; border-radius: 5px; border: none; font-family: $font-family; @@ -69,19 +104,26 @@ } span.help.error { - color: red; + color: $color-red; + font-size: 12px; + line-height: 16px; + font-weight: 700; } } .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black-full; + border-radius: 5px; h3 { - color: #303030; + color:$color-black-full; margin: 0 0 8px 0; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 16px; } ul { @@ -89,11 +131,17 @@ li { span { - color: $color-black; + color:$color-black-full; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 16px; + font-size: 12px; + } i::before { - color: $color-black; + color: $color-blue2; font-size: 1rem; opacity: 1; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 2a4fc9b..ee82df4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -416,25 +416,26 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; + padding: 12px 35px; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } } @@ -450,17 +451,17 @@ font-style: normal; font-weight: normal; font-size: 14px; - line-height: 16px; + line-height: 19px; text-transform: uppercase; } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black-full; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black-full; } label { @@ -496,9 +497,9 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; font-size: 12px; height: 36px; @@ -619,7 +620,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-full; text-decoration: none; } } @@ -641,7 +642,9 @@ } .coupon-label label { - margin-bottom: 12px; + margin-bottom:0; + text-align: left; + margin-left: 38px; font-family: $font-family; font-style: normal; font-weight: normal; @@ -684,17 +687,16 @@ } button { - background: $color-black; + background: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; + color: $color-black-full; + font-size: 14px; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05em; margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; text-transform: uppercase; @include mq(md, max) { @@ -702,11 +704,11 @@ } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } } @@ -724,7 +726,7 @@ &.info, &.monetary { font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; color: $color-black; @@ -745,9 +747,9 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; + line-height: 25px; color: $color-black; } } @@ -787,31 +789,31 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-full; } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; padding: 12px 19px; &:hover { - background-color: darken($color-green, 5); + background-color: darken($color-blue2, 5); } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black-full; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ae5f80f..071eae9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -67,7 +67,7 @@ body { #cart-title, #orderform-title { - color: $color-black; + color: $color-black-full; font-family: $font-family; font-weight: 700; font-size: 24px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 85260a5..c56ea4d 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -20,6 +20,7 @@ $color-gray7: #C4C4C4;; +$color-red: #FF0000; $color-blue: #4267b2; $color-blue2:#00C8FF; From c091b273cca48f89c92ca078e6c0a1fe3d66d3c9 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sun, 18 Dec 2022 16:06:18 -0300 Subject: [PATCH 06/11] feat(refactor): removendo e adicionando elementos via js --- checkout/src/arquivos/js/components/Footer.js | 80 +++++++++++++------ checkout/src/arquivos/js/components/Header.js | 16 ++++ .../sass/checkout/_checkout-autenticacao.scss | 37 +++++++-- .../sass/checkout/_checkout-carrinho.scss | 34 +++++--- .../sass/checkout/_checkout-vazio.scss | 18 ++--- .../arquivos/sass/partials/_prateleira.scss | 4 +- .../src/arquivos/sass/utils/_variaveis.scss | 7 +- 7 files changed, 142 insertions(+), 54 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 29c27d6..c90dee1 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,11 +7,18 @@ export default class Footer { async init() { await this.selectors(); - this.onUpdate(); this.addProductShelf(); - this.addCarrossel(); this.addIconsFooter(); this.addIconPayment(); + this.addCarrossel(); + // this.onUpdate(); + // window.addEventListener("hashchange", () => { + // const isCartRouter = window.location.hash === "#/cart"; + // if (!isCartRouter) { + // document.querySelector(".containerCarousel").style.display = "none"; + // document.querySelector(".title-footer").style.display = "none"; + // } + // }); } async selectors() { @@ -24,17 +31,23 @@ export default class Footer { } onUpdate() { - //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: - // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver - // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver - let target = this.checkoutVazio; + let target = document.querySelector(".empty-cart-content"); + let observer = new MutationObserver(handleMutationObserver); let config = { childList: true, attributes: true }; - let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - this.footerShelf.style.display = "none"; - }); - }); + function handleMutationObserver(mutations) { + mutations.forEach(function (mutation) { + const carrousel = document.querySelector(".containerCarousel"); + const titleFooter = document.querySelector(".title-footer"); + if (mutation.target.style.display === "none") { + carrousel.style.display = "flex"; + titleFooter.style.display = "flex"; + } else { + carrousel.style.display = "none"; + titleFooter.style.display = "none"; + } + }); + } observer.observe(target, config); } @@ -83,6 +96,7 @@ export default class Footer { `; shelf.children[1].appendChild(li); + // shelf.classList.add("fetch"); }); }); } @@ -135,17 +149,37 @@ export default class Footer { async addCarrossel() { const elemento = await waitElement(".containerCarousel"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + if (window.innerWidth > 1024) { + $(elemento).slick({ + slidesToShow: 4, + slidesToSrcoll: 1, + }); + // } + // } + // slidesToShow: 4, + // slidesToScroll: 1, + // }); + + // if ($(elemento).hasClass("slick-initialized")) { + // $(elemento).slick("unslick"); + // } + // if (window.innerWidth > 1024) { + // $(elemento).not(".slick-initialized").slick({ + // slidesToShow: 4, + // slidesToScroll: 1, + // }); + // } else if (window.innerWidth > 375) { + // $(elemento).not(".slick-initialized").slick({ + // slidesToShow: 3, + // slidesToScroll: 1, + // }); + // } else if (window.innerWidth <= 375) { + // $(elemento).not(".slick-initialized").slick({ + // slidesToShow: 2, + // slidesToScroll: 1, + // }); + // } + // } + } } } - -// let img = createNode("img"); -// let span = createNode("span"); -// img.src = `${produto.items[0].images[0].images}` -// span.innerHTML = `${product.name.first} ${product.name.last}`; -// append(li, img); -// append(li, span); -// append(div, li); diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index d13c524..065bfe5 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -10,6 +10,8 @@ export default class Header { await this.selectors(); this.progressBarHtml(); this.progressBarProgress(); + this.changeProfileParagraf(); + this.changeContents(); window.addEventListener("hashchange", () => { this.progressBarProgress(); }); @@ -18,6 +20,9 @@ export default class Header { async selectors() { this.header = await waitElement(".headerCheckout"); this.progressBar = await waitElement("#progressBar"); + this.profileParagraf = await waitElement(".client-notice"); + this.changeLinkHeader = await waitElement("a#cart-choose-products"); + this.changeTextHeader = await waitElement("div.empty-cart-message p"); } progressBarHtml() { @@ -96,4 +101,15 @@ export default class Header { }); } } + + changeProfileParagraf() { + this.profileParagraf.innerHTML = ` +

      Identificação

      + `; + } + + changeContents() { + this.changeTextHeader.innerText = ""; + this.changeLinkHeader.innerText = "CONTINUAR COMPRANDO"; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index e5c76aa..3d29442 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -170,6 +170,7 @@ color: #303030; margin-bottom: 8px; padding: 0; + display: none; i::before { fill: #303030; @@ -194,20 +195,33 @@ /* General configurations */ .client-notice { - color: $color-black; + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #292929; } p { label { - color: $color-black; - font-weight: 500; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray10; + width: 100%; + } select, input { border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray9; box-shadow: none; + + } .help.error { @@ -221,6 +235,7 @@ color: $color-black; font-weight: 500; text-decoration: underline; + display: none; } } @@ -231,17 +246,25 @@ button.submit { border: none; border-radius: 5px; - background: $color-black; + background: $color-blue2; margin-top: 8px; outline: none; transition: all 0.2s linear; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + width: 100%; &:hover { - background: lighten($color-black, 5); + background: lighten($color-blue2, 5); } &:active { - background: darken($color-black, 5); + background: darken($color-blue2, 5); } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index ee82df4..f35809a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -85,18 +85,26 @@ } #payment-data-submit { - background: $color-black; - border: none; - border-radius: 0; + background: $color-green; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; &:hover { - background: lighten($color-black, 5); + background: lighten($color-green, 5); } &:active { - background: darken($color-black, 5); + background: darken($color-green, 5); } } } @@ -240,7 +248,7 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; + border: 1px solid transparent; border-radius: 0; border-width: 0 1px; display: block; @@ -268,18 +276,16 @@ .icon-minus-sign { &:before { - content: "-"; border-radius: 50%; - font-size: 16px; - background-color: $color-blue2; + font-size: 20px; + color: $color-blue2; } } .icon-plus-sign { &:before { - content: "+"; - font-size: 16px; - background-color: $color-blue2; + font-size: 20px; + color: $color-blue2; border-radius:50%; } } @@ -474,6 +480,9 @@ } .srp-postal-code { + .ship-country { + display: none; + } .ship-postalCode { label { font-family: $font-family; @@ -483,6 +492,7 @@ line-height: 14px; color: $color-black; margin-bottom: 12px; + } input { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 0876fb9..296d19a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -22,23 +22,21 @@ &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; + background: $color-white; + border: 1px solid $color-black-full; transition: ease-in 0.22s all; outline: none; - font-family: $font-family; - font-style: normal; - font-weight: 500; font-size: 14px; line-height: 16px; text-align: center; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; + text-transform: uppercase; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + color: $color-black-full; &:hover { - background: lighten($color-black, 5); + background: lighten($color-white, 5); } } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 5fa06e1..bf1d414 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1,6 +1,6 @@ /* _prateleira.scss */ .containerCarousel { - display: flex; + display:flex; flex-direction: row; align-items: center; justify-content: center; @@ -107,6 +107,8 @@ hr { } .title-footer { + display: flex; + justify-content: center; font-family: $font-family-secundary; font-style: normal; font-weight: 400; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index c56ea4d..e8195b3 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -8,14 +8,19 @@ $font-family-secundary:"Tenor Sans", sans-serif; $color-black: #292929; $color-black-full:#000000; $color-white: #fff; +$color-white2:#E5E5E5; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; -$color-gray8: #ededed; $color-gray6: #989898; $color-gray7: #C4C4C4;; +$color-gray8: #ededed; +$color-gray9: #BDBDBD; +$color-gray10:#808080; + + From 6bb781044b0b9781d1f1c8665023baa249b3aaf6 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sun, 18 Dec 2022 20:46:21 -0300 Subject: [PATCH 07/11] refactor:melhorando o codigo css nas paginas --- .../src/arquivos/sass/checkout/_checkout-autenticacao.scss | 2 +- checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss | 2 +- checkout/src/arquivos/sass/partials/_header.scss | 4 +++- checkout/src/arquivos/sass/partials/_prateleira.scss | 6 +++++- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 3d29442..6ba2453 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -170,7 +170,7 @@ color: #303030; margin-bottom: 8px; padding: 0; - display: none; + i::before { fill: #303030; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index f35809a..aa0772b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -236,7 +236,7 @@ box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; + margin: 23px auto 0; max-height: 38px; max-width: 118px; padding: 0; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 26c6a52..aca275c 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -102,6 +102,8 @@ } &__safeBuy { + + display: flex; span { align-items: center; display: flex; @@ -111,7 +113,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-gray; + color: $color-black; } i { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index bf1d414..79001db 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -94,7 +94,11 @@ } img { - height: 0; + display: flex; + flex-direction: column; + margin-top: 17px; + margin-right: 8px; + height: 15px; margin-bottom: 20px; } From 294fcc44f832200b071958735ecda6ae6b578106 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sun, 18 Dec 2022 21:36:13 -0300 Subject: [PATCH 08/11] feat:adicionando media nas paginas de css 375px --- checkout/src/arquivos/js/components/Footer.js | 36 ++++++------------- .../sass/checkout/_checkout-vazio.scss | 17 ++++++--- .../arquivos/sass/partials/_prateleira.scss | 5 +++ .../src/arquivos/sass/utils/_variaveis.scss | 2 +- 4 files changed, 28 insertions(+), 32 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index c90dee1..d8243ce 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -154,32 +154,16 @@ export default class Footer { slidesToShow: 4, slidesToSrcoll: 1, }); - // } - // } - // slidesToShow: 4, - // slidesToScroll: 1, - // }); - - // if ($(elemento).hasClass("slick-initialized")) { - // $(elemento).slick("unslick"); - // } - // if (window.innerWidth > 1024) { - // $(elemento).not(".slick-initialized").slick({ - // slidesToShow: 4, - // slidesToScroll: 1, - // }); - // } else if (window.innerWidth > 375) { - // $(elemento).not(".slick-initialized").slick({ - // slidesToShow: 3, - // slidesToScroll: 1, - // }); - // } else if (window.innerWidth <= 375) { - // $(elemento).not(".slick-initialized").slick({ - // slidesToShow: 2, - // slidesToScroll: 1, - // }); - // } - // } + } else if (window.innerWidth <= 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 2, + slidesToScroll: 1, + }); + } else if (window.innerWidth > 375) { + $(elemento).not(".slick-initialized").slick({ + slidesToShow: 3, + slidesToScroll: 1, + }); } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 296d19a..25476e5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -3,10 +3,6 @@ &-content { color: $color-black; text-align: center; - - @include mq(md, max) { - padding: 0 16px; - } } &-title { @@ -18,7 +14,18 @@ text-align: center; text-transform: uppercase; color: $color-black-full; - } + + + @media(max-width:375px) { + font-size: 18px; + line-height: 25px; + width: 300px; + margin-right: 15px; + } + + + } + &-links { .link-choose-products { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 79001db..aefa751 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -7,6 +7,11 @@ gap: 16px; width: 100%; + @include mq(cstm, max) { + display: flex; + flex-direction: column; + } + &__card { width: 95% !important; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index e8195b3..ab57814 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -34,7 +34,7 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, - cstm: 400, + cstm: 375px, sm: 576px, md: 768px, lg: 992px, From 8487d8952a8bd1e97686eaefcc9d788fcc13011f Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sun, 18 Dec 2022 21:45:38 -0300 Subject: [PATCH 09/11] feat:adicionando media nas telas de 375px --- .../sass/checkout/_checkout-autenticacao.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 6ba2453..9e5897e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -44,6 +44,12 @@ text-align: center; text-transform: uppercase; color: $color-black-full; + + @media(max-width:375px) { + font-size: 12px; + line-height: 14px; + width: 343px; + } } small { @@ -55,6 +61,11 @@ text-align: center; text-transform: uppercase; color: $color-black-full; + + @media(max-width:375px) { + font-size: 12px; + line-height: 14px; + } } } } From 60aafc4fcde058c680c717dffb5bdaf24245c5cc Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sun, 18 Dec 2022 21:56:55 -0300 Subject: [PATCH 10/11] feat:adicionando css nas telas de 375px --- checkout/src/arquivos/sass/checkout/_checkout.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 071eae9..48e73f3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -48,8 +48,14 @@ body { } .container-order-form, .container-cart { - width: 80%; + width: 80%; + + @media(max-width:375px) { + margin-left: 16px; + } } + + } .btn-success { From 8bdd116678225356cfaf89a2e79e34f045b55c75 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sun, 18 Dec 2022 22:06:30 -0300 Subject: [PATCH 11/11] feat:modificando alguns css para telas de 1280px --- .../src/arquivos/sass/checkout/_checkout-autenticacao.scss | 4 ++-- checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 9e5897e..8b76817 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -171,8 +171,8 @@ .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 8px; + border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index aa0772b..95621e9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -48,7 +48,7 @@ } .cart { - border: 1px solid $color-gray4; + border: 1px solid $color-gray3; ul li { border-top: none;