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 email desktop telas menores que 2500px

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-12-14 16:03:20 -03:00
parent 7ad6680f27
commit 64cfe65180
6 changed files with 187 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
checkout/src/arquivos/js/checkout.js
View File

@ -4,10 +4,11 @@ import "slick-carousel";
import Header from "./components/Header"; import Header from "./components/Header";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
import Cart from "./components/Cart"; import Cart from "./components/Cart";
import Email from "./components/Email";
const m3Checkout = new Container({ const m3Checkout = new Container({
appName: "m3-checkout", appName: "m3-checkout",
components: [CheckoutUI, Header, Footer, Cart], components: [CheckoutUI, Header, Footer, Cart, Email],
}); });
m3Checkout.start(); m3Checkout.start();

29
checkout/src/arquivos/js/components/Email.js Normal file
View File

@ -0,0 +1,29 @@
// import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils";
export default class Email {
constructor() {
this.init();
this.events();
}
async init() {
await this.selectors();
this.addClassToCheckoutContainer();
}
events() {
window.addEventListener("hashchange", this.addClassToCheckoutContainer.bind(this));
}
async selectors() {
this.checkoutContainer = await waitElement(".checkout-container");
}
addClassToCheckoutContainer() {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/email")
this.checkoutContainer.classList.add("email-active");
else if (this.checkoutContainer.classList.contains("email-active"))
this.checkoutContainer.classList.remove("email-active");
}
}

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

@ -1,6 +1,7 @@
@import "./utils/all"; @import "./utils/all";
@import "./lib/slick"; @import "./lib/slick";
@import "./checkout/checkout.scss";
@import "./partials/header"; @import "./partials/header";
@import "./partials/footer"; @import "./partials/footer";
@import "./partials/menu"; @import "./partials/menu";
@import "./checkout/checkout.scss"; @import "./partials/autenticacao";

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

@ -1,8 +1,12 @@
.checkout-container { .checkout-container {
&.email-active {
margin-bottom: 56px;
}
.client-pre-email { .client-pre-email {
border-color: #8d8d8d; border-color: #8d8d8d;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; height: auto;
.link-cart { .link-cart {
a { a {
@ -76,7 +80,7 @@
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: $white-500; background-color: $white-500;
border: 1px solid #8d8d8d;
border-radius: 0; border-radius: 0;
h3 { h3 {
@ -113,7 +117,7 @@
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 0;
border: 1px solid #8d8d8d;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
@ -158,7 +162,7 @@
select, select,
input { input {
border-radius: 0; border-radius: 0;
border: 1px solid #8d8d8d;
box-shadow: none; box-shadow: none;
} }
@ -213,7 +217,6 @@
} }
.shp-lean { .shp-lean {
border: 1px solid #8d8d8d;
border-radius: 0; border-radius: 0;
label { label {

144
checkout/src/arquivos/sass/partials/_autenticacao.scss Normal file
View File

@ -0,0 +1,144 @@
.container-main {
.step {
border: none;
}
#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;
}
.checkout-container {
.row-fluid.orderform-template {
position: absolute;
.client-pre-email {
border: none;
.link-cart {
margin: 14px 130px 0 0;
small a {
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: $black-500;
}
}
.pre-email {
display: flex;
flex-direction: column;
align-items: center;
.client-pre-email-h {
margin: 65px 0 21px;
label {
margin: 0;
span {
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-transform: uppercase;
}
small {
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-transform: uppercase;
color: $black-500;
}
}
}
.client-email.input.text.required.span8.offset2 {
width: 562px;
margin-bottom: 24px;
margin-left: 0;
.input-block-level {
font-weight: 400;
font-size: 12px;
line-height: 16px;
padding: 15px 14px;
color: $black-500;
border: 1px solid $black-500;
border-radius: 5px 8px 8px 5px;
}
.btn.btn-success {
padding: 12px 14px;
background: $blue-500;
border-radius: 0px 8px 8px 0px;
&:hover {
background-color: $blue-600;
}
&:active {
background-color: $blue-500;
}
span {
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: $black-500;
}
}
.help.error {
margin-top: 3px;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $red-500;
}
}
}
.emailInfo {
width: 400px;
border: 1px solid $black-500;
border-radius: 5px;
padding: 16px 16px 26px;
h3 {
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $black-500;
}
.unstyled {
li {
.icon-ok::before {
color: $blue-500;
}
span {
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $black-500;
}
}
}
}
}
}
}
}

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

@ -19,6 +19,8 @@ $gray-600: #7d7d7d;
$blue-500: #00c8ff; $blue-500: #00c8ff;
$blue-600: #20b2db; $blue-600: #20b2db;
$red-500: #ff0000;
$white-500: #fff; $white-500: #fff;
/* Grid breakpoints */ /* Grid breakpoints */