From e3ddf58ccd4fc681ffb4c1e1b159ef5d50c31061 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Sat, 17 Dec 2022 18:17:28 -0300 Subject: [PATCH 1/6] feat: Adiciona footer --- bash.exe.stackdump | 2 +- checkout/src/arquivos/js/components/Footer.js | 46 +++++++++++ .../sass/checkout/_checkout-carrinho.scss | 29 +++++++ .../sass/checkout/_checkout-vazio.scss | 65 ++++++++-------- .../src/arquivos/sass/partials/_footer.scss | 76 +++++++++++++++++-- .../src/arquivos/sass/partials/_header.scss | 5 ++ 6 files changed, 183 insertions(+), 40 deletions(-) diff --git a/bash.exe.stackdump b/bash.exe.stackdump index 0dbf51a..7c1d816 100644 --- a/bash.exe.stackdump +++ b/bash.exe.stackdump @@ -2,7 +2,7 @@ Stack trace: Frame Function Args 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) -000FFFFCD30 002100484A2 (000006E0000, 000006FF401, 00000000001, 87FE80A61CA3) +000FFFFCD30 002100484A2 (00000690000, 00000690101, 00000000001, 726D3BFB8C2D) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 5e34d3a..7de11ff 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -15,6 +15,7 @@ export default class Footer { 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.title = await waitElement("#cart-title"); this.checkoutVazio = await waitElement(".empty-cart-content"); //CARRINHO VAZIO this.fraseCarrinhoVazio = await waitElement(".empty-cart-title"); @@ -25,12 +26,18 @@ export default class Footer { this.footerPrateleira = await waitElement(".footerCheckout__prateleira"); //pagamento this.notification = await waitElement(".notification"); + //footer + this.creditcards = await waitElement(".footerCheckout__payments"); + this.vtex = await waitElement(".footerCheckout__vtexpci"); + this.developed = await waitElement(".footerCheckout__developedBy"); } async prateleira() { if (this.checkoutVazio.style.display == "none") { + this.title.innerHTML = `MEU CARRINHO`; this.requestApi(); this.addCarrossel(); + window.addEventListener("hashchange", () => { if (window.location.hash !== "#/cart") { this.removePrateleira(); @@ -105,6 +112,7 @@ export default class Footer { if (display == "display: none;") { this.prateleira(); } else if (display == "display: block;") { + this.title.innerHTML = ``; this.removePrateleira(); } }); @@ -114,9 +122,47 @@ export default class Footer { } carrinho() { + this.title.innerHTML = ``; this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; this.continuarCompra.innerHTML = `continuar comprando`; this.frete.innerHTML = `Frete`; this.unidade.innerHTML = `Unidade`; + //footer + this.creditcards.innerHTML = `
+ MasterCard +
+
+ VisaCard +
+
+ America Express +
+
+ Elo +
+
+ HiperCard +
+
+ Paypal +
+
+ Boleto +
`; + this.vtex.innerHTML = `
+ VTEX +
`; + this.developed.innerHTML = `
  • + + Powered By +
    VTEX
    +     +
    • +
  • + + Developed By +
    M3
    +     +
    • `; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index b299a40..787e2a5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -21,6 +21,35 @@ } .cart-template { + //CARRINHO VAZIO + .empty-cart-content { + margin-top: 100px; + + .empty-cart-title { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + margin: 0 0 32px; + } + + .empty-cart-message { + display: none; + } + + #cart-choose-products { + color: $color-black-500; + border: 1px solid $color-black-500; + background: $color-white; + font-family: $font-family-secundary; + font-weight: 400; + letter-spacing: normal; + border-radius: 0%; + padding: 15px 64px 17px 65px; + margin: 0; + } + } .empty-cart-title { font-weight: 700; font-size: 24px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..0e231bd 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,39 @@ .empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; + font-family: $font-family; - @include mq(md, max) { - padding: 0 16px; - } - } + &-content { + color: $color-black; + text-align: center; - &-title { - font-size: 20px; - } + @include mq(md, max) { + padding: 0 16px; + } + } - &-links { - .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - 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; + &-title { + font-size: 20px; + } - &:hover { - background: lighten($color-black, 5); - } - } - } + &-links { + .link-choose-products { + background: $color-black; + border: none; + border-radius: 5px; + 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; + + &:hover { + background: lighten($color-black, 5); + } + } + } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..2423195 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -4,18 +4,29 @@ color: $color-gray2; &__wrapper { + border-top: 1px solid $color-black-500; + width: 100% !important; align-items: center; display: flex; justify-content: space-between; + + .container { + /*width: 91.40625%;*/ + width: 100%; + margin: 16px 32px; + display: flex; + align-items: center; + justify-content: space-between; + } } &__address { - color: $color-gray2; font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 10px; - line-height: 12px; + line-height: 14px; + color: $color-black; text-transform: capitalize; max-width: 40%; @@ -30,6 +41,42 @@ display: flex; justify-self: center; list-style: none; + margin: 0; + + li { + display: flex; + + .footerCheckout__payments { + display: flex; + column-gap: 13px; + + figure { + margin: 0; + width: 35px; + height: 20px; + + img { + width: 100%; + vertical-align: unset; + } + } + } + + .footerCheckout__vtexpci { + display: flex; + + figure { + margin: 0; + width: 53px; + height: 33px; + + img { + width: 100%; + vertical-align: unset; + } + } + } + } @include mq(md, max) { align-self: center; @@ -37,10 +84,10 @@ } &__divider { - background-color: $color-gray4; + background-color: $color-gray7; display: inline-block; height: 24px; - margin: 0 8px; + margin: 0 10px 0 13px; width: 1px; } } @@ -52,7 +99,11 @@ margin: 0; li:last-child { - margin-left: 16px; + margin-left: 10.73px; + figure { + width: 28.66px; + height: 15.65px; + } } a { @@ -67,7 +118,18 @@ text-decoration: none; span { - margin-right: 8px; + margin-right: 10px; + } + + figure { + margin: 0; + width: 44.92px; + height: 16px; + + img { + width: 100%; + vertical-align: unset; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 81acfde..17b8961 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -32,6 +32,11 @@ &__safeBuy { display: flex; + width: 15.2829%; + + @include mq(tablet, max) { + width: auto; + } img { width: 12px; -- 2.34.1 From debff0f891bece4bcdc19dfa56327426ea0d46b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Sat, 17 Dec 2022 21:41:06 -0300 Subject: [PATCH 2/6] feat: Finaliza js footer --- bash.exe.stackdump | 2 +- checkout/src/arquivos/js/components/Footer.js | 11 ++++++++++- .../sass/checkout/_checkout-autenticacao.scss | 12 +++++++++++- checkout/src/arquivos/sass/partials/_footer.scss | 10 +++++++++- 4 files changed, 31 insertions(+), 4 deletions(-) diff --git a/bash.exe.stackdump b/bash.exe.stackdump index 7c1d816..8760340 100644 --- a/bash.exe.stackdump +++ b/bash.exe.stackdump @@ -2,7 +2,7 @@ Stack trace: Frame Function Args 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) -000FFFFCD30 002100484A2 (00000690000, 00000690101, 00000000001, 726D3BFB8C2D) +000FFFFCD30 002100484A2 (00000780000, 00000780101, 00000000001, E9C64E3ED582) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 7de11ff..9308dda 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,8 +8,10 @@ export default class Footer { async init() { await this.selectors(); await this.carrinho(); - this.prateleira(); + this.renderPrateleira(); this.onUpdate(); + //this.prateleira(); + //this.onUpdate(); } async selectors() { @@ -121,6 +123,13 @@ export default class Footer { observer.observe(target, config); } + async renderPrateleira() { + if (window.location.hash == "#/cart") { + this.onUpdate(); + this.prateleira(); + } + } + carrinho() { this.title.innerHTML = ``; this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 2e7ce42..8cd0b95 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -385,6 +385,7 @@ h1#orderform-title { } .address-summary { + position: relative; background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") no-repeat; background-size: 21.25px 20.07px; @@ -393,13 +394,16 @@ h1#orderform-title { border-color: $color-gray4; border-radius: 0; color: #303030; - padding: 12px 12px 12px 43px; + padding: 12px 55px 12px 43px; @include mq(md, max) { background-position: 8px 9px; } a { + position: absolute; + right: 13px; + bottom: 14px; font-style: normal; font-weight: 400; font-size: 12px; @@ -435,6 +439,12 @@ h1#orderform-title { .vtex-omnishipping-1-x-deliveryOptionActive { text-shadow: 1.3px 1px lighten($color-black, 50); } + + .vtex-omnishipping-1-x-addressSummaryActive { + :nth-child(6) { + display: none; + } + } } } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 2423195..144fd13 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -2,6 +2,7 @@ .footerCheckout { border-top: none; color: $color-gray2; + display: contents; /*testar*/ &__wrapper { border-top: 1px solid $color-black-500; @@ -9,6 +10,7 @@ align-items: center; display: flex; justify-content: space-between; + margin-top: 0; .container { /*width: 91.40625%;*/ @@ -21,6 +23,7 @@ } &__address { + margin-right: auto; font-family: $font-family; font-style: normal; font-weight: 400; @@ -93,10 +96,10 @@ } &__developedBy { + margin: 0 0 0 auto; align-items: center; display: flex; list-style-type: none; - margin: 0; li:last-child { margin-left: 10.73px; @@ -119,6 +122,11 @@ span { margin-right: 10px; + font-style: normal; + font-weight: 400; + font-size: 9px; + line-height: 12px; + color: $color-black; } figure { -- 2.34.1 From 0a300c74d511008dd96655fedd618d4364201598 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Sun, 18 Dec 2022 02:58:02 -0300 Subject: [PATCH 3/6] feat: Adiciona layout 1024 --- bash.exe.stackdump | 2 +- checkout/src/arquivos/js/components/Footer.js | 15 +- .../sass/checkout/_checkout-autenticacao.scss | 192 +++++++++++++++++- .../sass/checkout/_checkout-carrinho.scss | 103 ++++++++++ .../src/arquivos/sass/checkout/_checkout.scss | 8 +- checkout/src/arquivos/sass/lib/_slick.scss | 9 + .../src/arquivos/sass/partials/_footer.scss | 23 +++ .../src/arquivos/sass/partials/_header.scss | 4 + 8 files changed, 350 insertions(+), 6 deletions(-) diff --git a/bash.exe.stackdump b/bash.exe.stackdump index 8760340..49da798 100644 --- a/bash.exe.stackdump +++ b/bash.exe.stackdump @@ -2,7 +2,7 @@ Stack trace: Frame Function Args 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) -000FFFFCD30 002100484A2 (00000780000, 00000780101, 00000000001, E9C64E3ED582) +000FFFFCD30 002100484A2 (000007F0000, 000007F0101, 00000000001, F6F414F9291F) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9308dda..e3324f6 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -90,12 +90,21 @@ export default class Footer { async addCarrossel() { const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 }); - if (window.screen.width > 1024) { + if (window.screen.width > 102) { $(prateleira).slick({ - slidesToShow: 4, + slidesToShow: 3, slidesToScroll: 1, infinite: true, arrows: true, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 4, + slidesToScroll: 1, + }, + }, + ], }); } } @@ -132,7 +141,7 @@ export default class Footer { carrinho() { this.title.innerHTML = ``; - this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; + //this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; this.continuarCompra.innerHTML = `continuar comprando`; this.frete.innerHTML = `Frete`; this.unidade.innerHTML = `Unidade`; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 8cd0b95..23a9426 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -13,6 +13,10 @@ h1#orderform-title { font-family: $font-family; padding-top: 8px; + @include mq(tablet, max) { + padding-top: 0; + } + .link-cart { a { font-family: $font-family-secundary; @@ -28,6 +32,11 @@ h1#orderform-title { &:hover { color: lighen($color-black-500, 10); } + + @include mq(tablet, max) { + font-size: 10px; + line-height: 12px; + } } } @@ -48,6 +57,11 @@ h1#orderform-title { line-height: 23px; text-transform: uppercase; font-family: $font-family-secundary; + + @include mq(tablet, max) { + font-size: 14px; + line-height: 16px; + } } small { @@ -58,6 +72,11 @@ h1#orderform-title { line-height: 23px; text-transform: uppercase; font-family: $font-family-secundary; + + @include mq(tablet, max) { + font-size: 14px; + line-height: 16px; + } } } } @@ -66,6 +85,11 @@ h1#orderform-title { /*left: -61px;*/ margin: 0 0 24.56px; + @include mq(tablet, max) { + width: 100%; + text-align: initial; + } + input { /*width: 65.8%;*/ width: 82%; @@ -82,6 +106,10 @@ h1#orderform-title { font-size: 12px; line-height: 16px; + @include mq(tablet, max) { + width: 90%; + } + &::placeholder { color: $color-black-500; } @@ -108,6 +136,10 @@ h1#orderform-title { letter-spacing: 0.05em; text-transform: uppercase; + @include mq(tablet, max) { + right: 0; + } + &:hover { background: lighten($color-blue2, 5); } @@ -130,6 +162,10 @@ h1#orderform-title { font-size: 12px; line-height: 16px; text-transform: capitalize; + + @include mq(tablet, max) { + text-align: center; + } } } @@ -141,6 +177,14 @@ h1#orderform-title { border: 1px solid $color-black-500; border-radius: 5px; + @include mq(tablet, max) { + width: 309px; + + i.icon-lock { + display: none; + } + } + h3 { color: $color-black-500; font-style: normal; @@ -184,6 +228,139 @@ h1#orderform-title { } } + //DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE + .row-fluid.orderform-template { + @include mq(tablet, max) { + display: flex; + flex-direction: column; + } + + .orderform-template-holder.span8 { + @include mq(tablet, max) { + width: 100% !important; + } + + .row-fluid { + @include mq(tablet, max) { + width: 100%; + display: flex; + flex-direction: column; + } + + //IDENTIFICAÇÃO + .span6.client-profile-data { + @include mq(tablet, max) { + width: 100%; + } + + .client-first-name, + .client-last-name, + .client-document, + .client-phone { + @include mq(tablet, max) { + width: 49.4%; + } + + input { + @include mq(tablet, max) { + width: 100%; + } + } + } + + .client-first-name, + .client-document { + @include mq(tablet, max) { + margin-right: 1.2%; + } + } + } + + //ENTREGA + #shipping-data { + @include mq(tablet, max) { + width: 100%; + margin: 0; + } + + .accordion-inner { + #postalCode-finished-loading { + @include mq(tablet, max) { + width: 309px; + height: 36px; + } + } + .ship-postalCode { + @include mq(tablet, max) { + margin-top: 25px; + } + } + .vtex-omnishipping-1-x-summaryPackage { + @include mq(tablet, max) { + justify-content: start; + } + } + .vtex-omnishipping-1-x-SummaryItemContent { + @include mq(tablet, max) { + position: relative; + } + + .vtex-omnishipping-1-x-SummaryItemPrice { + @include mq(tablet, max) { + position: absolute; + bottom: 1%; + left: 14%; + } + } + } + } + } + + //PAGAMENTO + #payment-data { + @include mq(tablet, max) { + width: 100%; + margin: 0; + } + .payment-group { + @include mq(tablet, max) { + width: 100%; + } + } + .steps-view { + @include mq(tablet, max) { + width: 100%; + box-sizing: border-box; + } + } + } + } + } + + //MINICART + .cart-template.mini-cart.span4 { + @include mq(tablet, max) { + width: 100%; + } + + .totalizers { + @include mq(tablet, max) { + margin-top: 0; + } + } + .cart-fixed.cart-fixed-transition.affix { + @include mq(tablet, max) { + padding-bottom: 4px; + } + #payment-data-submit { + @include mq(tablet, max) { + position: inherit; + } + } + } + } + } + .shipping-data, .payment-data, .client-profile-data { @@ -323,7 +500,6 @@ h1#orderform-title { border: none; border-radius: 8px; background: $color-blue2; - outline: none; transition: all 0.2s linear; letter-spacing: 0.05em; @@ -333,6 +509,10 @@ h1#orderform-title { font-size: 14px; line-height: 19px; + @include mq(tablet, max) { + margin-bottom: 13px; + } + &:hover { background: lighten($color-blue2, 5); } @@ -743,6 +923,8 @@ h1#orderform-title { .input.ship-postalCode { label { font-size: 0; + display: flex; + align-items: center; &::before { content: "CEP:"; @@ -1140,6 +1322,14 @@ h1#orderform-title { height: 42px; margin: 0; + &:hover { + background: lighten($color-green2, 5); + } + + &:active { + background: darken($color-green2, 5); + } + i { display: none; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 787e2a5..21ae3ae 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -32,6 +32,12 @@ text-align: center; text-transform: uppercase; margin: 0 0 32px; + + @include mq(tablet, max) { + margin-bottom: 22px; + font-size: 18px; + line-height: 25px; + } } .empty-cart-message { @@ -48,6 +54,12 @@ border-radius: 0%; padding: 15px 64px 17px 65px; margin: 0; + font-size: 14px; + line-height: 16px; + + @include mq(tablet, max) { + padding: 16px 26px; + } } } .empty-cart-title { @@ -89,6 +101,11 @@ border-radius: 5px; padding: 16px; + @include mq(tablet, max) { + padding: 0; + border: none; + } + @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -184,6 +201,10 @@ td { text-align: start; padding: 0; + + @include mq(tablet, max) { + vertical-align: top; + } } th { @@ -194,6 +215,10 @@ font-size: 14px; line-height: 16px; + @include mq(tablet, max) { + display: none; + } + @include mq(md, max) { &.quantity-price, &.shipping-date { @@ -255,6 +280,10 @@ font-size: 12px; line-height: 14px; + @include mq(tablet, max) { + display: none; + } + @include mq(md, max) { display: none; } @@ -264,6 +293,13 @@ min-width: 100px; top: 13px; + @include mq(tablet, max) { + position: absolute; + right: 0; + top: 40%; + text-align: end; + } + @include mq(md, max) { min-width: 78px; } @@ -311,6 +347,12 @@ padding: 9px 0; width: max-content !important; + @include mq(tablet, max) { + position: absolute; + left: 7.7%; + top: 20%; + } + @media (max-width: 490px) { margin-left: 84px !important; } @@ -371,6 +413,12 @@ } } + td.quantity-price { + @include mq(tablet, max) { + display: none; + } + } + .quantity-price, .best-price { .icon-question-sign { @@ -399,6 +447,7 @@ } .item-remove { + text-align: end; @media (max-width: 490px) { top: 0; } @@ -431,6 +480,11 @@ .summary { margin-top: 48px; + @include mq(tablet, max) { + display: flex; + flex-direction: column; + } + .cart-more-options { padding: 0; margin: 0; @@ -494,6 +548,10 @@ .srp-data { width: 280px; + @include mq(tablet, max) { + width: 343px; + } + @include mq(cstm, max) { width: calc(100vw - 32px); } @@ -586,6 +644,10 @@ height: 36px; padding: 12px 8px; width: 172px; + + @include mq(tablet, max) { + width: 215px; + } } & ~ button { @@ -615,6 +677,11 @@ &:active { background-color: darken($color-blue2, 5); } + + @include mq(tablet, max) { + width: 120px; + right: -213px; + } } small a { @@ -712,6 +779,11 @@ width: 354px; margin-bottom: 5px; + @include mq(tablet, max) { + margin: 48px 0 0 0; + width: 100%; + } + .coupon-data { margin-bottom: 8px; @@ -743,6 +815,10 @@ margin: 0; width: 362px; + @include mq(tablet, max) { + width: 100%; + } + div { text-align: start; } @@ -793,6 +869,12 @@ max-width: 204.32px; padding: 0 12px; + @include mq(tablet, max) { + width: 86.2%; + box-sizing: border-box; + max-width: none; + } + &::placeholder { color: $color-gray7; font-family: $font-family-secundary; @@ -825,6 +907,14 @@ width: 133px; text-transform: uppercase; + @include mq(tablet, max) { + width: 13.4%; + } + + @include mq(tablet, max) { + margin-left: 0; + } + @include mq(md, max) { width: 138px; } @@ -849,6 +939,10 @@ font-size: 12px; line-height: 14px; color: $color-black-500; + + @include mq(tablet, max) { + font-size: 0; + } } } } @@ -905,6 +999,11 @@ flex-direction: column; width: 352px; + @include mq(tablet, max) { + width: 100%; + padding-bottom: 0 !important; + } + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); @@ -936,6 +1035,10 @@ } } + .link-choose-more-products { + margin: 0; + } + .btn-place-order-wrapper { a { background: $color-blue2; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index b8e5e08..6a21522 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -20,7 +20,7 @@ header { } @include mq(tablet, max) { - margin: 0 16px; + /*margin: 0 16px;*/ } } @@ -55,7 +55,13 @@ body { } .container-order-form, .container-cart { + box-sizing: border-box; /*teste*/ width: 80%; + + @include mq(tablet, max) { + width: 100%; + padding: 0 16px; + } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 5446c03..6767f6c 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,5 +1,9 @@ .footerCheckout { &__prateleira { + @include mq(tablet, max) { + padding: 0 16px; + margin-bottom: 54px; + } h2 { font-family: $font-family-secundary; font-style: normal; @@ -102,6 +106,10 @@ font-size: 13px; line-height: 18px; color: $color-black-500; + + @media (min-width: 1025px) and (max-width: 1110px) { + height: 36px; + } } .product-variation { @@ -124,6 +132,7 @@ letter-spacing: 0.05em; text-transform: uppercase; color: $color-white; + white-space: nowrap; } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 144fd13..8f3d875 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -19,6 +19,13 @@ display: flex; align-items: center; justify-content: space-between; + + @include mq(tablet, max) { + align-items: flex-start; + flex-direction: column; + padding: 16px 8px; + margin: 0; + } } } @@ -33,6 +40,12 @@ text-transform: capitalize; max-width: 40%; + @include mq(tablet, max) { + margin-bottom: 16px; + margin-left: 8px; + order: 1; + } + @include mq(md, max) { margin-bottom: 24px; max-width: 100%; @@ -46,6 +59,10 @@ list-style: none; margin: 0; + @include mq(tablet, max) { + margin-bottom: 16px; + } + li { display: flex; @@ -101,6 +118,12 @@ display: flex; list-style-type: none; + @include mq(tablet, max) { + margin: 0 0 0 8px; + + order: 2; + } + li:last-child { margin-left: 10.73px; figure { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 17b8961..5791233 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -5,6 +5,10 @@ .container { width: 79.53125% !important; + + @include mq(tablet, max) { + width: 992px !important; + } } &__wrapper { align-items: center; -- 2.34.1 From c5b7a30187f2cbf4402e0ef8a549af6ce3d02be5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Sun, 18 Dec 2022 16:14:12 -0300 Subject: [PATCH 4/6] feat: Finaliza layout tablet --- bash.exe.stackdump | 2 +- checkout/src/arquivos/js/components/Footer.js | 20 +++---- .../sass/checkout/_checkout-autenticacao.scss | 59 +++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 50 ++++++++++++++-- .../src/arquivos/sass/checkout/_checkout.scss | 2 +- 5 files changed, 110 insertions(+), 23 deletions(-) diff --git a/bash.exe.stackdump b/bash.exe.stackdump index 49da798..f49f2be 100644 --- a/bash.exe.stackdump +++ b/bash.exe.stackdump @@ -2,7 +2,7 @@ Stack trace: Frame Function Args 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) -000FFFFCD30 002100484A2 (000007F0000, 000007F0101, 00000000001, F6F414F9291F) +000FFFFCD30 002100484A2 (000000E0000, 000000E0101, 00000000001, 94FEDA51F366) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index e3324f6..6fca529 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -88,23 +88,21 @@ export default class Footer { } async addCarrossel() { - const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 }); + const prateleira = await waitElement(".carrosel-items", { timeout: 5000, interval: 500 }); - if (window.screen.width > 102) { + if (window.screen.width > 1024) { + $(prateleira).slick({ + slidesToShow: 4, + slidesToScroll: 1, + infinite: true, + arrows: true, + }); + } else if (window.screen.width <= 1024) { $(prateleira).slick({ slidesToShow: 3, slidesToScroll: 1, infinite: true, arrows: true, - responsive: [ - { - breakpoint: 1024, - settings: { - slidesToShow: 4, - slidesToScroll: 1, - }, - }, - ], }); } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 23a9426..897b9eb 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -5,9 +5,17 @@ h1#orderform-title { line-height: 33px; color: $color-black-500; margin: 17px 0; + + @include mq(tablet, max) { + margin: 17px 16px; + } } .checkout-container { + .link.link-cart.pull-right { + margin-right: 16px; + } + .client-pre-email { border-color: $color-black-500; font-family: $font-family; @@ -88,6 +96,7 @@ h1#orderform-title { @include mq(tablet, max) { width: 100%; text-align: initial; + padding: 0 16px; } input { @@ -137,7 +146,7 @@ h1#orderform-title { text-transform: uppercase; @include mq(tablet, max) { - right: 0; + right: 1.7%; } &:hover { @@ -231,6 +240,7 @@ h1#orderform-title { //DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE .row-fluid.orderform-template { @include mq(tablet, max) { + padding: 0 16px; display: flex; flex-direction: column; } @@ -249,6 +259,7 @@ h1#orderform-title { //IDENTIFICAÇÃO .span6.client-profile-data { + box-sizing: border-box; @include mq(tablet, max) { width: 100%; } @@ -257,19 +268,19 @@ h1#orderform-title { .client-last-name, .client-document, .client-phone { + width: 47.4%; @include mq(tablet, max) { width: 49.4%; } input { - @include mq(tablet, max) { - width: 100%; - } + width: 100%; } } .client-first-name, .client-document { + margin-right: 5.14%; @include mq(tablet, max) { margin-right: 1.2%; } @@ -630,7 +641,30 @@ h1#orderform-title { } /*IDENTIFICAÇÃO*/ + .client-profile-data { + //INDENTIFICACAO INPUTS PORCENTAGEM + /*.span6.client-profile-data { + width: 100%; + box-sizing: border-box; + + .client-first-name, + .client-last-name, + .client-document, + .client-phone { + width: 49.4%; + + input { + width: 100%; + } + } + + .client-first-name, + .client-document { + margin-right: 1.2%; + } + }*/ + .accordion-group { padding: 24px 17px; @@ -1144,6 +1178,12 @@ h1#orderform-title { } //RESUMO DO PEDIDO (MINI CART CARRINHO) +/*.summary-cart-template-holder { + @include mq(tablet, max) { + height: unset; + } +} TESTE */ + .cart-fixed.cart-fixed-transition { height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO @@ -1247,6 +1287,10 @@ h1#orderform-title { font-size: 12px; line-height: 16px; margin-right: 17px; + + @include mq(tablet, max) { + margin-right: 0; + } } } @@ -1276,10 +1320,17 @@ h1#orderform-title { &.info { margin-left: 17px; + + @include mq(tablet, max) { + margin-left: 0; + } } &.monetary { margin-right: 17px; + @include mq(tablet, max) { + margin-right: 0; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 21ae3ae..eb1c56e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -10,13 +10,10 @@ letter-spacing: 0.05em; color: $color-black; margin: 17px 0 16px; - } - .cart-template .cart-items th { - font-family: $font-family-secundary; - font-weight: 400; - padding: 0 0 17px; - text-align: start; + @include mq(tablet, max) { + margin-left: 16px; + } } } @@ -189,6 +186,47 @@ } } + //CART TABLET MOBILE + .cart-template-holder { + @include mq(tablet, max) { + } + + .cart { + @include mq(tablet, max) { + padding: 16px; + margin: 16px 0; + border-top: 1px solid #f0f0f0; + border-bottom: 1px solid #f0f0f0; + + /*.product-image { + @include mq(tablet, max) { + margin-left: 16px; + } + .quantity { + @include mq(tablet, max) { + margin-left: 16px; + } + } + }*/ + } + } + } + + .summary-template-holder { + @include mq(tablet, max) { + margin: 0 16px; + width: auto; + } + } + + .cart-links-bottom { + span { + @include mq(tablet, max) { + margin: 0 16px; + } + } + } + .lookatme { background-color: $color-white; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 6a21522..a653999 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -60,7 +60,7 @@ body { @include mq(tablet, max) { width: 100%; - padding: 0 16px; + padding: 0; /*APLICAR EM OUTROS ELEMENTOS 16px*/ } } } -- 2.34.1 From b4024af7feb6ea652d540ff0a38617cb51095b50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Sun, 18 Dec 2022 19:19:31 -0300 Subject: [PATCH 5/6] Adiciona layout mobile --- bash.exe.stackdump | 2 +- checkout/src/arquivos/js/components/Footer.js | 7 +++ .../sass/checkout/_checkout-autenticacao.scss | 51 ++++++++++++++++--- .../sass/checkout/_checkout-carrinho.scss | 45 ++++++++++++---- checkout/src/arquivos/sass/lib/_slick.scss | 25 +++++++-- .../src/arquivos/sass/partials/_footer.scss | 12 ++++- .../src/arquivos/sass/partials/_header.scss | 6 ++- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 8 files changed, 124 insertions(+), 25 deletions(-) diff --git a/bash.exe.stackdump b/bash.exe.stackdump index f49f2be..01735e2 100644 --- a/bash.exe.stackdump +++ b/bash.exe.stackdump @@ -2,7 +2,7 @@ Stack trace: Frame Function Args 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) -000FFFFCD30 002100484A2 (000000E0000, 000000E0101, 00000000001, 94FEDA51F366) +000FFFFCD30 002100484A2 (000007B0000, 000007D2501, 00000000001, E2F524F93905) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 6fca529..6a978bf 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -97,6 +97,13 @@ export default class Footer { infinite: true, arrows: true, }); + } else if (window.screen.width < 600) { + $(prateleira).slick({ + slidesToShow: 2, + slidesToScroll: 1, + infinite: true, + arrows: true, + }); } else if (window.screen.width <= 1024) { $(prateleira).slick({ slidesToShow: 3, diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 897b9eb..7947501 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -13,7 +13,9 @@ h1#orderform-title { .checkout-container { .link.link-cart.pull-right { - margin-right: 16px; + @include mq(tablet, max) { + margin-right: 16px; + } } .client-pre-email { @@ -23,6 +25,11 @@ h1#orderform-title { @include mq(tablet, max) { padding-top: 0; + left: 0; + } + + @include mq(md, max) { + /*width: unset;*/ } .link-cart { @@ -49,6 +56,10 @@ h1#orderform-title { } .pre-email { + @include mq(md, max) { + margin-top: 100px; + } + flex-direction: column; display: flex; align-items: center; @@ -70,6 +81,14 @@ h1#orderform-title { font-size: 14px; line-height: 16px; } + + @include mq(md, max) { + font-size: 12px; + line-height: 14px; + } + + font-size: 12px; + line-height: 14px; } small { @@ -82,8 +101,8 @@ h1#orderform-title { font-family: $font-family-secundary; @include mq(tablet, max) { - font-size: 14px; - line-height: 16px; + font-size: 12px; + line-height: 14px; } } } @@ -116,16 +135,16 @@ h1#orderform-title { line-height: 16px; @include mq(tablet, max) { - width: 90%; + width: 90% !important; } &::placeholder { color: $color-black-500; } - @media (max-width: 490px) { + /*@media (max-width: 490px) { width: auto; - } + }*/ } button { @@ -149,6 +168,10 @@ h1#orderform-title { right: 1.7%; } + @include mq(md, max) { + right: 3.3%; + } + &:hover { background: lighten($color-blue2, 5); } @@ -158,7 +181,7 @@ h1#orderform-title { } @media (max-width: 490px) { - height: 48px; + /*height: 48px;*/ margin: 0; position: absolute; } @@ -194,6 +217,16 @@ h1#orderform-title { } } + @include mq(fold, max) { + width: 220px; + height: auto; + } + + /*@include mq(md, max) { + display: table-cell; + width: 100%; + }*/ + h3 { color: $color-black-500; font-style: normal; @@ -245,6 +278,10 @@ h1#orderform-title { flex-direction: column; } + .input-xlarge { + max-width: unset; + } + .orderform-template-holder.span8 { @include mq(tablet, max) { width: 100% !important; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index eb1c56e..0e28511 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -234,6 +234,11 @@ .cart-items { tr.product-item { position: relative; + + @include mq(md, max) { + padding: 0; + margin: 0; + } } td { @@ -246,6 +251,7 @@ } th { + text-align: start; color: $color-black; padding: 0 0 16px; font-style: normal; @@ -270,8 +276,10 @@ padding: 0; width: 60px; - @include mq(sm, max) { - width: 72px; + @include mq(md, max) { + /*width: 72px;*/ + position: inherit !important; + width: 60px; } img { @@ -281,8 +289,8 @@ object-fit: cover; @include mq(sm, max) { - height: 72px; - width: auto; + /*height: 72px; + width: auto;*/ } } } @@ -290,8 +298,10 @@ .product-name { padding: 0 0 0 16px; - @include mq(lg, max) { - width: 250px; + @include mq(md, max) { + /*width: 250px;*/ + position: absolute; + top: 0; } a { @@ -391,8 +401,12 @@ top: 20%; } + @include mq(md, max) { + left: 6%; + } + @media (max-width: 490px) { - margin-left: 84px !important; + /*margin-left: 84px !important;*/ } input { @@ -486,8 +500,14 @@ .item-remove { text-align: end; - @media (max-width: 490px) { + @include mq(md, max) { top: 0; + padding: 0; + } + a { + @include mq(md, max) { + padding-top: 0; + } } .icon::before { color: $color-gray7; @@ -517,6 +537,9 @@ .summary { margin-top: 48px; + @include mq(md, max) { + margin-top: 0; + } @include mq(tablet, max) { display: flex; @@ -530,7 +553,7 @@ .srp-container { @include mq(md, max) { - padding: 0 16px; + max-width: 276px; } .srp-main-title { @@ -844,7 +867,7 @@ } @include mq(md, max) { - padding: 0 16px; + padding: 0; width: 100%; } @@ -1046,7 +1069,7 @@ padding: 0 16px; width: calc(100% - 32px); float: none; - margin-bottom: 50px; + /*margin-bottom: 50px;*/ } @include mq(md, min) { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 6767f6c..9ace038 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -114,11 +114,18 @@ .product-variation { display: flex; + flex-wrap: wrap; justify-content: center; - margin-bottom: 20px; + align-items: center; + margin-bottom: 15px; + + @include mq(md, max) { + height: 56px; + } &__variation { - margin: 0 2.5px; + height: fit-content; + margin: 0 2.5px 5px; background: $color-blue2; border-radius: 8px; padding: 5px; @@ -132,7 +139,7 @@ letter-spacing: 0.05em; text-transform: uppercase; color: $color-white; - white-space: nowrap; + /*white-space: nowrap;*/ } } @@ -187,18 +194,30 @@ border: none; z-index: 4; top: 45%; + + @include mq(md, max) { + top: 50%; + } } .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") no-repeat center center; background-size: contain; left: 10px; + + @include mq(md, max) { + left: 0px; + } } .slick-next { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") no-repeat center center; background-size: contain; right: 10px; + + @include mq(md, max) { + right: 0; + } } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 8f3d875..e7ebbef 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -26,6 +26,10 @@ padding: 16px 8px; margin: 0; } + + @include mq(md, max) { + margin: 16px 0; + } } } @@ -47,7 +51,7 @@ } @include mq(md, max) { - margin-bottom: 24px; + margin-bottom: 16px; max-width: 100%; } } @@ -70,6 +74,10 @@ display: flex; column-gap: 13px; + @include mq(md, max) { + column-gap: 4px; + } + figure { margin: 0; width: 35px; @@ -99,7 +107,7 @@ } @include mq(md, max) { - align-self: center; + align-self: flex-start; margin-bottom: 12px; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 5791233..9dbd61e 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -7,7 +7,7 @@ width: 79.53125% !important; @include mq(tablet, max) { - width: 992px !important; + width: 96.875% !important; } } &__wrapper { @@ -29,6 +29,10 @@ margin: 16px 0; } + @include mq(cstm, max) { + margin-right: 50px; + } + img { width: 100%; } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index de298d1..f053610 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -38,6 +38,7 @@ $color-green2: #298541; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, + fold: 330, cstm: 400, sm: 576px, md: 768px, -- 2.34.1 From d8692d739cfb5612a5ba0e9b1ddb47431f5b9863 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Sun, 18 Dec 2022 23:33:34 -0300 Subject: [PATCH 6/6] feat: Adiciona layout 2500 --- bash.exe.stackdump | 2 +- checkout/src/arquivos/js/components/Footer.js | 3 - .../sass/checkout/_checkout-autenticacao.scss | 81 +++------ .../sass/checkout/_checkout-carrinho.scss | 163 ++++++++++++++++-- .../src/arquivos/sass/checkout/_checkout.scss | 8 +- checkout/src/arquivos/sass/lib/_slick.scss | 32 +++- .../src/arquivos/sass/partials/_footer.scss | 34 ++++ .../src/arquivos/sass/partials/_header.scss | 4 + .../src/arquivos/sass/utils/_variaveis.scss | 2 +- 9 files changed, 243 insertions(+), 86 deletions(-) diff --git a/bash.exe.stackdump b/bash.exe.stackdump index 01735e2..512b978 100644 --- a/bash.exe.stackdump +++ b/bash.exe.stackdump @@ -2,7 +2,7 @@ Stack trace: Frame Function Args 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) -000FFFFCD30 002100484A2 (000007B0000, 000007D2501, 00000000001, E2F524F93905) +000FFFFCD30 002100484A2 (000007D0000, 000007D0101, 00000000001, 5C74DE1CAC3C) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 6a978bf..db385b4 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -10,8 +10,6 @@ export default class Footer { await this.carrinho(); this.renderPrateleira(); this.onUpdate(); - //this.prateleira(); - //this.onUpdate(); } async selectors() { @@ -146,7 +144,6 @@ export default class Footer { carrinho() { this.title.innerHTML = ``; - //this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; this.continuarCompra.innerHTML = `continuar comprando`; this.frete.innerHTML = `Frete`; this.unidade.innerHTML = `Unidade`; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 7947501..52e0607 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -28,10 +28,6 @@ h1#orderform-title { left: 0; } - @include mq(md, max) { - /*width: unset;*/ - } - .link-cart { a { font-family: $font-family-secundary; @@ -86,9 +82,6 @@ h1#orderform-title { font-size: 12px; line-height: 14px; } - - font-size: 12px; - line-height: 14px; } small { @@ -109,7 +102,6 @@ h1#orderform-title { } .client-email { - /*left: -61px;*/ margin: 0 0 24.56px; @include mq(tablet, max) { @@ -119,7 +111,6 @@ h1#orderform-title { } input { - /*width: 65.8%;*/ width: 82%; height: 50px; box-shadow: none; @@ -141,10 +132,6 @@ h1#orderform-title { &::placeholder { color: $color-black-500; } - - /*@media (max-width: 490px) { - width: auto; - }*/ } button { @@ -181,7 +168,6 @@ h1#orderform-title { } @media (max-width: 490px) { - /*height: 48px;*/ margin: 0; position: absolute; } @@ -222,11 +208,6 @@ h1#orderform-title { height: auto; } - /*@include mq(md, max) { - display: table-cell; - width: 100%; - }*/ - h3 { color: $color-black-500; font-style: normal; @@ -305,13 +286,18 @@ h1#orderform-title { .client-last-name, .client-document, .client-phone { + float: left !important; + width: 47.4%; @include mq(tablet, max) { width: 49.4%; } + @include mq(md, max) { + width: 47.5%; + } input { - width: 100%; + width: 100% !important; } } @@ -321,6 +307,9 @@ h1#orderform-title { @include mq(tablet, max) { margin-right: 1.2%; } + @include mq(md, max) { + margin-right: 5%; + } } } @@ -357,7 +346,7 @@ h1#orderform-title { @include mq(tablet, max) { position: absolute; bottom: 1%; - left: 14%; + left: 140px; } } } @@ -399,6 +388,7 @@ h1#orderform-title { .cart-fixed.cart-fixed-transition.affix { @include mq(tablet, max) { padding-bottom: 4px; + left: -0.5px; } #payment-data-submit { @include mq(tablet, max) { @@ -541,7 +531,7 @@ h1#orderform-title { button.submit { margin-top: 0; - margin-bottom: 22px; /*tem 15de pad e 7 de p*/ + margin-bottom: 22px; width: 100%; height: 42px; text-transform: uppercase; @@ -680,28 +670,6 @@ h1#orderform-title { /*IDENTIFICAÇÃO*/ .client-profile-data { - //INDENTIFICACAO INPUTS PORCENTAGEM - /*.span6.client-profile-data { - width: 100%; - box-sizing: border-box; - - .client-first-name, - .client-last-name, - .client-document, - .client-phone { - width: 49.4%; - - input { - width: 100%; - } - } - - .client-first-name, - .client-document { - margin-right: 1.2%; - } - }*/ - .accordion-group { padding: 24px 17px; @@ -1215,15 +1183,9 @@ h1#orderform-title { } //RESUMO DO PEDIDO (MINI CART CARRINHO) -/*.summary-cart-template-holder { - @include mq(tablet, max) { - height: unset; - } -} TESTE */ .cart-fixed.cart-fixed-transition { - height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO - + height: auto !important; box-sizing: border-box; border: 1px solid $color-gray5; margin-top: 10px; @@ -1286,6 +1248,10 @@ h1#orderform-title { .price { margin-right: 0; } + + @include mq(fold, max) { + margin-top: 28px; + } } span.fn.product-name { @@ -1299,6 +1265,16 @@ h1#orderform-title { font-size: 12px; line-height: 14px; color: $color-black; + + @include mq(md, max) { + top: 25%; + margin-left: 70px; + } + + @include mq(fold, max) { + top: 0; + margin-left: 70px; + } } strong { @@ -1341,9 +1317,6 @@ h1#orderform-title { display: flex; td { - /*&.empty { - }*/ - &.info, &.monetary { 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 0e28511..65a4b2b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -11,6 +11,11 @@ color: $color-black; margin: 17px 0 16px; + @include mq(xxl, min) { + font-size: 48px; + line-height: 65px; + } + @include mq(tablet, max) { margin-left: 16px; } @@ -22,6 +27,10 @@ .empty-cart-content { margin-top: 100px; + @include mq(md, max) { + margin-top: 150px; + } + .empty-cart-title { font-weight: 700; font-size: 24px; @@ -30,6 +39,11 @@ text-transform: uppercase; margin: 0 0 32px; + @include mq(xxl, min) { + font-size: 48px; + line-height: 65px; + } + @include mq(tablet, max) { margin-bottom: 22px; font-size: 18px; @@ -54,6 +68,11 @@ font-size: 14px; line-height: 16px; + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } + @include mq(tablet, max) { padding: 16px 26px; } @@ -197,17 +216,6 @@ margin: 16px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; - - /*.product-image { - @include mq(tablet, max) { - margin-left: 16px; - } - .quantity { - @include mq(tablet, max) { - margin-left: 16px; - } - } - }*/ } } } @@ -259,6 +267,11 @@ font-size: 14px; line-height: 16px; + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } + @include mq(tablet, max) { display: none; } @@ -276,6 +289,11 @@ padding: 0; width: 60px; + @include mq(xxl, min) { + height: 146px; + width: 146px; + } + @include mq(md, max) { /*width: 72px;*/ position: inherit !important; @@ -288,6 +306,12 @@ width: 60px; object-fit: cover; + @include mq(xxl, min) { + height: 146px; + width: 146px; + max-width: 146px; + } + @include mq(sm, max) { /*height: 72px; width: auto;*/ @@ -312,8 +336,13 @@ line-height: 14px; transition: ease-in 0.22s all; - @media (max-width: 490px) { - margin-left: 23px; + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } + + @include mq(md, max) { + margin-left: 15px; } } @@ -328,6 +357,15 @@ font-size: 12px; line-height: 14px; + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } + + @include mq(tablet, min) { + min-width: 100px; + } + @include mq(tablet, max) { display: none; } @@ -361,6 +399,12 @@ font-size: 12px; line-height: 14px; text-decoration-line: line-through; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -376,8 +420,20 @@ } } + .new-product-price { + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } + } + .new-product-price-label { text-transform: lowercase; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } } } @@ -395,14 +451,23 @@ padding: 9px 0; width: max-content !important; + @include mq(xxl, min) { + height: 50px !important; + width: 135px !important; + max-height: 50px; + max-width: 135px; + margin-top: 40px; + } + @include mq(tablet, max) { position: absolute; - left: 7.7%; - top: 20%; + left: 75px; + margin-left: 0 !important; + top: 25%; } @include mq(md, max) { - left: 6%; + left: 75px; } @media (max-width: 490px) { @@ -420,6 +485,12 @@ color: $color-black-500; box-shadow: none; + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + padding: 0px 10px; + } + @include mq(lg, max) { width: 24px !important; } @@ -439,6 +510,10 @@ &:before { font-size: 16px; padding-right: 0; + + @include mq(xxl, min) { + font-size: 30px; + } } } @@ -446,17 +521,24 @@ &:before { font-size: 14px; padding-left: 0; + + @include mq(xxl, min) { + font-size: 30px; + } } } .item-quantity-change { @media (max-width: 979px) and (min-width: 768px) { - position: inherit; + height: unset; + width: unset; + position: unset; + /*position: inherit; bottom: inherit; left: inherit; height: inherit; width: inherit; - top: inherit; + top: inherit;*/ } @media (max-width: 490px) { @@ -469,6 +551,10 @@ @include mq(tablet, max) { display: none; } + + @include mq(xxl, min) { + width: 150px; + } } .quantity-price, @@ -495,11 +581,20 @@ font-weight: 700; font-size: 14px; line-height: 19px; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } } } .item-remove { text-align: end; + + @include mq(xxl, min) { + text-align: left; + } @include mq(md, max) { top: 0; padding: 0; @@ -515,6 +610,10 @@ width: 10px; height: 10px; + @include mq(xxl, min) { + font-size: 32px; + } + @include mq(md, max) { font-size: 18px; } @@ -564,6 +663,11 @@ line-height: 33px; color: $color-black-500; + @include mq(xxl, min) { + font-size: 48px; + line-height: 65px; + } + @include mq(md, max) { margin-top: 0; } @@ -577,6 +681,13 @@ margin: 0 0 10.65px; width: 276px; max-width: 276px; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 36px; + width: 552px; + max-width: 552px; + } } button.shp-open-options { @@ -596,6 +707,12 @@ mix-blend-mode: normal; margin-top: 0; + @include mq(xxl, min) { + font-size: 28px; + width: 230px; + height: 44px; + } + &:hover { background-color: lighten($color-gray4, 5); } @@ -863,6 +980,11 @@ line-height: 14px; color: $color-black-500; text-decoration: none; + + @include mq(xxl, max) { + font-size: 24px; + line-height: 28px; + } } } @@ -900,6 +1022,11 @@ line-height: 14px; color: $color-gray2; cursor: none; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } } .coupon-fields { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index a653999..3f9a975 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -18,10 +18,6 @@ header { width: 79.53125%; margin: 0 auto 56px auto; } - - @include mq(tablet, max) { - /*margin: 0 16px;*/ - } } body { @@ -55,12 +51,12 @@ body { } .container-order-form, .container-cart { - box-sizing: border-box; /*teste*/ + box-sizing: border-box; width: 80%; @include mq(tablet, max) { width: 100%; - padding: 0; /*APLICAR EM OUTROS ELEMENTOS 16px*/ + padding: 0; } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 9ace038..3776b83 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -13,6 +13,11 @@ text-align: center; color: $color-black-500; margin-bottom: 20px; + + @include mq(xxl, min) { + font-size: 48px; + line-height: 76px; + } } } } @@ -96,6 +101,7 @@ text-align: center; img { + width: 100%; display: block; margin-bottom: 20px; } @@ -107,6 +113,11 @@ line-height: 18px; color: $color-black-500; + @include mq(xxl, min) { + font-size: 26px; + line-height: 35px; + } + @media (min-width: 1025px) and (max-width: 1110px) { height: 36px; } @@ -119,8 +130,8 @@ align-items: center; margin-bottom: 15px; - @include mq(md, max) { - height: 56px; + @include mq(xl, max) { + height: 66px; } &__variation { @@ -139,7 +150,11 @@ letter-spacing: 0.05em; text-transform: uppercase; color: $color-white; - /*white-space: nowrap;*/ + + @include mq(xxl, min) { + font-size: 26px; + line-height: 35px; + } } } @@ -159,6 +174,11 @@ letter-spacing: 0.05em; text-transform: uppercase; color: $color-white; + + @include mq(xxl, min) { + font-size: 26px; + line-height: 35px; + } } } @@ -195,6 +215,12 @@ z-index: 4; top: 45%; + @include mq(xxl, min) { + width: 26px; + height: 58px; + top: 50%; + } + @include mq(md, max) { top: 50%; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index e7ebbef..61f1cac 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -44,6 +44,11 @@ text-transform: capitalize; max-width: 40%; + @include mq(xxl, min) { + font-size: 20px; + line-height: 27px; + } + @include mq(tablet, max) { margin-bottom: 16px; margin-left: 8px; @@ -83,6 +88,11 @@ width: 35px; height: 20px; + @include mq(xxl, min) { + width: 69px; + height: 39px; + } + img { width: 100%; vertical-align: unset; @@ -98,6 +108,11 @@ width: 53px; height: 33px; + @include mq(xxl, min) { + width: 103px; + height: 64px; + } + img { width: 100%; vertical-align: unset; @@ -117,6 +132,10 @@ height: 24px; margin: 0 10px 0 13px; width: 1px; + + @include mq(xxl, min) { + height: 43px; + } } } @@ -137,6 +156,11 @@ figure { width: 28.66px; height: 15.65px; + + @include mq(xxl, min) { + width: 55px; + height: 30px; + } } } @@ -158,6 +182,11 @@ font-size: 9px; line-height: 12px; color: $color-black; + + @include mq(xxl, min) { + font-size: 18px; + line-height: 25px; + } } figure { @@ -165,6 +194,11 @@ width: 44.92px; height: 16px; + @include mq(xxl, min) { + width: 87px; + height: 31px; + } + img { width: 100%; vertical-align: unset; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 9dbd61e..d4874d7 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -9,6 +9,10 @@ @include mq(tablet, max) { width: 96.875% !important; } + + @include mq(md, max) { + width: 91.46% !important; + } } &__wrapper { align-items: center; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f053610..296bc65 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -38,7 +38,7 @@ $color-green2: #298541; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, - fold: 330, + fold: 350, cstm: 400, sm: 576px, md: 768px, -- 2.34.1