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

feat: Cria tela de dados pessoais profile desktop telas menores que 2500px

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-12-15 15:06:12 -03:00
parent 64cfe65180
commit bbf520a5ec
5 changed files with 371 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,6 @@ export default class Cart {
handleMutationObserver(mutations) {
mutations.forEach((mutation) => {
console.log(mutation);
if (mutation.type === "attributes" && mutation.attributeName === "style") {
if (this.cart.style.display === "flex")
this.cartTitle.classList.remove("hide-cart-title");

32
checkout/src/arquivos/js/components/Email.js
View File

@ -9,15 +9,43 @@ export default class Email {
async init() {
await this.selectors();
this.addClassToCheckoutContainer();
this.addClasses();
}
events() {
window.addEventListener("hashchange", this.addClassToCheckoutContainer.bind(this));
window.addEventListener("hashchange", this.addClasses.bind(this));
}
async selectors() {
this.checkoutContainer = await waitElement(".checkout-container");
this.orderFormTitle = await waitElement("#orderform-title");
this.cartTemplate = await waitElement(".cart-template.mini-cart.span4");
this.accordionGroup = await waitElement(".step.accordion-group.client-profile-data.active");
}
addClasses() {
this.addBorderToTitle();
this.addClassToCheckoutContainer();
this.addDisplayNone();
}
addDisplayNone() {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/email") {
this.accordionGroup.classList.add("display-none");
this.cartTemplate.classList.add("display-none");
} else {
if (this.accordionGroup.classList.contains("display-none"))
this.accordionGroup.classList.remove("display-none");
if (this.cartTemplate.classList.contains("display-none"))
this.cartTemplate.classList.remove("display-none");
}
}
addBorderToTitle() {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/email")
this.orderFormTitle.classList.add("border");
else if (this.orderFormTitle.classList.contains("border"))
this.orderFormTitle.classList.remove("border");
}
addClassToCheckoutContainer() {

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

@ -185,20 +185,7 @@
}
button.submit {
border: none;
border-radius: 5px;
background: #292929;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
&:hover {
background: lighten(#292929, 5);
}
&:active {
background: darken(#292929, 5);
}
display: none;
}
/* Shipping configurations */

339
checkout/src/arquivos/sass/partials/_autenticacao.scss
View File

@ -1,24 +1,63 @@
.container-main {
.step {
.step,
.accordion-group {
padding: 0;
border: none;
}
.client-profile-data {
height: 392px;
&.email-active {
height: auto;
}
.step.active.display-none {
display: none;
}
}
.cart-template.mini-cart.span4 {
&.display-none {
display: none;
}
}
.orderform-template-holder {
margin-bottom: 14px;
}
#orderform-title {
width: 100%;
max-width: -webkit-fill-available;
margin: 0 130px;
padding: 17px 0;
border-bottom: 1px solid $black-500;
text-transform: uppercase;
color: $black-500;
font-weight: 700;
font-size: 24px;
line-height: 33px;
&.border {
border-bottom: 1px solid $black-500;
}
}
.checkout-container {
.row-fluid.orderform-template {
position: absolute;
display: flex;
padding: 0 121px;
.form-page.client-pre-email.anim-death.anim-current {
position: absolute;
width: 100%;
left: 0;
padding-bottom: 100px;
}
&.dados-pessoais {
padding: 0 128px;
}
.client-pre-email {
border: none;
@ -139,6 +178,300 @@
}
}
}
.step.accordion-group.client-profile-data.active {
border: 1px solid #f0f0f0;
padding: 24px 17px 44px;
border-radius: 8px;
margin-bottom: 0;
.accordion-heading {
span {
margin-bottom: 36px;
i {
display: none;
}
}
}
.accordion-body {
p {
&.client-email {
width: 100%;
margin-bottom: 16px;
}
&.client-document {
margin: 0;
width: 46%;
}
&.client-first-name,
&.client-last-name {
display: flex;
flex-direction: column;
margin: 0;
width: 46%;
}
&.client-last-name {
@include mq(1029, max) {
justify-content: center;
}
@include mq(1029, min) {
justify-content: flex-start;
}
}
label {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #7d7d7d;
}
input {
border: 1px solid #e0e0e0;
border-radius: 5px;
height: 15px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
padding: 13px 11px 12px;
width: 100%;
max-width: -webkit-fill-available;
}
}
.box-client-info-pf {
display: flex;
flex-wrap: wrap;
gap: 15px;
div {
width: 46%;
}
}
.box-client-info-pj {
display: none;
}
.newsletter {
margin-top: 12px;
margin-bottom: 44px;
}
.checkbox.newsletter-label {
input {
width: 12px;
border: 1px solid #828282;
border-radius: 3px;
}
span {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
}
.submit.btn-submit-wrapper {
margin: 0;
button {
display: block;
background: #00c8ff;
border-radius: 8px;
border: none;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
line-height: 19px;
padding: 12px 0 11px 0;
text-shadow: none;
width: 100%;
}
}
}
}
.span6.pull-right.shipping-data {
margin-left: 0;
border: 1px solid #f0f0f0;
border-radius: 8px;
margin-bottom: 17px;
padding: 24px 17px 28px;
.step.accordion-group.shipping-data {
margin: 0;
.accordion-toggle.collapsed {
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
i {
display: none;
}
.link-box-edit {
padding: 0;
width: 20px;
border-radius: 0;
position: static;
height: 20px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-size: contain;
}
}
}
}
.span6.pull-right.payment-data {
margin-left: 0;
border: 1px solid #f0f0f0;
border-radius: 8px;
margin-bottom: 17px;
padding: 24px 17px 28px;
.accordion-toggle.collapsed {
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
i {
display: none;
}
.payment-edit-link {
display: block !important;
a {
width: 20px;
padding: 0;
height: 20px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-size: contain;
border-radius: 0;
position: static;
i {
display: none;
}
}
}
}
}
.cart-template.mini-cart.span4 {
margin-left: 16px;
border: 1px solid #e5e5e5;
border-radius: 8px;
height: 427px;
.cart-fixed.cart-fixed-transition {
height: auto !important;
padding: 24px 0px 22px;
h2 {
font-weight: 400;
display: block;
font-size: 16px;
line-height: 19px;
padding: 0;
margin-bottom: 34px;
margin-left: 17px;
text-align: left;
}
.cart {
border: 0;
padding: 0;
.cart-items.unstyled.clearfix {
padding: 0 17px;
.hproduct {
display: flex;
align-items: center;
.url {
margin-right: 7px;
}
.product-name {
font-weight: 400;
font-size: 12px;
line-height: 14px;
}
.quantity {
display: none;
}
.description {
margin: 0;
min-width: max-content;
.shipping-date {
display: none;
}
}
}
}
}
.link-cart {
margin: 19px 17px 0;
margin-bottom: 10px;
a {
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration: none;
}
}
.summary-template-holder {
padding-top: 19px;
.totalizers-list {
tr {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
.info {
float: inherit;
padding: 25px 0 25px 17px;
}
.monetary {
padding: 25px 17px 25px 0;
float: right;
}
}
}
tfoot {
.info {
float: inherit;
padding: 30px 0 0 17px;
}
.monetary {
float: right;
padding: 30px 17px 0 0;
}
}
}
}
}
}
}
}

4
checkout/src/arquivos/sass/partials/_menu.scss
View File

@ -6,6 +6,10 @@
justify-content: center;
flex-direction: column;
.inactive {
display: none !important;
}
.empty-cart-content {
padding: 0;
position: absolute;