From 8864c52de57046af2b78011bc20d072f00bf26f6 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Fri, 23 Dec 2022 14:33:39 -0300 Subject: [PATCH] fix(header): corrige alinhamento da progressBar e ajusta responsividade do header --- checkout/src/arquivos/js/components/Header.js | 38 ++-- .../src/arquivos/sass/checkout/_checkout.scss | 3 +- .../src/arquivos/sass/partials/_header.scss | 164 +++++++++++++----- .../src/arquivos/sass/utils/_variaveis.scss | 6 +- .../template-checkout/checkout-header.html | 28 ++- 5 files changed, 178 insertions(+), 61 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 9c323c2..64579c6 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,33 +8,39 @@ export default class Header { async init() { await this.selectors(); - this.progressBarStructure(); + await this.progressBarStructure(); await this.progressBarMove(); } async selectors() { - // this.header = await waitElement(".headerCheckout"); this.progressBar = await waitElement("#progressBar"); } - progressBarStructure() { + async progressBarStructure() { if (this.progressBar && window.innerWidth > 1024) { this.progressBar.innerHTML = ` ` } @@ -48,7 +54,7 @@ export default class Header { if (this.progressBar && window.innerWidth > 1024) { - const progressBarStages = document.querySelectorAll((".progress-bar__stage")); + const progressBarStages = document.querySelectorAll(".progress-bar__stage"); progressBarStages.forEach((stage) => { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index df0824c..1557a70 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -12,8 +12,7 @@ footer .footerCheckout__wrapper { width: 94.9734%; margin: auto auto 0 auto; } -footer .footerCheckout__prateleira, -header { +footer .footerCheckout__prateleira { width: 79.53125%; margin: 0 auto; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index fc9d501..f45598f 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,52 +1,136 @@ /* _header.scss */ .headerCheckout { - // position: relative; margin: 0; - padding: 30px 131px; + padding: 29px 131px; border-bottom: 1px solid $black-500; + @include mq(xl, min) { + padding: 29px 256px; + } + + @include mq(lg, max) { + padding: 16px 16px; + } + .container { width: auto !important; } &__wrapper { + width: 100%; display: grid; - grid-template-columns: repeat(3, 1fr); - // display: flex; - // justify-content: space-between; + grid-template-columns: 1fr 43.22% 1fr; align-items: center; + justify-content: center; + + @include mq(xl, min) { + grid-template-columns: 1fr 54.22% 1fr; + } + + @include mq(lg, max) { + display: flex; + justify-content: space-between; + } } &__logo { img { height: 37.14px; - width: auto; + width: 155.58px; + + @include mq(xl, min) { + height: 91.2px; + width: 382.07px; + } + + @include mq(lg, max) { + height: 33px; + } + + @include mq(xs, max) { + width: 114px; + height: auto; + } } } .progress-bar { - // position: absolute; - // top: 50%; - // left: 50%; - // transform: translate(-50%, -50%); - width: 440px; &__container { - // position:relative; - margin: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); - // display: flex; - // align-items: center; - // justify-content: space-between; list-style: none; } - &__stage { + &__stage-wrapper { position: relative; display: flex; + + &::before, + &::after { + content: ""; + position: absolute; + bottom: 6.5px; + height: 1px; + background: $black-500; + + @include mq(xl, min) { + bottom: 12.5px; + } + } + + &:nth-child(1) { + justify-content: flex-start; + + &::after{ + width: calc(100% - 45.23px);//68.81%; + right: 0; + + @include mq(xl, min) { + width: calc(100% - 89.965px);//77.63%; + } + } + }; + + &:nth-child(2) { + justify-content: center; + + &::before, + &::after { + width: calc(50% - 7px); + + @include mq(xl, min) { + width: calc(50% - 13px); + } + } + + &::before { + left: 0; + } + + &::after{ + right: 0; + } + }; + + &:nth-child(3) { + justify-content: flex-end; + + &::before{ + width: calc(100% - 38.315px);//73.54%; + left: 0; + + @include mq(xl, min) { + width: calc(100% - 76.125px); //81.05%; + } + } + }; + }; + + &__stage { + display: flex; flex-direction: column; align-items: center; justify-content: center; @@ -58,6 +142,12 @@ font-family: $font-family-secundary; font-size: 12px; color: $black-500; + + @include mq(xl, min) { + margin-bottom: 15px; + line-height: 28px; + font-size: 24px; + } } &--circle { @@ -69,29 +159,11 @@ &.active { background: $black-500; } - } - &::before, - &::after { - content: ''; - position: absolute; - bottom: 6.5px; - width: calc(50% - 7px); - height: 1px; - background: $black-500; - } - - &::before { - left: 0; - } - - &::after{ - left: calc(50% + 7px); - } - - &:first-child::before, - &:last-child::after { - display: none; + @include mq(xl, min) { + width: 24px; + height: 24px; + } } } } @@ -105,6 +177,15 @@ img { width: 12px; height: 15px; + + @include mq(xl, min) { + width: 29.47px; + height: 41.46px; + } + + @include mq(lg, max) { + height: 13.33px; + } } span { @@ -113,6 +194,11 @@ font-size: 12px; text-transform: uppercase; color: $black-300; + + @include mq(xl, min) { + line-height: 33px; + font-size: 24px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index fee8880..d44fc3c 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -22,12 +22,12 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, + xs: 375px, cstm: 400, sm: 576px, md: 768px, - lg: 992px, - xl: 1200px + lg: 1025px, + xl: 2500px ) !default; $z-index: ( diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html index 258a0d6..d6e7031 100644 --- a/checkout/src/template-checkout/checkout-header.html +++ b/checkout/src/template-checkout/checkout-header.html @@ -9,7 +9,33 @@ M3 Academy -
Aqui entra a barra de progresso +
+ Aqui entra a barra de progresso + +
    +
    +
  • +

    Meu carrinho

    +
    +
    • +
    + +
    +
  • +

    Dados Pessoais

    +
    +
    • +
    + +
    +
  • +

    Pagamento

    +
    +
    • +
    + +
+
Cadeado