From a01fe114b7fc407ce30feb16e68a8c5022a6958d Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 26 Dec 2022 23:57:55 -0300 Subject: [PATCH] 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; + } } }