Amandaalmeida/m3-academy-template-checkout-amanda-almeida
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(responsividade): ajuste na responsividade mobile

Browse Source
This commit is contained in:
amanda almeida 2022-12-23 23:14:43 -03:00
parent 7dfcb68387
commit c21562a08a
5 changed files with 545 additions and 522 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
checkout/src/arquivos/js/components/Cart.js
View File

@ -7,29 +7,26 @@ export default class Cart {
async init() { async init() {
await this.textButton(); await this.textButton();
this.selectors();
this.events();
} }
selectors() {
this.addTextButton = $('.link-box-edit');
}
events() {
this.addTextButton.click(this.textButton);
}
async textButton() { async textButton() {
const textButtonCardVazio = await waitElement(".empty-cart-links a#cart-choose-products", { const textButtonCardVazio = await waitElement(".empty-cart-links a#cart-choose-products");
timeout: 30000, const textCartItemsEntrega = await waitElement(".cart .cart-items thead tr .shipping-date");
interval: 100, const textCartItemsPreço = await waitElement(".cart .cart-items thead tr .product-price");
}); const pPagamento = await waitElement('div.store-country-BRA.active .accordion-body .accordion-inner .notification')
const textCartItemsEntrega = await waitElement(".cart .cart-items thead tr .shipping-date", { const dadosPessoais = await waitElement('.accordion-toggle span')
timeout: 30000,
interval: 100,
});
const textCartItemsPreço = await waitElement(".cart .cart-items thead tr .product-price", {
timeout: 30000,
interval: 100,
});
const pPagamento = await waitElement('.accordion-inner .notification', {
timeout: 30000,
interval: 100,
})
const dadosPessoais = await waitElement('.accordion-toggle span', {
timeout: 30000,
interval: 100,
})
textButtonCardVazio.textContent = `Continuar comprando`; textButtonCardVazio.textContent = `Continuar comprando`;
textCartItemsEntrega.textContent = `Frete`; textCartItemsEntrega.textContent = `Frete`;

5
checkout/src/arquivos/js/components/Footer.js
View File

@ -169,10 +169,7 @@ export default class Footer {
} }
async addCarrossel() { async addCarrossel() {
const products = await waitElement(".footerCheckout__products", { const products = await waitElement(".footerCheckout__products");
timeout: 30000,
interval: 1000,
});
$(products).slick({ $(products).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,

570
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -155,6 +155,8 @@
@include mq(md, max) { @include mq(md, max) {
width: 87.2%; width: 87.2%;
} }
} }
.focus-visible { .focus-visible {
@ -325,8 +327,10 @@
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%;
@include mq(md, max) { @include mq(md, max) {
width: 100% !important; width: 100%;
} }
.row-fluid { .row-fluid {
@ -334,19 +338,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
overflow-x: hidden;
} }
@include mq(sm, max) { @include mq(sm, max) {
align-items: center; align-items: center;
right: -8px;
} }
} }
} }
.client-profile-data { #client-profile-data {
@include mq(md, max) { @include mq(md, max) {
margin-top: 11px; margin-top: 11px;
@ -362,7 +363,7 @@
} }
@include mq(reset4, max) { @include mq(reset4, max) {
width: 90%; width: 91.5%;
} }
.box-client-info { .box-client-info {
@ -475,14 +476,10 @@
line-height: 38px; line-height: 38px;
} }
}
p {
width: 49.6%;
@include mq(sm, max) { @include mq(sm, max) {
width: 47%; font-size: 12px;
} }
} }
.pull-left { .pull-left {
@ -496,14 +493,11 @@
.client-email, .client-email,
.client-first-name, .client-first-name,
.client-last-name { .client-last-name {
margin: 0;
margin-bottom: 16px;
input { input {
height: 42px; height: 42px;
@include mq(md, max) { @include mq(md, max) {
max-width: 100% !important; max-width: 100%;
} }
} }
@ -514,39 +508,39 @@
width: 96%; width: 96%;
@include mq(md, max) { @include mq(md, max) {
width: 98.9%; width: 100%;
} }
} }
} }
.client-first-name {
input {
margin-right: 14px;
width: 91.3%;
@include mq(md, max) {
width: 96.3%;
}
}
}
.client-last-name,
.client-phone {
input {
float: right;
}
}
.client-last-name, .client-last-name,
.client-phone, .client-phone,
.client-document { .client-document,
input { .client-first-name {
width: 91.3%; margin: 0;
width: 47%;
@include mq(md, max) { @include mq(md, max) {
width: 96.3%; width: 48%;
}
@include mq(sm, max) {
width: 47.6%;
}
@include mq(xs2, max) {
width: 46.8%;
}
input {
width: 94% !important;
@include mq(md, max) {
width: 100% !important;
}
@include mq(sm, max) {
width: 94% !important;
} }
} }
@ -563,7 +557,6 @@
} }
} }
margin: 0;
margin-bottom: 13px; margin-bottom: 13px;
@include mq(md, max) { @include mq(md, max) {
@ -573,13 +566,15 @@
.client-document { .client-document {
input { input {
margin-right: 14px; margin-right: 15px;
} }
} }
.client-first-name, .client-first-name,
.client-document { .client-document {
margin-bottom: 16px;
margin-right: 14px;
input, input,
label { label {
@ -588,12 +583,6 @@
margin-right: 14px; margin-right: 14px;
} }
} }
@include mq(sm, max) {
margin-right: 14px !important;
}
} }
} }
@ -652,8 +641,8 @@
} }
.btn-submit-wrapper { .btn-submit-wrapper {
margin-top: 45px; margin-top: 44px;
margin-bottom: 10px; margin-bottom: 20px;
button.submit { button.submit {
background: $color-blue2; background: $color-blue2;
@ -669,6 +658,7 @@
width: 100%; width: 100%;
height: 42px; height: 42px;
cursor: pointer; cursor: pointer;
margin: 0;
@include mq(xl, min) { @include mq(xl, min) {
height: 61px; height: 61px;
@ -685,6 +675,7 @@
.box-info { .box-info {
position: relative; position: relative;
margin-top: 25px; margin-top: 25px;
margin-bottom: 12px;
span { span {
font-family: 'Open Sans'; font-family: 'Open Sans';
@ -728,16 +719,21 @@
} }
#payment-data.pull-right {}
#payment-data, #payment-data,
#shipping-data { #shipping-data {
margin: 0;
@include mq(md, max) { @include mq(md, max) {
width: 100% !important; width: 100%;
float: initial; float: initial;
margin-left: 0; margin-left: 0;
} }
@include mq(sm, max) { @include mq(sm, max) {
width: 91.4% !important; width: 91.5%;
} }
div.step { div.step {
@ -906,7 +902,7 @@
border-radius: 8px; border-radius: 8px;
@include mq(md, max) { @include mq(md, max) {
min-width: 98.8%; min-width: 95.5%;
} }
@include mq(xl, min) { @include mq(xl, min) {
@ -1127,15 +1123,32 @@
margin-bottom: 3px; margin-bottom: 3px;
} }
.ship-number {
input { input {
@include mq(sm, max) {
max-width: 97%;
}
}
}
input,
select {
width: 94.2%; width: 94.2%;
min-width: 94.2%; min-width: 94.2%;
height: 35px; height: 33px;
padding: 0;
padding-left: 7px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
@include mq(md, max) { @include mq(md, max) {
min-width: 98.8%; width: 99%;
min-width: 95.5%;
} }
@include mq(xl, min) { @include mq(xl, min) {
@ -1148,6 +1161,13 @@
font-size: 0; font-size: 0;
} }
} }
select {
@include mq(md, max) {
width: 100%;
min-width: 95.5%;
}
}
} }
} }
@ -1254,10 +1274,6 @@
} }
} }
.line1-delimiter {
display: none;
}
} }
} }
@ -1293,420 +1309,6 @@
} }
} }
.mini-cart {
border: 1px solid $color-gray5;
border-radius: 8px;
height: 100%;
max-height: 496px;
margin-left: 16px;
@include mq(md, max) {
width: 100% !important;
margin-bottom: 117px;
}
@include mq(sm, max) {
width: 91.4% !important;
}
.cart-fixed-transition {
transition: initial;
height: auto !important;
}
.cart-fixed {
position: relative;
top: 0;
width: 100%;
height: 100% !important;
.cart-totalizers {
margin: 0;
}
h2 {
background: transparent;
font-family: 'Tenor Sans';
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black-400;
border: 0;
padding: 24px 0 34px 17px;
text-align: left;
@include mq(xl, min) {
font-size: 32px;
line-height: 37px;
}
}
.cart {
padding: 0;
@include mq(xl, min) {
max-height: 242px;
}
.cart-items {
overflow-x: hidden;
.quantity,
.shipping-date {
display: none;
}
.item {
margin: 0;
margin-bottom: 19px;
padding: 0 17px;
border: 0;
width: 90%;
@include mq(md, max) {
width: 96.8%;
}
@include mq(sm, max) {
width: 92.8%;
}
img {
width: 60px;
height: 60px;
@include mq(xl, min) {
width: 116px;
height: 116px;
}
}
.product-name {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-black;
width: 115px;
height: 60px;
margin-left: 7px;
text-overflow: initial;
white-space: initial;
display: flex;
align-items: center;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
width: 215px;
height: 116px;
}
}
.price {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
color: $color-black-400;
margin: 0;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
}
}
}
.link {
margin: 0;
margin-right: 17px;
margin-bottom: 10px;
small a {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
text-decoration-line: underline;
color: $color-black;
cursor: pointer;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
}
.summary-template-holder {
margin: 0;
padding: 0;
border: 0;
background: transparent;
tbody tr {
td {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
padding: 25px 17px;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
}
tr {
border-top: 1px solid $color-gray10;
td {
font-family: 'Open Sans';
width: 68%;
@include mq(md, max) {
width: 81%;
}
}
}
tfoot tr td {
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: $color-black-400;
padding: 30px 17px 22px;
@include mq(xl, min) {
font-size: 36px;
line-height: 49px;
}
}
.info {
text-align: left;
}
.monetary {
text-align: right;
}
}
.payment-submit-wrap {
#payment-data-submit {
position: absolute;
top: 20px;
border-radius: 8px;
height: 42px;
background: $color-green1;
border-radius: 8px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
margin: 0;
cursor: pointer;
@include mq(xl, min) {
height: 61px;
font-size: 28px;
line-height: 38px;
}
i {
display: none;
}
}
}
}
}
#payment-data {
@include mq(md, max) {
margin-bottom: 17px;
}
.step {
margin-left: 16px;
}
.link-gift-card,
.pg-transferencia-bancaria,
#payment-group-creditControlPaymentGroup,
#payment-group-promissoryPaymentGroup,
.pg-money,
#payment-group-creditDirectSalePaymentGroup,
#payment-group-instantPaymentPaymentGroup,
#payment-group-PSEPaymentGroup,
#payment-group-customPrivate_502PaymentGroup,
#payment-group-custom201PaymentGroupPaymentGroup,
#payment-group-MercadoPagoPaymentGroup,
#payment-group-SPEIPaymentGroup {
display: none !important;
}
.notification {
display: block !important;
@include mq(md, max) {
margin-bottom: 0;
}
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
margin: 0;
margin-top: 12px;
margin-bottom: 16px;
letter-spacing: -0.01em;
color: $color-gray2;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
div.store-country-BRA.active {
width: 94.6% !important;
margin-bottom: 102px;
@include mq(md, max) {
width: 96.4% !important;
float: initial;
margin-left: 0;
margin-bottom: 0;
}
@include mq(reset3, max) {
width: 94.4% !important;
}
@include mq(sm, max) {
width: 92.4% !important;
}
.accordion-toggle {
line-height: 24px;
letter-spacing: -0.01em;
@include mq(xl, min) {
font-size: 32px;
line-height: 37px;
}
}
@include mq(reset4, max) {
width: 87% !important;
}
}
.payment-group {
margin: 0;
width: 38.1%;
@include mq(md, max) {
width: 100%;
}
&-list-btn {
margin: 0;
margin-right: 40px;
width: 83.9%;
@include mq(md, max) {
width: 100%;
margin: 0;
}
}
&-item {
margin: 0;
background: $color-gray3;
mix-blend-mode: normal;
opacity: 0.3;
border: 1px solid $color-black;
border-radius: 6px;
width: 99%;
height: 50px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
cursor: pointer;
@include mq(md, max) {
width: 99%;
}
&:hover,
&:active {
background: rgba(220, 221, 227, 0.3);
border: 1px solid #F15A31;
opacity: 1;
}
}
&-item-text {
background: initial;
padding: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
text-align: center;
opacity: 1;
letter-spacing: -0.01em;
color: #58595B;
@include mq(xl, min) {
font-size: 28px;
line-height: 24px;
}
&:hover,
&:active {
color: #F15A31;
text-decoration: none;
}
}
}
}
.help { .help {
color: $color-red color: $color-red
} }
@ -1721,23 +1323,3 @@
} }
} }
} }
.steps-view {
width: 56%;
border-radius: 5px;
@include mq(md, max) {
width: 97.1%;
input {
width: 100%;
}
}
}
p.PaymentCardHolderDocument {
display: none;
}

