From bd9fd288540fc6147612d0caf4c4ccca666ab39f Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 19 Dec 2022 14:32:25 -0300 Subject: [PATCH 01/17] fix:concertando o footer --- checkout/src/arquivos/js/components/Header.js | 7 +++++++ checkout/src/arquivos/js/components/app.js | 3 ++- .../src/arquivos/sass/checkout/_checkout-carrinho.scss | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index d2fac82..46f66a1 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -23,6 +23,7 @@ export default class Header { }); this.MeuCarrinho = await waitElement("#cart-title"); this.Finalizar_Pedido = await waitElement("#orderform-title"); + this.Finalizar_Pagamento = await waitElement(".store-country-BRA"); this.step = document.querySelector('.completed'); this.prateleira = await waitElement(".footerCheckout__prateleira"); this.Footer = await waitElement(".footerCheckout"); @@ -76,6 +77,7 @@ export default class Header { || window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){ MeuCarrinho.classList.add('hide'); this.Finalizar_Pedido.classList.remove('hide') + this.Finalizar_Pagamento.classList.add('hide'); if(li.children[1].id === "step_2"){ step1.classList.remove('completed'); step3.classList.remove('completed'); @@ -84,9 +86,14 @@ export default class Header { Footer.classList.remove('footerCheckout__ComSlick'); } } + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" + || window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){ + this.Finalizar_Pagamento.classList.remove('hide'); + } if(window.location.href =="https://m3academy.myvtex.com/checkout/#/payment"){ MeuCarrinho.classList.add('hide'); this.Finalizar_Pedido.classList.remove('hide') + this.Finalizar_Pagamento.classList.remove('hide'); if(li.children[1].id === "step_3"){ step1.classList.remove('completed'); step2.classList.remove('completed'); diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 92bdb32..599589f 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -45,6 +45,7 @@ export default class Footer { }); this.tbody = await waitElement(".accordion-inner"); this.LapisAzul = await waitElement(".icon-edit"); + // this.HomeIcon = await waitElement(".delivery-address-title"); this.btnCep = await waitElement("#shipping-calculate-link"); this.Dados_profile = document.querySelectorAll(".accordion-group")[1]; this.pay__Wrapper = document.createElement("div"); @@ -80,7 +81,7 @@ export default class Footer { tbodywrapper.appendChild(this.more) tbodywrapper.appendChild(this.Finalizar_btn) tbody.appendChild(tbodywrapper) - console.log(this.LapisAzul,"lapis azul") + console.log(this.HomeIcon,"Lugar onde você colocara o icone") const IconDev = document.querySelector(".footerCheckout__developedBy") this.Finalizar_btn.innerHTML =` FINALIZAR COMPRA diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index ad53583..bec69bb 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -44,7 +44,7 @@ div{ border: 0 !important; @include mq(xll, max) { - width: 100%; + width: 100% !important; } } } From 2a58a51b26f9d287d134b37a28da834375731d98 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 20 Dec 2022 10:24:35 -0300 Subject: [PATCH 02/17] feat:inserindo html --- .../arquivos/assets/svgs/Rectangle 138.svg | 3 + checkout/src/arquivos/js/components/Footer.js | 14 ++--- checkout/src/arquivos/js/components/app.js | 47 +++++++++++++- .../sass/checkout/_checkout-autenticacao.scss | 34 +++++++++-- .../sass/checkout/_checkout-pagamento.scss | 61 +++++++++++-------- 5 files changed, 120 insertions(+), 39 deletions(-) create mode 100644 checkout/src/arquivos/assets/svgs/Rectangle 138.svg diff --git a/checkout/src/arquivos/assets/svgs/Rectangle 138.svg b/checkout/src/arquivos/assets/svgs/Rectangle 138.svg new file mode 100644 index 0000000..8c52abc --- /dev/null +++ b/checkout/src/arquivos/assets/svgs/Rectangle 138.svg @@ -0,0 +1,3 @@ + + + diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 3ef4bc6..4099d7a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -55,7 +55,7 @@ export default class Footer { let target = this.checkoutVazio; let target2 = this.prateleira; let Footer = this.Footer; - const MeuCarrinho = this.MeuCarrinho + const MeuCarrinho = this.MeuCarrinho; let config = { childList: false, attributes: true, @@ -63,7 +63,8 @@ export default class Footer { attributeFilter:["style"], subtree:false, characterData:true, - characterDataOldValue:true}; + characterDataOldValue:true + }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue,mutation); @@ -71,18 +72,17 @@ export default class Footer { if(mutation.oldValue == "display: none;"){ console.log("entrei no if",mutation.oldValue) MeuCarrinho.classList.add('hide'); - target2.classList.add('hide') - Footer.classList.remove('footerCheckout__ComSlick') + target2.classList.add('hide'); + Footer.classList.remove('footerCheckout__ComSlick'); }else{ console.log("entrei no else",mutation.oldValue) MeuCarrinho.classList.remove('hide'); - target2.classList.remove('hide') - Footer.classList.add('footerCheckout__ComSlick') + target2.classList.remove('hide'); + Footer.classList.add('footerCheckout__ComSlick'); } } }); }); - observer.observe(target, config); } async addCarrossel() { diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 599589f..91dfc48 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -10,6 +10,7 @@ export default class Footer { await this.selectors(); await this.event(); await this.TextTransfer(); + await this.onUpdate(); } async selectors() { @@ -45,9 +46,11 @@ export default class Footer { }); this.tbody = await waitElement(".accordion-inner"); this.LapisAzul = await waitElement(".icon-edit"); - // this.HomeIcon = await waitElement(".delivery-address-title"); this.btnCep = await waitElement("#shipping-calculate-link"); this.Dados_profile = document.querySelectorAll(".accordion-group")[1]; + this.Dados_profile_payment = document.querySelectorAll(".accordion-group")[3]; + this.safeP = document.createElement("p"); + this.Dados_profileAll = document.querySelectorAll(".accordion-group"); this.pay__Wrapper = document.createElement("div"); this.Finalizar_btn = document.createElement("button"); this.more = document.createElement("p"); @@ -55,7 +58,7 @@ export default class Footer { } async event() { this.btnCep.addEventListener("click",this.nonExist.bind(this)) - + window.addEventListener("hashchange", this.TextTransfer.bind(this)); } async nonExist(){ this.cep = await waitElement('.ship-postalCode small a'); @@ -73,6 +76,7 @@ export default class Footer { } async TextTransfer(){ const dadosProfile =this.Dados_profile.children[0].children[0].children[1] + const Dados_profile_payment =this.Dados_profile_payment.children[0] const tbodywrapper = this.wrapper; const tbody = this.tbody.children[1].children[3]; const table = this.table.children[0].children[0].children[1]; @@ -81,8 +85,13 @@ export default class Footer { tbodywrapper.appendChild(this.more) tbodywrapper.appendChild(this.Finalizar_btn) tbody.appendChild(tbodywrapper) - console.log(this.HomeIcon,"Lugar onde você colocara o icone") + console.log(this.Dados_profileAll,"Todos os conteiners de pagamento") + console.log(Dados_profile_payment,"Todos os conteiners de pagamento") const IconDev = document.querySelector(".footerCheckout__developedBy") + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ + + this.Dados_profile_payment.children[0].appendChild(this.safeP) + } this.Finalizar_btn.innerHTML =` FINALIZAR COMPRA ` @@ -92,6 +101,9 @@ export default class Footer { this.more.innerHTML =` Escolher mais produtos ` + this.safeP.innerHTML =` + Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados + ` table.innerHTML= ` Frete @@ -161,4 +173,33 @@ export default class Footer { CONTINUAR COMPRANDO ` } + async onUpdate() { + const target = this.Dados_profile_payment; + const safeP = this.safeP; + let config = { + childList: false, + attributes: true, + attributeOldValue:true, + subtree:false, + characterData:true, + characterDataOldValue:true + }; + let observer = new MutationObserver((mutations) => { + mutations.forEach(function (mutation) { + console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue); + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ + console.log(mutation) + if(mutation.oldValue == "step accordion-group store-country-BRA active"){ + console.log("o pai está aberto",mutation.oldValue) + console.log(target) + } + } + else{ + console.log("o pai está fechado") + } + }); + }); + + observer.observe(target, config); + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 2461b50..9cd1069 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -241,7 +241,7 @@ border: 1px solid $color-gray4; border-radius: 0; - label { + label{ background-color: $color-white; box-shadow: none; color: #303030; @@ -265,11 +265,31 @@ } .address-summary { + position: relative; background: none; border-color: $color-gray4; - border-radius: 0; color: #303030; - padding: 12px; + padding: 26px; + .street, + .neighborhood{ + margin-left: 18px; + } + .postalCode{ + margin-left: 20px; + } + &::before{ + content: ""; + position: absolute; + left: 0; + bottom: 33px; + margin-left: 12px; + margin-right: 8px; + width: 24px; + height: 24px; + background: no-repeat; + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); + background-size: 24px; + } @include mq(md, max) { background-position: 8px 9px; @@ -306,8 +326,14 @@ } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + color:#7D7D7D; + text-shadow: 0.3px 1px #292929; + } + .vtex-omnishipping-1-x-deliveryOptionInactive{ + color:rgba(196, 196, 196, 1) !important; + + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 951c6df..d95c394 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -14,32 +14,39 @@ body .container-main.container-order-form .orderform-template.active { } #postalCode-finished-loading{ .shipping-method-toggle{ - background: transparent !important; - border-radius: 16px !important; - border: 1px solid $color-black !important; + border: 1px solid $color-black; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); + border-radius: 100px; } div{ background: transparent !important; - border-radius: 16px !important; + border-radius: 32px !important; + box-shadow: 0px 0px 3px rgba(196, 196, 196, 1); } span{ - color: $color-black; - text-shadow: none !important; + // color:#7D7D7D; + // text-shadow: 0.3px 1px #292929 !important; text-transform: uppercase; + font-family: $font-family; + font-weight: 400; + font-size: 14px; + line-height: 19px; + font-style: normal; + box-sizing: border-box; } } -#ship-number{ - width: 296px; - height: 35px; -} +#ship-number, +#ship-receiverName, +#ship-postalCode, #ship-complement{ - width: 296px; - height: 35px; + width: 296px !important; + height: 35px !important; + max-width: 100%!important; } -#ship-receiverName{ - width: 296px; - height: 35px; +#ship-postalCode{ + margin-bottom: 10px; } + .ship-country{ display: none; } @@ -69,7 +76,6 @@ body .container-main.container-order-form .orderform-template.active { } } .accordion-group{ - width: 332px; border-radius: 4px!important; border: 1px solid $color-gray3; border: 1px solid $color-gray6 !important; @@ -77,6 +83,7 @@ body .container-main.container-order-form .orderform-template.active { p, label{ color: #7D7D7D !important; + font-weight: 700 !important; } input, .cart{ @@ -135,7 +142,7 @@ body .container-main.container-order-form .orderform-template.active { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } #payment-data{ - width: 719px !important; + max-width: 719px !important; #payment-group-custom204PaymentGroupPaymentGroup, #payment-group-SPEIPaymentGroup, #payment-group-MercadoPagoPaymentGroup, @@ -150,17 +157,17 @@ body .container-main.container-order-form .orderform-template.active { #payment-group-creditDirectSalePaymentGroup{ display: none; } + .btn-small{ + background: transparent !important; + border: 0 !important; + &:hover{ + border: 0 !important; + } + } .form-step{ display: flex; height: 452px; } - .accordion-group{ - width: 680px !important; - height: 452px !important; - } - // h3{ - // display: block !important; - // } span, a{ width: 210px; @@ -186,9 +193,13 @@ body .container-main.container-order-form .orderform-template.active { .steps-view{ position: absolute; right: 0; - top: -2px; + top: 33px; } } .PaymentCardHolderDocument{ display: none !important; } +.payment-group-item.active{ + margin: 0 0 0 5px; +} + From 42dff75a0c3fff2e7d8189f6d16eef924f6dea4f Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 20 Dec 2022 13:35:17 -0300 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20p=C3=A1gina=20de=20pagamento=20fi?= =?UTF-8?q?nalizada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/app.js | 135 +++++++++++++++++++-- 1 file changed, 125 insertions(+), 10 deletions(-) diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 91dfc48..786ed7b 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -47,6 +47,7 @@ export default class Footer { this.tbody = await waitElement(".accordion-inner"); this.LapisAzul = await waitElement(".icon-edit"); this.btnCep = await waitElement("#shipping-calculate-link"); + this.Dados_profile_payment_wrapper = await waitElement("#payment-data"); this.Dados_profile = document.querySelectorAll(".accordion-group")[1]; this.Dados_profile_payment = document.querySelectorAll(".accordion-group")[3]; this.safeP = document.createElement("p"); @@ -75,6 +76,7 @@ export default class Footer { } } async TextTransfer(){ + const payment_group = this.Dados_profile_payment_wrapper; const dadosProfile =this.Dados_profile.children[0].children[0].children[1] const Dados_profile_payment =this.Dados_profile_payment.children[0] const tbodywrapper = this.wrapper; @@ -85,13 +87,56 @@ export default class Footer { tbodywrapper.appendChild(this.more) tbodywrapper.appendChild(this.Finalizar_btn) tbody.appendChild(tbodywrapper) - console.log(this.Dados_profileAll,"Todos os conteiners de pagamento") - console.log(Dados_profile_payment,"Todos os conteiners de pagamento") + // console.log(this.Dados_profileAll,"Todos os conteiners de pagamento") + // console.log(Dados_profile_payment,"Todos os conteiners de pagamento") const IconDev = document.querySelector(".footerCheckout__developedBy") if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ - this.Dados_profile_payment.children[0].appendChild(this.safeP) + Dados_profile_payment.appendChild(this.safeP) } + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[2] + .children[0] + .innerHTML =` + Cartão de Débito + ` + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[9] + .children[0] + .innerHTML = + ` + Boleto à Vista + ` + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + .innerHTML =` + Boleto Faturado + ` this.Finalizar_btn.innerHTML =` FINALIZAR COMPRA ` @@ -174,8 +219,11 @@ export default class Footer { ` } async onUpdate() { - const target = this.Dados_profile_payment; - const safeP = this.safeP; + const target = this.Dados_profile_payment_wrapper; + const safeP = document.createElement("p"); + safeP.innerHTML =` + Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados + ` let config = { childList: false, attributes: true, @@ -188,14 +236,81 @@ export default class Footer { mutations.forEach(function (mutation) { console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue); if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ + console.log("o pai está aberto",mutation.oldValue) console.log(mutation) - if(mutation.oldValue == "step accordion-group store-country-BRA active"){ - console.log("o pai está aberto",mutation.oldValue) - console.log(target) - } + console.log(target) + target.children[0].children[0].appendChild(safeP) + target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[2] + .children[0] + .innerHTML =` + Cartão de Débito + ` + target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[9] + .children[0] + .innerHTML =` + Boleto à Vista + ` + target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + .innerHTML =` + Boleto Faturado + ` + console.log(target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + ) } else{ - console.log("o pai está fechado") + console.log("o pai está fechado",mutation.oldValue); + console.log(mutation) + console.log(target) + console.log(target + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + ) } }); }); From 2fadcf7e42d10d26990816b42d02c2fad7c3f56e Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 20 Dec 2022 19:25:43 -0300 Subject: [PATCH 04/17] feat:adicionando estilo ao resumo de pagamento --- checkout/src/arquivos/js/components/Header.js | 1 + checkout/src/arquivos/js/components/app.js | 98 ++++++++++--------- .../sass/checkout/_checkout-carrinho.scss | 24 ++++- .../sass/checkout/_checkout-pagamento.scss | 18 +++- 4 files changed, 94 insertions(+), 47 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 46f66a1..0fe02d9 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -21,6 +21,7 @@ export default class Header { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); + this.totalizer = await waitElement(".totalizers-list"); this.MeuCarrinho = await waitElement("#cart-title"); this.Finalizar_Pedido = await waitElement("#orderform-title"); this.Finalizar_Pagamento = await waitElement(".store-country-BRA"); diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 786ed7b..e3cdef2 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -1,16 +1,21 @@ import { waitElement } from "m3-utils"; export default class Footer { + constructor() { + this.init(); console.log("app.js funcionando") + } async init() { + await this.selectors(); await this.event(); await this.TextTransfer(); await this.onUpdate(); + } async selectors() { @@ -60,6 +65,7 @@ export default class Footer { async event() { this.btnCep.addEventListener("click",this.nonExist.bind(this)) window.addEventListener("hashchange", this.TextTransfer.bind(this)); + window.addEventListener("hashchange", this.nonExist.bind(this)); } async nonExist(){ this.cep = await waitElement('.ship-postalCode small a'); @@ -76,6 +82,7 @@ export default class Footer { } } async TextTransfer(){ + // console.log(this.totalizer,"tabela") const payment_group = this.Dados_profile_payment_wrapper; const dadosProfile =this.Dados_profile.children[0].children[0].children[1] const Dados_profile_payment =this.Dados_profile_payment.children[0] @@ -91,54 +98,55 @@ export default class Footer { // console.log(Dados_profile_payment,"Todos os conteiners de pagamento") const IconDev = document.querySelector(".footerCheckout__developedBy") if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ - Dados_profile_payment.appendChild(this.safeP) + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[2] + .children[0] + .innerHTML =` + Cartão de Débito + ` + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[9] + .children[0] + .innerHTML = + ` + Boleto à Vista + ` + payment_group + .children[0] + .children[1] + .children[0] + .children[1] + .children[4] + .children[0] + .children[1] + .children[3] + .children[10] + .children[0] + .innerHTML =` + Boleto Faturado + ` } - payment_group - .children[0] - .children[1] - .children[0] - .children[1] - .children[4] - .children[0] - .children[1] - .children[3] - .children[2] - .children[0] - .innerHTML =` - Cartão de Débito - ` - payment_group - .children[0] - .children[1] - .children[0] - .children[1] - .children[4] - .children[0] - .children[1] - .children[3] - .children[9] - .children[0] - .innerHTML = - ` - Boleto à Vista - ` - payment_group - .children[0] - .children[1] - .children[0] - .children[1] - .children[4] - .children[0] - .children[1] - .children[3] - .children[10] - .children[0] - .innerHTML =` - Boleto Faturado - ` this.Finalizar_btn.innerHTML =` - FINALIZAR COMPRA + + FINALIZAR COMPRA + ` dadosProfile.innerHTML =` Identificação diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index bec69bb..917c08a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,9 +1,28 @@ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); +#Finalizar{ + text-decoration: none; + color: $color-black; +} + .container { @include mq(md, max) { width: 100%; } } +.cart-fixed{ + .summary-template-holder{ + border: 1px solid $color-gray5; + border-radius: 8px; + } + a { + position: relative; + left: -15px; + } + small{ + left: -42px; + position: relative; + } +} .totalizers-list{ td{ height: 0; @@ -72,6 +91,7 @@ } } .cart-fixed.affix { + top: -69px; position: relative !important; } .cart-fixed { @@ -94,7 +114,7 @@ } .cart { - border: 1px solid $color-gray4; + // border: 1px solid $color-gray4; ul li { border-top: none; @@ -117,6 +137,8 @@ .summary-template-holder { border-top: none; background: $color-white; + width: 300px; + padding: 15px; } #go-to-cart-button a { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index d95c394..b38bfe4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -9,9 +9,15 @@ body .container-main.container-order-form .orderform-template.active { width: 66.1132%; } } +.summary-cart-template-holder{ + width: 332px; +} #is-corporate-client{ display: none; } +#hproduct-item-2616{ + margin-left: 16px; +} #postalCode-finished-loading{ .shipping-method-toggle{ border: 1px solid $color-black; @@ -45,6 +51,9 @@ body .container-main.container-order-form .orderform-template.active { } #ship-postalCode{ margin-bottom: 10px; + width: 172px !important; + height: 36px !important; + max-width: 200px !important; } .ship-country{ @@ -142,7 +151,7 @@ body .container-main.container-order-form .orderform-template.active { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } #payment-data{ - max-width: 719px !important; + right: 0; #payment-group-custom204PaymentGroupPaymentGroup, #payment-group-SPEIPaymentGroup, #payment-group-MercadoPagoPaymentGroup, @@ -202,4 +211,11 @@ body .container-main.container-order-form .orderform-template.active { .payment-group-item.active{ margin: 0 0 0 5px; } +#client-profile-data{ + .filled{ + width: 332px !important; + height: 164px !important; + } +} + From 5d4d6677d5029d3302deeafe86c2ec764d876935 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Wed, 21 Dec 2022 00:37:57 -0300 Subject: [PATCH 05/17] =?UTF-8?q?feat:=20p=C3=A1gina=20de=20pagamaneto=20t?= =?UTF-8?q?erminada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/app.js | 19 ++++++-- .../sass/checkout/_checkout-carrinho.scss | 18 ++++++-- .../sass/checkout/_checkout-pagamento.scss | 46 +++++++++++++++++-- 3 files changed, 70 insertions(+), 13 deletions(-) diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index e3cdef2..4bc4efd 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -51,6 +51,7 @@ export default class Footer { }); this.tbody = await waitElement(".accordion-inner"); this.LapisAzul = await waitElement(".icon-edit"); + this.cartfixed = await waitElement(".cart-fixed"); this.btnCep = await waitElement("#shipping-calculate-link"); this.Dados_profile_payment_wrapper = await waitElement("#payment-data"); this.Dados_profile = document.querySelectorAll(".accordion-group")[1]; @@ -60,6 +61,7 @@ export default class Footer { this.pay__Wrapper = document.createElement("div"); this.Finalizar_btn = document.createElement("button"); this.more = document.createElement("p"); + this.PedidoSumary = document.createElement("h2"); this.wrapper = document.createElement("tr"); } async event() { @@ -82,7 +84,11 @@ export default class Footer { } } async TextTransfer(){ - // console.log(this.totalizer,"tabela") + console.log(this.cartfixed.children[1].children[0].children[0],"tabela"); + this.safeP.classList.add("safep") + this.cartfixed.children[0].classList.add("hide"); + this.cartfixed.children[1].children[0].children[0].appendChild(this.PedidoSumary) + this.PedidoSumary.classList.add("payment_Sumary") const payment_group = this.Dados_profile_payment_wrapper; const dadosProfile =this.Dados_profile.children[0].children[0].children[1] const Dados_profile_payment =this.Dados_profile_payment.children[0] @@ -90,10 +96,10 @@ export default class Footer { const tbody = this.tbody.children[1].children[3]; const table = this.table.children[0].children[0].children[1]; const table_2 = this.table.children[0].children[0].children[2]; - tbodywrapper.classList.add("flex") - tbodywrapper.appendChild(this.more) - tbodywrapper.appendChild(this.Finalizar_btn) - tbody.appendChild(tbodywrapper) + tbodywrapper.classList.add("flex"); + tbodywrapper.appendChild(this.more); + tbodywrapper.appendChild(this.Finalizar_btn); + tbody.appendChild(tbodywrapper); // console.log(this.Dados_profileAll,"Todos os conteiners de pagamento") // console.log(Dados_profile_payment,"Todos os conteiners de pagamento") const IconDev = document.querySelector(".footerCheckout__developedBy") @@ -148,6 +154,9 @@ export default class Footer { FINALIZAR COMPRA ` + this.PedidoSumary.innerHTML =` + Resumo do Pedido + ` dadosProfile.innerHTML =` Identificação ` diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 917c08a..0acfd9d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -11,8 +11,11 @@ } .cart-fixed{ .summary-template-holder{ - border: 1px solid $color-gray5; - border-radius: 8px; + border-bottom: 3px solid $color-gray5; + border-left: 3px solid $color-gray5; + border-right: 3px solid $color-gray5; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; } a { position: relative; @@ -74,7 +77,11 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border-top: 3px solid $color-gray5; + border-left: 3px solid $color-gray5; + border-right: 3px solid $color-gray5; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; box-sizing: border-box; border-radius: 5px; padding: 16px; @@ -91,12 +98,13 @@ } } .cart-fixed.affix { - top: -69px; + top: -40px; position: relative !important; } .cart-fixed { font-family: $font-family; width: 100%; + height: 100% !important; h2 { background: $color-white; border: none; @@ -137,7 +145,7 @@ .summary-template-holder { border-top: none; background: $color-white; - width: 300px; + width: 296px; padding: 15px; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index b38bfe4..e40dd09 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -9,13 +9,43 @@ body .container-main.container-order-form .orderform-template.active { width: 66.1132%; } } +.cart-fixed { + top: -42px; +} +.cart-items{ + display: flex; + flex-direction: column-reverse; + align-items: flex-start; + .payment_Sumary{ + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + margin: 24px 0px 34px 0; + } +} +.hproduct{ + .fn{ + width: 115px !important; + height: 34px; + white-space: break-spaces !important; + color: $color-black; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + line-height: 14px; + } +} .summary-cart-template-holder{ width: 332px; } #is-corporate-client{ display: none; } -#hproduct-item-2616{ +.photo{ + width: 60px !important; + height: 60px !important; margin-left: 16px; } #postalCode-finished-loading{ @@ -91,8 +121,8 @@ body .container-main.container-order-form .orderform-template.active { .newsletter-text, p, label{ - color: #7D7D7D !important; - font-weight: 700 !important; + color: #7D7D7D; + font-weight: 700; } input, .cart{ @@ -217,5 +247,15 @@ body .container-main.container-order-form .orderform-template.active { height: 164px !important; } } +.safep{ + width: 622px; + height: 48px; + font-family: $font-family; + font-style: normal; + font-weight: 400 !important; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; +} From 0f2d1e715fa70a6d48b6d3685b64feb98e8140bf Mon Sep 17 00:00:00 2001 From: Rallenson Date: Wed, 21 Dec 2022 17:45:41 -0300 Subject: [PATCH 06/17] =?UTF-8?q?feat:p=C3=A1gina=20de=20pagamento=20final?= =?UTF-8?q?izada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-carrinho.scss | 16 +++++----- .../sass/checkout/_checkout-pagamento.scss | 31 ++++++++++++++++++- 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 0acfd9d..101f143 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -11,9 +11,9 @@ } .cart-fixed{ .summary-template-holder{ - border-bottom: 3px solid $color-gray5; - border-left: 3px solid $color-gray5; - border-right: 3px solid $color-gray5; + border-bottom: 1px solid $color-gray5; + border-left: 1px solid $color-gray5; + border-right: 1px solid $color-gray5; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } @@ -77,9 +77,9 @@ display: none; } .cart { - border-top: 3px solid $color-gray5; - border-left: 3px solid $color-gray5; - border-right: 3px solid $color-gray5; + border-top: 1px solid $color-gray5; + border-left: 1px solid $color-gray5; + border-right: 1px solid $color-gray5; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; box-sizing: border-box; @@ -132,7 +132,6 @@ &:not(:first-child) { margin-top: 8px; padding-top: 8px; - border-top: 1px solid #e5e5e5; } .shipping-date, @@ -145,8 +144,7 @@ .summary-template-holder { border-top: none; background: $color-white; - width: 296px; - padding: 15px; + width: 330px; } #go-to-cart-button a { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index e40dd09..7c1b1ac 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -9,6 +9,35 @@ body .container-main.container-order-form .orderform-template.active { width: 66.1132%; } } +.body-order-form{ + .totalizers-list{ + tr{ + border-bottom: 1px solid black; + border-top: 1px solid black; + margin-right: 17px; + left: 20px; + position: relative; + text-align-last: start; + .info{ + width: 100% !important; + } + } + } + tfoot{ + .info{ + width: 93% !important; + } + tr{ + border-top: 1px solid; + margin-right: 17px; + left: 20px; + position: relative; + text-align-last: start; + text-indent: -17px; + } + + } +} .cart-fixed { top: -42px; } @@ -173,7 +202,7 @@ body .container-main.container-order-form .orderform-template.active { } } #payment-data-submit{ - width: 100% !important; + width: 88% !important; background: $color-green_2 !important; text-transform: uppercase !important; height: 42px !important; From 9f923e26eb8485169923e5d8ec1b28f460df2fb5 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 22 Dec 2022 00:22:46 -0300 Subject: [PATCH 07/17] =?UTF-8?q?feat:p=C3=A1ginas=20de=20pagamento=20resp?= =?UTF-8?q?onsivas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit as páginas apartir do hash profille com a classe FILLED estão responsivas --- .../sass/checkout/_checkout-carrinho.scss | 12 ++++---- .../sass/checkout/_checkout-pagamento.scss | 30 ++++++++++++++++++- .../src/arquivos/sass/checkout/_checkout.scss | 3 ++ 3 files changed, 38 insertions(+), 7 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 101f143..899d85d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -87,12 +87,12 @@ padding: 16px; margin-top: 44px; - @include mq(md, max) { - margin: 0px 0 25px 0; - border-left: none; - border-right: none; - border-radius: 0; - } + // @include mq(md, max) { + // margin: 0px 0 25px 0; + // border-left: none; + // border-right: none; + // border-radius: 0; + // } @include mq(xll, max) { margin: 30px 0 25px 0; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 7c1b1ac..36a3ee9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -40,6 +40,10 @@ body .container-main.container-order-form .orderform-template.active { } .cart-fixed { top: -42px; + @include mq(xll, max) { + right: 230px; + top: -10px; + } } .cart-items{ display: flex; @@ -210,6 +214,11 @@ body .container-main.container-order-form .orderform-template.active { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } #payment-data{ + @include mq(xll, max) { + .accordion-group{ + width: 134%; + } + } right: 0; #payment-group-custom204PaymentGroupPaymentGroup, #payment-group-SPEIPaymentGroup, @@ -271,11 +280,30 @@ body .container-main.container-order-form .orderform-template.active { margin: 0 0 0 5px; } #client-profile-data{ + @include mq(xll, max) { + width: 152%; + .filled{ + width: 90% !important; + height: 164px !important; + } + } .filled{ - width: 332px !important; + width: 332px; height: 164px !important; } } +#shipping-data{ + @include mq(xll, max) { + width: 100%; + .accordion-group{ + width: 137%; + } + .filled{ + width: 92% !important; + height: 164px !important; + } + } +} .safep{ width: 622px; height: 48px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 34526e6..6e40742 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -50,6 +50,9 @@ body { .container-order-form, .container-cart { width: 86%; + @include mq(xll, max) { + width: 90.5%; + } } .container-cart{ display: flex; From bc7a8eae8d35c717693839a837d0fd7c8b327424 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 22 Dec 2022 16:20:23 -0300 Subject: [PATCH 08/17] feat:payment mobile responsivo --- .../src/arquivos/sass/checkout/_checkout-carrinho.scss | 5 +++++ .../src/arquivos/sass/checkout/_checkout-pagamento.scss | 8 ++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 899d85d..eb0a0fa 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -111,6 +111,11 @@ color: #303030; font-size: 14px; font-weight: 500; + @include mq(xll, max) { + right: 197px; + top: -22px; + // width: 351%; + } } .item-unavailable { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 36a3ee9..c7999fa 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -41,7 +41,7 @@ body .container-main.container-order-form .orderform-template.active { .cart-fixed { top: -42px; @include mq(xll, max) { - right: 230px; + right: 194px; top: -10px; } } @@ -72,6 +72,9 @@ body .container-main.container-order-form .orderform-template.active { } .summary-cart-template-holder{ width: 332px; + @include mq(xll, max) { + // width: 87.8%; + } } #is-corporate-client{ display: none; @@ -215,8 +218,9 @@ body .container-main.container-order-form .orderform-template.active { } #payment-data{ @include mq(xll, max) { + width: 100%; .accordion-group{ - width: 134%; + width: 137%; } } right: 0; From 6bdb2dc90771c3b27ff160336725026423ef4a00 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 22 Dec 2022 20:44:04 -0300 Subject: [PATCH 09/17] emai page mobile responsivo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit o footer está muito a baixo mas que está fazendo isso é a próxima página, tentarei arrumar ao retornar a ela --- .../sass/checkout/_checkout-autenticacao.scss | 24 ++++++++++++++++++- .../sass/checkout/_checkout-carrinho.scss | 14 +++++++++++ .../sass/checkout/_checkout-pagamento.scss | 12 ++++++++-- .../src/arquivos/sass/checkout/_checkout.scss | 4 ++++ 4 files changed, 51 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 9cd1069..d63ed08 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,4 +1,5 @@ #orderform-title{ + font-weight: 700 !important; color: $color-black !important; } @@ -7,9 +8,19 @@ color: $color-black; font-weight: 700 !important; } +#client-pre-email{ + @include mq(xll, max) { + width: 90%; + } +} .checkout-container { + .icon-lock{ + @include mq(xll, max) { + display: none; + } + } .client-pre-email { - border-color: $color-gray4; + border-color: $color-black; font-family: $font-family; padding-top: 8px; @@ -31,9 +42,14 @@ justify-content: center; h3 { + margin-bottom: 16px; span { + @include mq(xll, max) { + font-size: 12px; + line-height: 14px; + } color: $color-black; font-family: $font-family-secundary; font-style: normal; @@ -46,6 +62,9 @@ } small { + @include mq(xll, max) { + font-size: 12px; + } color: $color-black; font-family: $font-family-secundary; font-style: normal; @@ -137,6 +156,9 @@ .payment-data, .client-profile-data { .accordion-group { + @include mq(xll, max) { + border: 0 !important; + } border-radius: 0; border: 1px solid $color-gray4; font-family: $font-family; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index eb0a0fa..3f70024 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -102,6 +102,9 @@ position: relative !important; } .cart-fixed { + @include mq(xll, max) { + right: 0; + } font-family: $font-family; width: 100%; height: 100% !important; @@ -147,12 +150,23 @@ } .summary-template-holder { + @include mq(xll, max) { + bottom: 28px; + position: relative; + z-index: map-get($map:$z-index, $key: level1); + width: 94.8%; + } border-top: none; background: $color-white; width: 330px; } #go-to-cart-button a { + @include mq(xll, max) { + left: 0; + bottom: 29px; + z-index: map-get($map:$z-index, $key: level5); + } color: #303030; text-decoration: underline; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index c7999fa..b984e35 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,6 +4,10 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + @include mq(xll, max) { + width: 100%; + margin-top: 17px; + } } .orderform-template-holder { width: 66.1132%; @@ -73,7 +77,8 @@ body .container-main.container-order-form .orderform-template.active { .summary-cart-template-holder{ width: 332px; @include mq(xll, max) { - // width: 87.8%; + width: 95%; + height: auto !important; } } #is-corporate-client{ @@ -220,7 +225,7 @@ body .container-main.container-order-form .orderform-template.active { @include mq(xll, max) { width: 100%; .accordion-group{ - width: 137%; + width: 138%; } } right: 0; @@ -286,6 +291,9 @@ body .container-main.container-order-form .orderform-template.active { #client-profile-data{ @include mq(xll, max) { width: 152%; + .link-cart{ + margin: 14px 0 100px 0; + } .filled{ width: 90% !important; height: 164px !important; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 6e40742..f2e73f6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -80,6 +80,10 @@ body { } #cart-title, #orderform-title { + @include mq(xll, max) { + font-size: 24px; + line-height: 33px ; + } color: $color-gray2; font-family: $font-family; font-weight: 500; From 6df067be1280cf4de576b6667e21f7f00219a5df Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 22 Dec 2022 21:47:59 -0300 Subject: [PATCH 10/17] feat:mq 4k email page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit o cadeado no 4000 sai um pouco do lugar mas do 2500 até antes do 4000 está bem posicionado --- .../sass/checkout/_checkout-autenticacao.scss | 43 ++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index d63ed08..66cf91c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -14,10 +14,19 @@ } } .checkout-container { + @include mq(IVK, min) { + height: 598px; + } .icon-lock{ @include mq(xll, max) { display: none; } + @include mq(IVK, min) { + width: 100%; + height: 100%; + left:85.64%; + top: 51px; + } } .client-pre-email { border-color: $color-black; @@ -44,11 +53,20 @@ h3 { margin-bottom: 16px; - span { @include mq(xll, max) { font-size: 12px; line-height: 14px; + } + @include mq(IVK, min) { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 40px; + line-height: 47px; + text-align: center; + text-transform: uppercase; + } color: $color-black; font-family: $font-family-secundary; @@ -64,6 +82,16 @@ small { @include mq(xll, max) { font-size: 12px; + } + @include mq(IVK, min) { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 40px; + line-height: 47px; + text-align: center; + text-transform: uppercase; + } color: $color-black; font-family: $font-family-secundary; @@ -117,12 +145,19 @@ } .emailInfo { + @include mq(IVK, min) { + width: 36.1%; + height: 42%; + } padding: 16px; background-color: $color-white; border: 1px solid $color-gray4; border-radius: 0; h3 { + @include mq(IVK, min) { + font-size: 24px; + } color: #303030; margin: 0 0 8px 0; } @@ -132,6 +167,9 @@ li { span { + @include mq(IVK, min) { + font-size: 24px; + } color: $color-black; font-weight: 700; } @@ -145,6 +183,9 @@ } i::before { + @include mq(IVK, min) { + font-size: 11.5rem; + } color: $color-black; font-size: 6rem; opacity: 0.5; From 9b3adfbc26811c63b791a83ae56341e34b1362e5 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Fri, 23 Dec 2022 17:26:29 -0300 Subject: [PATCH 11/17] =?UTF-8?q?feat(carrinho):bot=C3=A3o=20finalizar=20c?= =?UTF-8?q?omprar=20responsivo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/app.js | 6 ++-- .../sass/checkout/_checkout-carrinho.scss | 36 +++++++++---------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 4bc4efd..a691bdd 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -49,7 +49,7 @@ export default class Footer { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); - this.tbody = await waitElement(".accordion-inner"); + this.divtotalizaer = await waitElement(".totalizers"); this.LapisAzul = await waitElement(".icon-edit"); this.cartfixed = await waitElement(".cart-fixed"); this.btnCep = await waitElement("#shipping-calculate-link"); @@ -93,13 +93,13 @@ export default class Footer { const dadosProfile =this.Dados_profile.children[0].children[0].children[1] const Dados_profile_payment =this.Dados_profile_payment.children[0] const tbodywrapper = this.wrapper; - const tbody = this.tbody.children[1].children[3]; + const totalizaer = this.divtotalizaer; const table = this.table.children[0].children[0].children[1]; const table_2 = this.table.children[0].children[0].children[2]; tbodywrapper.classList.add("flex"); tbodywrapper.appendChild(this.more); tbodywrapper.appendChild(this.Finalizar_btn); - tbody.appendChild(tbodywrapper); + totalizaer.appendChild(tbodywrapper); // console.log(this.Dados_profileAll,"Todos os conteiners de pagamento") // console.log(Dados_profile_payment,"Todos os conteiners de pagamento") const IconDev = document.querySelector(".footerCheckout__developedBy") diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 3f70024..d7131d8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -861,9 +861,26 @@ line-height: 21px; color: $color-black; } + } + } + .flex{ + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; + p{ + margin-bottom: 14px; + margin-top: 17px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400 !important; + font-size: 12px; + line-height: 14px; + color:$color-black + } button{ top: 121px; - width: 140%; + width: 100%; height: 42px; background: $color-blue-100; border-radius: 8px; @@ -878,23 +895,6 @@ height: 48px; white-space: nowrap; } - } - .flex{ - display: flex; - flex-direction: column; - align-items: center; - flex-wrap: wrap; - p{ - margin-bottom: 14px; - margin-top: 17px; - font-family: $font-family-secundary; - font-style: normal; - font-weight: 400 !important; - font-size: 12px; - line-height: 14px; - color:$color-black - } - } } } } From 6e142b78e528e391d861d6ecb685c5e96971e581 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sat, 24 Dec 2022 15:03:04 -0300 Subject: [PATCH 12/17] feat:sumary page mq mobile --- checkout/src/arquivos/js/components/Footer.js | 10 ++--- checkout/src/arquivos/js/components/app.js | 11 +++++ .../sass/checkout/_checkout-carrinho.scss | 11 ++++- .../src/arquivos/sass/partials/_footer.scss | 42 ++++++++++--------- .../src/arquivos/sass/partials/_header.scss | 6 +-- .../src/arquivos/sass/utils/_variaveis.scss | 2 +- 6 files changed, 51 insertions(+), 31 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 4099d7a..7b95dc8 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -100,7 +100,7 @@ export default class Footer {

Você também pode gostar:

  • - Sandália Azul Spike AmarraçãoVer Produto
  • - Sandália Roxo Spike AmarraçãoVer Produto
  • - Sandália Verde Spike Amarração
    • -
  • +
  • Jaqueta Masculina Thermoball EcoVer Produto
  • - Sandália Amarela Spike Amarração Date: Sat, 24 Dec 2022 21:21:34 -0300 Subject: [PATCH 13/17] =?UTF-8?q?feat:indetifica=C3=A7=C3=A3o=20com=20resp?= =?UTF-8?q?onsividade?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-autenticacao.scss | 60 +++++++++++++++++++ .../sass/checkout/_checkout-pagamento.scss | 10 ++++ 2 files changed, 70 insertions(+) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 66cf91c..a74b954 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -13,6 +13,66 @@ width: 90%; } } +.box-client-info-pf{ + width: 100%; + .client{ + @include mq(xll,max){ + &-email{ + #client-email{ + @include mq(md,max){ + width: 100%; + } + max-width: 100%; + } + } + &-first-name, + &-last-name, + &-document, + &-phone{ + width: 49%; + @media screen and (min-width: 0px) and (max-width: 310px){ + width: 45% !important; + } + @media screen and (min-width: 0px) and (max-width: 767px){ + display: inline-flex; + width: 48%; + white-space: nowrap; + flex-direction: column; + } + } + &-first-name{ + #client-first-name + { + width: 96% !important; + } + } + &-last-name{ + #client-last-name{ + @media screen and (min-width: 0px) and (max-width: 767px){ + margin-left: 10px; + width: 97% !important; + } + width: 99% !important; + } + } + &-document{ + #client-document + { + width: 96% !important; + } + } + &-phone{ + #client-phone + { + @media screen and (min-width: 0px) and (max-width: 767px){ + width: 100% !important; + } + width: 99% !important; + } + } + } + } +} .checkout-container { @include mq(IVK, min) { height: 598px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index b984e35..a086457 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -151,6 +151,9 @@ body .container-main.container-order-form .orderform-template.active { color: red !important; } .input-xlarge{ + @include mq(xll,max){ + width: 99%; + } width: 298px; height: 42px; } @@ -316,6 +319,13 @@ body .container-main.container-order-form .orderform-template.active { } } } +#go-to-cart-button{ + position: relative; + white-space: nowrap; + #orderform-minicart-to-cart{ + position: unset; + } +} .safep{ width: 622px; height: 48px; From 9211513e52432def015368ecc24916af83aed1ae Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sat, 24 Dec 2022 21:43:08 -0300 Subject: [PATCH 14/17] =?UTF-8?q?feat:Endere=C3=A7o=20com=20responsividade?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-pagamento.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index a086457..5d894aa 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -112,17 +112,27 @@ body .container-main.container-order-form .orderform-template.active { box-sizing: border-box; } } +.ship-number{ + width: 100%; +} #ship-number, #ship-receiverName, #ship-postalCode, #ship-complement{ - width: 296px !important; + @include mq(xll, max) { + width: 100% !important; + } + width: 296px; height: 35px !important; max-width: 100%!important; } #ship-postalCode{ + @include mq(xll, max) { + width: 100% !important; + max-width: 100% !important; + } margin-bottom: 10px; - width: 172px !important; + width: 172px; height: 36px !important; max-width: 200px !important; } From a56bf31b70dbc6dd26e28f82e01a72143c70b186 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 25 Dec 2022 01:47:34 -0300 Subject: [PATCH 15/17] feat:add responsividade cards paymente fechados --- .../sass/checkout/_checkout-autenticacao.scss | 103 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 9 +- .../sass/checkout/_checkout-pagamento.scss | 55 +++++++++- .../src/arquivos/sass/checkout/_checkout.scss | 6 + 4 files changed, 160 insertions(+), 13 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index a74b954..73d42d9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -75,7 +75,7 @@ } .checkout-container { @include mq(IVK, min) { - height: 598px; + height: 133%; } .icon-lock{ @include mq(xll, max) { @@ -253,24 +253,75 @@ } } + #shipping-data{ + .accordion-group{ + .accordion-heading{ + span{ + @include mq(IVK, min) { + font-size: 32px; + margin: 34px; + } + } + } + @include mq(IVK, min) { + .accordion-inner{ + + .box-step{ + .shp-summary-group{ + &-content{ + .shp-summary-group-info{ + .shp-summary-group-address{ + .address-summary{ + span{ + font-weight: 400; + font-size: 24px; + line-height: 33px; + } + } + } + } + } + } + } + } + } + } + } .shipping-data, .payment-data, .client-profile-data { .accordion-group { - @include mq(xll, max) { - border: 0 !important; - } + // @include mq(xll, max) { + // border: 0 !important; + // } border-radius: 0; border: 1px solid $color-gray4; font-family: $font-family; padding: 16px; + .client-profile-summary{ + .name{ + + margin-bottom: 6px; + } + } .accordion-heading { + .accordion-toggle{ + + span { + color: #303030; + margin-bottom: 8px; + padding: 0; + @include mq(IVK, min) { + font-size: 32px; + margin: 34px; + } + } + } span { color: #303030; margin-bottom: 8px; padding: 0; - i::before { fill: #303030; } @@ -292,7 +343,31 @@ padding: 0; /* General configurations */ - + .box-step{ + .link-change-shipping{ + display: none; + } + .shp-summary-group{ + &-content{ + @include mq(IVK, min) { + .shp-summary-package{ + .shp-summary-package-time{ + span{ + font-weight: 400; + font-size: 24px; + line-height: 33px; + align-items: center; + letter-spacing: 0.05em; + margin-left: 34px; + } + } + } + align-items: flex-start; + flex-direction: column; + } + } + } + } .client-notice { color: $color-black; } @@ -384,7 +459,10 @@ } .shp-summary-group-info { - border-color: $color-gray4; + border-color: $color-gray6; + @include mq(IVK, min) { + border: none; + } } .address-summary { @@ -412,6 +490,9 @@ background: no-repeat; background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); background-size: 24px; + @include mq(xll, min) { + display: none; + } } @include mq(md, max) { @@ -432,6 +513,14 @@ .shp-summary-group-price { padding-right: 16px; + @include mq(IVK, min) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + align-items: center; + letter-spacing: 0.05em; + margin-left: 34px; + } } .shp-summary-package { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 8d72333..94dcee4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -104,10 +104,13 @@ .cart-fixed { @include mq(xll, max) { right: 0; + .payment-confirmation-wrap{ + border: none; } - font-family: $font-family; - width: 100%; - height: 100% !important; + } + font-family: $font-family; + width: 100%; + height: 100% !important; h2 { background: $color-white; border: none; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 5d894aa..6d956b2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -178,6 +178,14 @@ body .container-main.container-order-form .orderform-template.active { color: #7D7D7D; font-weight: 700; } + p{ + @include mq(IVK, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + margin-left: 34px !important; + } + } input, .cart{ border-radius: 4px!important; @@ -214,7 +222,11 @@ body .container-main.container-order-form .orderform-template.active { background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png); background-size: 20px; fill: transparent !important; - + @include mq(IVK, min) { + width: 40px !important; + height: 40px !important; + background-size: 40px; + } } } #go-to-shipping, @@ -227,6 +239,10 @@ body .container-main.container-order-form .orderform-template.active { } } #payment-data-submit{ + @include mq(xll, max) { + width: 95% !important; + + } width: 88% !important; background: $color-green_2 !important; text-transform: uppercase !important; @@ -238,7 +254,7 @@ body .container-main.container-order-form .orderform-template.active { @include mq(xll, max) { width: 100%; .accordion-group{ - width: 138%; + width: 137%; } } right: 0; @@ -266,6 +282,9 @@ body .container-main.container-order-form .orderform-template.active { .form-step{ display: flex; height: 452px; + @include mq(xll, max) { + height: 744px; + } } span, a{ @@ -289,7 +308,26 @@ body .container-main.container-order-form .orderform-template.active { .payment-group-item-text{ background-image: none; } + .payment-group{ + @include mq(xll, max) { + .payment-group-list-btn{ + width: 100%; + a{ + width: 100%; + span{ + width: 100%; + } + } + } + width: 100%; + } + } .steps-view{ + @include mq(xll, max) { + right: -8px; + top: 40%; + width: 97%; + } position: absolute; right: 0; top: 33px; @@ -312,9 +350,20 @@ body .container-main.container-order-form .orderform-template.active { height: 164px !important; } } + @include mq(IVK, min) { + // width: 152%; + // .link-cart{ + // margin: 14px 0 100px 0; + // } + height: 628px !important; + .filled{ + width: 90.541% !important; + height: 234px !important; + } + } .filled{ width: 332px; - height: 164px !important; + height: 164px; } } #shipping-data{ diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index f2e73f6..65ebaf7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -27,6 +27,9 @@ body { @include mq(md, max) { padding-left: 0; } + @include mq(IVK, min) { + justify-content: space-around; + } &.body-cart { font-family: $font-family; @@ -50,6 +53,9 @@ body { .container-order-form, .container-cart { width: 86%; + @include mq(IVK, min) { + height: 1060px; + } @include mq(xll, max) { width: 90.5%; } From a1936066ffee44078de7a744bfe4adc04fe22e84 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 26 Dec 2022 11:30:41 -0300 Subject: [PATCH 16/17] feat:pages payment active responsive --- .../sass/checkout/_checkout-autenticacao.scss | 58 ++++++++- .../sass/checkout/_checkout-carrinho.scss | 3 + .../sass/checkout/_checkout-pagamento.scss | 122 ++++++++++++++++-- .../src/arquivos/sass/checkout/_checkout.scss | 33 ++++- .../sass/partials/_mais-categorias.scss | 21 +++ 5 files changed, 213 insertions(+), 24 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 73d42d9..4e53b5d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -9,19 +9,41 @@ font-weight: 700 !important; } #client-pre-email{ - @include mq(xll, max) { width: 90%; - } } -.box-client-info-pf{ - width: 100%; - .client{ - @include mq(xll,max){ + +.box-client-info{ + .newsletter-label{ + @include mq(IVK,min){ + line-height: 40px; + } + } + .newsletter{ + #opt-in-newsletter{ + @include mq(IVK,min){ + width: 34px; + height: 34px; + } + + } + .newsletter-text{ + @include mq(IVK,min){ + margin-left: 10px; + font-size: 24px; + } + } + } + &-pf{ + width: 100%; + .client{ &-email{ #client-email{ @include mq(md,max){ width: 100%; } + @include mq(IVK,min){ + font-size: 28px; + } max-width: 100%; } } @@ -39,15 +61,31 @@ white-space: nowrap; flex-direction: column; } + @media screen and (min-width: 0px) and (max-width: 99999999px){ + display: inline-flex; + width: 40% !important; + float: left !important; + margin-left: 10px; + white-space: nowrap; + flex-direction: column; + } } &-first-name{ #client-first-name { width: 96% !important; + @include mq(IVK,min){ + width: 98.34% !important; + font-size: 28px; + } } } &-last-name{ #client-last-name{ + @include mq(IVK,min){ + width: 98.34% !important; + font-size: 28px; + } @media screen and (min-width: 0px) and (max-width: 767px){ margin-left: 10px; width: 97% !important; @@ -59,11 +97,19 @@ #client-document { width: 96% !important; + @include mq(IVK,min){ + width: 98.34% !important; + font-size: 28px; + } } } &-phone{ #client-phone { + @include mq(IVK,min){ + width: 98.34% !important; + font-size: 28px; + } @media screen and (min-width: 0px) and (max-width: 767px){ width: 100% !important; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 94dcee4..756a0d5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -168,6 +168,9 @@ border-top: none; background: $color-white; width: 330px; + @include mq(IVK, min) { + width: 90.22%; + } } #go-to-cart-button a { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 6d956b2..b84154c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -13,6 +13,13 @@ body .container-main.container-order-form .orderform-template.active { width: 66.1132%; } } +// @include mq(IVK, min) { + + .box-payment-option{ + iframe{ + height: 100%; + } + } .body-order-form{ .totalizers-list{ tr{ @@ -80,6 +87,10 @@ body .container-main.container-order-form .orderform-template.active { width: 95%; height: auto !important; } + @include mq(IVK, min) { + width: 90.89%; + height: auto !important; + } } #is-corporate-client{ display: none; @@ -90,6 +101,19 @@ body .container-main.container-order-form .orderform-template.active { margin-left: 16px; } #postalCode-finished-loading{ + .shipping-method-wrapper{ + @include mq(IVK, min) { + height: 55px; + p{ + margin-left: 0; + } + #shipping-option-delivery{ + .shp-method-option-text{ + + } + } + } + } .shipping-method-toggle{ border: 1px solid $color-black; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); @@ -110,6 +134,10 @@ body .container-main.container-order-form .orderform-template.active { line-height: 19px; font-style: normal; box-sizing: border-box; + @include mq(IVK, min) { + font-size: 28px; + line-height: 38px; + } } } .ship-number{ @@ -122,19 +150,23 @@ body .container-main.container-order-form .orderform-template.active { @include mq(xll, max) { width: 100% !important; } + @include mq(IVK, min) { + width: 96% !important; + height: 61px !important; + font-size: 28px; + } width: 296px; - height: 35px !important; + height: 35px; max-width: 100%!important; } +#ship-number{ + width: 97% !important; +} #ship-postalCode{ - @include mq(xll, max) { - width: 100% !important; - max-width: 100% !important; - } + width: 96% !important; margin-bottom: 10px; width: 172px; - height: 36px !important; - max-width: 200px !important; + height: 36px; } .ship-country{ @@ -144,6 +176,9 @@ body .container-main.container-order-form .orderform-template.active { .input-small{ width: 142px !important; height: 42px !important; + @include mq(IVK,min){ + height: 51px !important; + } } .box-client-info-pf{ .client-notice{ @@ -156,13 +191,21 @@ body .container-main.container-order-form .orderform-template.active { font-weight: 400; font-size: 14px; line-height: 19px; + @include mq(IVK,min){ + font-size: 28px; + line-height: 38px; + } } .help, .error{ color: red !important; } .input-xlarge{ - @include mq(xll,max){ - width: 99%; + @include mq(IVK,max){ + width: 84%; + } + @include mq(IVK,min){ + width: 92.24%; + height: 51px; } width: 298px; height: 42px; @@ -177,13 +220,20 @@ body .container-main.container-order-form .orderform-template.active { label{ color: #7D7D7D; font-weight: 700; - } - p{ @include mq(IVK, min) { font-weight: 400; font-size: 28px; line-height: 38px; + + } + } + p{ + @include mq(IVK, min) { + font-weight: 400; + font-size: 28px !important; + line-height: 38px; margin-left: 34px !important; + } } input, @@ -235,7 +285,16 @@ body .container-main.container-order-form .orderform-template.active { width: 100% !important; background: $color-blue-100 !important; text-transform: uppercase !important; - height: 42px !important; + height: 42px; + border-radius: 8px; + @include mq(IVK,min){ + height: 61px; + font-weight: 700; + font-size: 28px; + line-height: 38px; + text-align: center; + letter-spacing: 0.05em; + } } } #payment-data-submit{ @@ -257,6 +316,11 @@ body .container-main.container-order-form .orderform-template.active { width: 137%; } } + .store-country-BRA.active{ + @include mq(IVK, min) { + width: 92.443%; + } + } right: 0; #payment-group-custom204PaymentGroupPaymentGroup, #payment-group-SPEIPaymentGroup, @@ -272,6 +336,11 @@ body .container-main.container-order-form .orderform-template.active { #payment-group-creditDirectSalePaymentGroup{ display: none; } + .store-country-BRA.active{ + @include mq(IVK, min) { + height: 803px; + } + } .btn-small{ background: transparent !important; border: 0 !important; @@ -288,6 +357,10 @@ body .container-main.container-order-form .orderform-template.active { } span, a{ + @include mq(IVK, min) { + width: 406px; + font-size: 28px; + } width: 210px; height: 50px; } @@ -331,6 +404,10 @@ body .container-main.container-order-form .orderform-template.active { position: absolute; right: 0; top: 33px; + @include mq(IVK, min) { + width: 62.5%; + height: 594px; + } } } .PaymentCardHolderDocument{ @@ -367,6 +444,13 @@ body .container-main.container-order-form .orderform-template.active { } } #shipping-data{ + #force-shipping-fields{ + text-decoration: none; + color: $color-blue-100; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } @include mq(xll, max) { width: 100%; .accordion-group{ @@ -377,6 +461,17 @@ body .container-main.container-order-form .orderform-template.active { height: 164px !important; } } + @include mq(IVK, min) { + p{ + margin-left: 0 !important; + } + .address-summary{ + span, + #force-shipping-fields{ + font-size: 28px; + } + } + } } #go-to-cart-button{ position: relative; @@ -386,6 +481,9 @@ body .container-main.container-order-form .orderform-template.active { } } .safep{ + @include mq(IVK, min) { + width: 90%; + } width: 622px; height: 48px; font-family: $font-family; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 65ebaf7..8b975d2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -23,14 +23,35 @@ body { flex-direction: column; min-height: 100% !important; padding-top: 0 !important; - + justify-content: space-between; + @media screen and (min-width: 2500px){ + #app-container{ + .App{ + height: 100%; + div{ + .CardForm{ + div{ + .PaymentCardNumber{ + background: pink; + .FormFieldLabel { + font-size: 28px; + } + } + } + p{ + font-size: 28px; + } + } + .ChangeNumberOfPayments{ + font-size: 28px; + } + } + } + } + } @include mq(md, max) { padding-left: 0; } - @include mq(IVK, min) { - justify-content: space-around; - } - &.body-cart { font-family: $font-family; } @@ -54,7 +75,7 @@ body { .container-cart { width: 86%; @include mq(IVK, min) { - height: 1060px; + height: 100%; } @include mq(xll, max) { width: 90.5%; diff --git a/checkout/src/arquivos/sass/partials/_mais-categorias.scss b/checkout/src/arquivos/sass/partials/_mais-categorias.scss index 660ffaa..0478c4d 100644 --- a/checkout/src/arquivos/sass/partials/_mais-categorias.scss +++ b/checkout/src/arquivos/sass/partials/_mais-categorias.scss @@ -1 +1,22 @@ /* _mais-categorias.scss */ +.steps-view{ + + #app-container{ + background: pink !important; + .App{ + div{ + .CardForm{ + div{ + .PaymentCardNumber{ + .FormFieldLabel { + font-weight: 400; + font-size: 28px; + line-height: 38px; + } + } + } + } + } + } + } +} From a01fe114b7fc407ce30feb16e68a8c5022a6958d Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 26 Dec 2022 23:57:55 -0300 Subject: [PATCH 17/17] feat:finalizando projeto para entrega MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit acabei não conseguindo fazer a responsividade para 4k na televisão porque fiquei preso no slick --- checkout/src/arquivos/js/components/Footer.js | 4 + checkout/src/arquivos/js/components/Header.js | 2 +- .../sass/checkout/_checkout-carrinho.scss | 49 ++++++++--- .../sass/checkout/_checkout-pagamento.scss | 34 ++++++-- .../src/arquivos/sass/checkout/_checkout.scss | 1 - .../src/arquivos/sass/partials/_footer.scss | 82 ++++++++++++------- 6 files changed, 122 insertions(+), 50 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 7b95dc8..0ac9e16 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -184,6 +184,8 @@ export default class Footer { slidesToShow: 4, slidesToScroll: 1, variableWidth:false, + adaptiveHeight: false, + prevArrow: $(".Fakebutton-Prev"), nextArrow: $(".Fakebutton-Next"), responsive:[{ @@ -193,6 +195,7 @@ export default class Footer { slidesToShow: 2, slidesToScroll: 1, variableWidth:false, + adaptiveHeight: false, prevArrow: $(".Fakebutton-Prev"), nextArrow: $(".Fakebutton-Next"), } @@ -204,6 +207,7 @@ export default class Footer { slidesToShow: 3, slidesToScroll: 1, variableWidth:false, + adaptiveHeight: false, prevArrow: $(".Fakebutton-Prev"), nextArrow: $(".Fakebutton-Next"), } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 0fe02d9..2a293a1 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -69,7 +69,7 @@ export default class Header { step2.classList.remove('completed'); step3.classList.remove('completed'); li.children[1].classList.add('completed'); - target2.classList.toggle('hide') + target2.classList.remove('hide') Footer.classList.add('footerCheckout__ComSlick') } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 756a0d5..99457ad 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -18,12 +18,10 @@ border-top-right-radius: 0 !important; } a { - position: relative; - left: -15px; + position: static; } small{ - left: -42px; - position: relative; + position: inherit; } } .totalizers-list{ @@ -58,16 +56,17 @@ } } } - } -.cart-template { +.cart-totalizers{ + @include mq(xll, max) { + width: 100% !important; + } +} + .cart-template { font-family: $font-family; .summary-template-holder{ div{ border: 0 !important; - @include mq(xll, max) { - width: 100% !important; - } } } @include mq(md, max) { @@ -144,7 +143,9 @@ margin-top: 8px; padding-top: 8px; } - + .shipping-date{ + display: none; + } .shipping-date, .price { color: #7d7d7d; @@ -169,7 +170,7 @@ background: $color-white; width: 330px; @include mq(IVK, min) { - width: 90.22%; + width: 94.89%; } } @@ -245,6 +246,10 @@ height: 60px; max-width: 100%; width: auto; + @include mq(IVK, min) { + height: 146px; + width: auto; + } @include mq(sm, max) { height: 72px; @@ -268,7 +273,6 @@ line-height: 14px; transition: ease-in 0.22s all; font-family: $font-family-secundary; - &:hover { color: darken($color-blue, 10); text-decoration: none; @@ -857,10 +861,18 @@ &.info { text-align: left; + @include mq(IVK, min) { + font-size: 28px; + line-height: 38px + } } &.monetary { text-align: right; + @include mq(IVK, min) { + font-size: 28px; + line-height: 38px; + } } } } @@ -874,6 +886,19 @@ line-height: 21px; color: $color-black; } + td.monetary { + @include mq(IVK, min) { + font-size: 28px; + line-height: 38px; + text-align: right; + } + } + td.info{ + @include mq(IVK, min) { + font-size: 36px; + line-height: 49px + } + } } } .flex{ diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index b84154c..ab33f45 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -20,15 +20,18 @@ body .container-main.container-order-form .orderform-template.active { height: 100%; } } -.body-order-form{ - .totalizers-list{ - tr{ + .body-order-form{ + .totalizers-list{ + tr{ border-bottom: 1px solid black; border-top: 1px solid black; - margin-right: 17px; + margin-left: 17px; left: 20px; position: relative; text-align-last: start; + @include mq(IVK, min) { + left: -6px; + } .info{ width: 100% !important; } @@ -45,6 +48,9 @@ body .container-main.container-order-form .orderform-template.active { position: relative; text-align-last: start; text-indent: -17px; + @include mq(IVK, min) { + position: inherit; + } } } @@ -67,6 +73,10 @@ body .container-main.container-order-form .orderform-template.active { font-size: 16px; line-height: 19px; margin: 24px 0px 34px 0; + @include mq(IVK, min) { + font-size: 32px !important; + line-height: 37px; + } } } .hproduct{ @@ -79,6 +89,12 @@ body .container-main.container-order-form .orderform-template.active { font-weight: 400; font-size: 12px; line-height: 14px; + @include mq(IVK, min) { + font-size: 24px; + line-height: 28px; + width: 228px !important; + height: 64px; + } } } .summary-cart-template-holder{ @@ -88,7 +104,7 @@ body .container-main.container-order-form .orderform-template.active { height: auto !important; } @include mq(IVK, min) { - width: 90.89%; + width: 94.89%; height: auto !important; } } @@ -96,9 +112,13 @@ body .container-main.container-order-form .orderform-template.active { display: none; } .photo{ - width: 60px !important; - height: 60px !important; + width: 60px; + height: 60px; margin-left: 16px; + @include mq(IVK, min) { + width: 120px; + height: 120px; + } } #postalCode-finished-loading{ .shipping-method-wrapper{ diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 8b975d2..20e4877 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -17,7 +17,6 @@ header { width: 79.53125%; margin: 0 auto; } - body { display: flex; flex-direction: column; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 78534d8..19a3bc2 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,12 +1,31 @@ @import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap'); /* _footer.scss */ +#product-name2616, +#product-name2621{ + font-size: 24px; + line-height: 28px; +} +#shipping-estimate-date{ + font-size: 24px; + line-height: 28px; +} + .footerCheckout { position: relative; border-top: 1px solid; color: $color-gray2; margin-top: 100px; &__ComSlick{ - margin-top: 450px !important; + margin-top: 32.33%; + @media screen and (min-width: 0px) and (max-width: 575px){ + margin-top: 400px; + } + @media screen and (min-width: 576px) and (max-width: 768px){ + margin-top: 500px; + } + @media screen and (min-width: 769px) and (max-width: 1280px){ + margin-top: 600px; + } } &__payments{ &__images{ @@ -146,24 +165,22 @@ } } &__prateleira{ - // background: gray; position: absolute; display: inline-flex; width: 100% !important; - height: 390px; - // margin-bottom: 54px !important; - top: -505px; + // height: 390px; + margin-top: 54px; + margin-bottom: 54px !important; + bottom: 70px; align-items: center; justify-content: center; flex-direction: column; .slick{ display: flex; - width: 100%; + width: 123%; height: 100%; - align-items: center; justify-content: center; - @include mq(xll, max) { - } + } .SLick_title{ font-family: 'Tenor Sans', sans-serif; @@ -200,15 +217,14 @@ justify-content: space-between; align-items: center; text-align: center; - width: 242px !important; - height: 390px; + width: 100% !important; + // height: 390px; margin-right: 16px; background: transparent; flex-direction: column; - background: pink; @include mq(xll, max) { - width: 43.7% !important; - height: 112.734% !important; + // width: 43.7% !important; + // height: 112.734% !important; } &__btn{ button{ @@ -230,32 +246,29 @@ } } .cor{ - width: 54px !important; - height: 28px !important; + width: 54px; + height: 28px; @include mq(xll, max) { width: 46px ; height: 28px; } } .verde{ - width: 54px !important; - height: 28px !important; + width: 54px; + height: 28px; } .azul{ - width: 46px !important; - height: 28px !important; + width: 46px; + height: 28px; } .jaq__azul{ - width: 112px !important; - height: 28px !important; + width: 112px; + height: 28px; white-space: nowrap; - @include mq(xll, max) { - width: 164px ; - height: 42px; - } } } .Ver__produto{ + margin-top: 5px; width: 100%; height: 42px; color: $color-white; @@ -278,12 +291,23 @@ position: relative; } .slick-list { - width: 1016px; - // left: -49px; - position: absolute; + width: 68.84%; + position: initial; top: 0px; left: 10.78125%; } + + /* the slides */ + .slick-slide { + // min-width: 242px; + margin-left: 16px; + } + + /* the parent */ + .slick-list { + min-width: 242px; + margin: 0 16px; + } } }