452
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -1,11 +1,455 @@
body .container-main.container-order-form .orderform-template.active { body .container-main.container-order-form .orderform-template.active {
.mini-cart { .mini-cart {
width: 32.3242%; width: 32.3242%;
margin-left: unset; margin: 0;
margin-right: 0;
float: right; float: right;
border: 1px solid $color-gray5;
border-radius: 8px;
height: 100%;
max-height: 496px;
@include mq(md, max) {
width: 100%;
margin-bottom: 117px;
} }
.orderform-template-holder {
width: 66.1132%; @include mq(sm, max) {
width: 91.4%;
}
.cart-fixed-transition {
transition: initial;
height: auto !important;
}
.cart-fixed {
position: relative;
top: 0;
width: 100%;
height: 100% !important;
.cart-totalizers {
margin: 0;
}
h2 {
background: transparent;
font-family: 'Tenor Sans';
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black-400;
border: 0;
padding: 24px 0 34px 17px;
text-align: left;
@include mq(xl, min) {
font-size: 32px;
line-height: 37px;
} }
} }
.cart {
padding: 0;
@include mq(xl, min) {
max-height: 242px;
}
.cart-items {
overflow-x: hidden;
.quantity,
.shipping-date {
display: none;
}
.item {
margin: 0;
margin-bottom: 19px;
padding: 0 17px;
border: 0;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
@include mq(md, max) {
width: 96.8%;
}
@include mq(sm, max) {
width: 90%;
}
img {
width: 60px;
height: 60px;
@include mq(xl, min) {
width: 116px;
height: 116px;
}
}
.product-name {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-black;
width: 44%;
height: 60px;
text-overflow: initial;
white-space: initial;
display: flex;
align-items: center;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
width: 215px;
height: 116px;
}
}
.description {
margin: 0;
width: 30%;
}
.price {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
color: $color-black-400;
margin: 0;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
}
}
}
.link {
margin: 0;
margin-right: 17px;
margin-bottom: 10px;
small a {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
text-decoration-line: underline;
color: $color-black;
cursor: pointer;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
}
.summary-template-holder {
margin: 0;
padding: 0;
border: 0;
background: transparent;
tbody tr {
td {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
padding: 25px 17px;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
}
tr {
border-top: 1px solid $color-gray10;
td {
font-family: 'Open Sans';
width: 68%;
@include mq(md, max) {
width: 81%;
}
}
}
tfoot tr td {
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: $color-black-400;
padding: 30px 17px 22px;
@include mq(xl, min) {
font-size: 36px;
line-height: 49px;
}
}
.info {
text-align: left;
}
.monetary {
text-align: right;
}
}
.payment-submit-wrap {
#payment-data-submit {
position: absolute;
top: 20px;
border-radius: 8px;
height: 42px;
background: $color-green1;
border-radius: 8px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
margin: 0;
cursor: pointer;
@include mq(xl, min) {
height: 61px;
font-size: 28px;
line-height: 38px;
}
i {
display: none;
}
}
}
}
}
#payment-data {
@include mq(md, max) {
margin-bottom: 17px;
}
.link-gift-card,
.pg-transferencia-bancaria,
#payment-group-creditControlPaymentGroup,
#payment-group-promissoryPaymentGroup,
.pg-money,
#payment-group-creditDirectSalePaymentGroup,
#payment-group-instantPaymentPaymentGroup,
#payment-group-PSEPaymentGroup,
#payment-group-customPrivate_502PaymentGroup,
#payment-group-custom201PaymentGroupPaymentGroup,
#payment-group-MercadoPagoPaymentGroup,
#payment-group-SPEIPaymentGroup {
display: none !important;
}
.notification {
display: block !important;
@include mq(md, max) {
margin-bottom: 0;
}
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
margin: 0;
margin-top: 12px;
margin-bottom: 16px;
letter-spacing: -0.01em;
color: $color-gray2;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
div.store-country-BRA.active {
width: 94.6% !important;
margin: 0;
margin-bottom: 102px;
@include mq(md, max) {
width: 96.4% !important;
float: initial;
margin-left: 0;
margin-bottom: 0;
}
@include mq(reset3, max) {
width: 94.4% !important;
}
@include mq(sm, max) {
width: 92.4% !important;
}
.accordion-toggle {
line-height: 24px;
letter-spacing: -0.01em;
@include mq(xl, min) {
font-size: 32px;
line-height: 37px;
}
}
@include mq(reset4, max) {
width: 87% !important;
}
.notification {
margin-bottom: 16px;
}
}
.payment-group {
margin: 0;
width: 38.1%;
@include mq(md, max) {
width: 100%;
}
&-list-btn {
margin: 0;
margin-right: 40px;
width: 83.9%;
@include mq(md, max) {
width: 100%;
margin: 0;
}
}
.active {
background: rgba($color-gray3, 0.3);
border: 1px solid $color-orange;
.payment-group-item-text {
color: $color-orange;
text-decoration: none;
}
}
&-item {
margin: 0;
background-color: rgba($color-gray3, 0.3);
mix-blend-mode: normal;
border: 1px solid rgba($color-black, 0.3);
border-radius: 6px;
width: 99%;
height: 50px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
cursor: pointer;
@include mq(md, max) {
width: 99%;
}
&:hover,
&:active {
background: rgba($color-gray3, 0.3);
border: 1px solid $color-orange;
}
.payment-group-item-text {
background: initial;
padding: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
text-align: center;
letter-spacing: -0.01em;
color: $color-gray13;
@include mq(xl, min) {
font-size: 28px;
line-height: 24px;
}
&:hover,
&:active {
color: $color-orange;
text-decoration: none;
}
}
}
}
}
.steps-view {
width: 56%;
border-radius: 5px;
padding: 0;
@include mq(md, max) {
width: 97.1%;
input {
width: 100%;
}
}
}
p.PaymentCardHolderDocument {
display: none;
}
}

3
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -22,6 +22,7 @@ $color-gray9: #EDEDED;
$color-gray10: #E0E0E0; $color-gray10: #E0E0E0;
$color-gray11: #808080; $color-gray11: #808080;
$calor-gray12: #828282; $calor-gray12: #828282;
$color-gray13: #58595B;
@ -30,12 +31,14 @@ $color-blue2: #00C8FF;
$color-green: #4caf50; $color-green: #4caf50;
$color-green1: #298541; $color-green1: #298541;
$color-red: #FF0000; $color-red: #FF0000;
$color-orange: #F15A31;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xss: 295px, xss: 295px,
xs: 320px, xs: 320px,
xs1: 345px, xs1: 345px,
xs2: 356px,
sm: 601px, sm: 601px,
reset4: 421px, reset4: 421px,
sm2: 456px, sm2: 456px,