feat: adiciona o header da pagina desktop

This commit is contained in:
Thiago Bronisio 2022-12-12 18:49:39 -03:00
parent 2dab582c69
commit 5e81395e7e
8 changed files with 327 additions and 160 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 B

View File

@ -4,18 +4,38 @@ import { waitElement } from "m3-utils";
export default class Header { export default class Header {
constructor() { constructor() {
this.init(); this.init();
this.progressBarHTML();
} }
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); this.progressBarHTML();
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { this.header = await waitElement(".headerCheckout");
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar this.progressBar = await waitElement("#progressBar")
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
} }
progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<div class="progress-bar__container-text">
<p class="text-carrinho">Meu carrinho</p>
<p class="text-dados">Dados Pessoais</p>
<p class="text-pagamento">Pagamento</p>
</div>
<ul class="progressbar-ul">
<li class="active"></li>
<li></li>
<li></li>
</ul>
`
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}
}
} }

View File

@ -3,3 +3,120 @@
@import "./partials/header"; @import "./partials/header";
@import "./partials/footer"; @import "./partials/footer";
@import "./checkout/checkout.scss"; @import "./checkout/checkout.scss";
html {
height: 100%;
min-height: 100%;
}
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
}
body {
display: flex;
flex-direction: column;
min-height: 100% !important;
padding-top: 0 !important;
@include mq(md, max) {
padding-left: 0;
}
&.body-cart {
font-family: $font-family;
}
&.body-cart,
&.body-order-form {
@include mq(xl, min) {
padding-top: 0;
}
@include mq(lg, max) {
padding-bottom: 0 !important;
}
@include mq(md, max) {
padding-right: 0;
padding-left: 0;
}
}
.container-order-form,
.container-cart {
width: 80%;
}
}
.btn-success {
background: $color-black;
text-shadow: none;
&:hover {
background: lighten($color-black, 15%);
}
}
.emailInfo h3 {
color: $color-black !important;
}
#cart-title,
#orderform-title {
color: $color-gray2;
font-family: $font-family;
font-weight: 500;
font-size: 36px;
line-height: 42px;
margin: 40px 0 30px;
letter-spacing: 0.1em;
text-transform: uppercase;
@include mq(md, max) {
margin-left: 30px;
}
}
.dropdown {
&__content {
&--closed {
display: none;
}
}
&__title {
cursor: pointer;
user-select: none;
&::before,
&::after {
content: "";
background: $color-gray2;
display: block;
float: right;
height: 2px;
width: 8px;
margin-top: 8px;
}
&::before {
transform: rotate(0deg);
transition: 0.3s;
}
&::after {
transform: rotate(90deg);
transition: 0.3s;
margin-right: -8px;
}
&.closed::before {
transform: rotate(180deg);
}
&.closed::after {
transform: rotate(0);
}
}
}

View File

@ -2,125 +2,3 @@
@import "./checkout-carrinho"; @import "./checkout-carrinho";
@import "./checkout-pagamento"; @import "./checkout-pagamento";
@import "./checkout-autenticacao"; @import "./checkout-autenticacao";
html {
height: 100%;
min-height: 100%;
}
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {
width: 79.53125%;
margin: 0 auto;
}
body {
display: flex;
flex-direction: column;
min-height: 100% !important;
padding-top: 0 !important;
@include mq(md, max) {
padding-left: 0;
}
&.body-cart {
font-family: $font-family;
}
&.body-cart,
&.body-order-form {
@include mq(xl, min) {
padding-top: 0;
}
@include mq(lg, max) {
padding-bottom: 0 !important;
}
@include mq(md, max) {
padding-right: 0;
padding-left: 0;
}
}
.container-order-form,
.container-cart {
width: 80%;
}
}
.btn-success {
background: $color-black;
text-shadow: none;
&:hover {
background: lighten($color-black, 15%);
}
}
.emailInfo h3 {
color: $color-black !important;
}
#cart-title,
#orderform-title {
color: $color-gray2;
font-family: $font-family;
font-weight: 500;
font-size: 36px;
line-height: 42px;
margin: 40px 0 30px;
letter-spacing: 0.1em;
text-transform: uppercase;
@include mq(md, max) {
margin-left: 30px;
}
}
.dropdown {
&__content {
&--closed {
display: none;
}
}
&__title {
cursor: pointer;
user-select: none;
&::before,
&::after {
content: "";
background: $color-gray2;
display: block;
float: right;
height: 2px;
width: 8px;
margin-top: 8px;
}
&::before {
transform: rotate(0deg);
transition: 0.3s;
}
&::after {
transform: rotate(90deg);
transition: 0.3s;
margin-right: -8px;
}
&.closed::before {
transform: rotate(180deg);
}
&.closed::after {
transform: rotate(0);
}
}
}

View File

@ -1,36 +1,161 @@
/* _header.scss */
.headerCheckout { .headerCheckout {
border-bottom: 1px solid $black-padrao;
padding: 0 130px;
.container { .container {
width: auto !important; margin: 0;
width: 100%;
} }
&__wrapper { &__wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
align-items: center; align-items: center;
display: flex; }
justify-content: space-between;
.progress-bar {
width: 100%;
position: relative;
&__container-text {
display: flex;
.text-carrinho {
width: 33%;
margin: 0 0 15px 22px;
display: flex;
justify-content: center;
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
line-height: 14px;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
.text-dados {
margin: 0 auto;
display: flex;
justify-content: center;
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
line-height: 14px;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
.text-pagamento {
width: 33%;
margin-bottom: 15px;
display: flex;
justify-content: center;
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
line-height: 14px;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
}
.progressbar-ul {
li {
list-style-type: none;
float: left;
width: 33%;
position: relative;
text-align: center;
}
li::before {
content: "";
width: 12px;
height: 12px;
border: 1px solid $black-padrao;
display: block;
text-align: center;
margin: 0 auto auto;
border-radius: 50%;
background-color: white;
@media screen and (min-width: 2500px) {
width: 24px;
height: 24px;
}
}
li::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: $black-padrao;
top: 6px;
left: -50%;
z-index: -1;
@media screen and (min-width: 2500px) {
top: 12px;
}
}
li:first-child::after {
content: none;
}
li.active::before {
background-color: $black-padrao;
}
}
} }
&__logo { &__logo {
display: flex;
align-items: center;
padding: 29px 0;
width: 60.8%;
@media screen and (min-width: 2500px) {
width: 68.2%;
}
img { img {
height: 52px; width: 100%;
width: auto; height: 37.15px;
@media screen and (min-width: 2500px) {
width: 100%;
height: 91px;
}
} }
} }
&__safeBuy { &__safeBuy {
span { display: flex;
align-items: center; justify-content: end;
display: flex; img {
text-transform: uppercase; width: 12px;
font-family: $font-family; height: 15px;
font-style: normal; margin-right: 8px;
font-weight: normal; @media screen and (min-width: 2500px) {
font-size: 12px; width: 29.5px;
line-height: 14px; height: 41.45px;
color: $color-gray; }
} }
i { span {
margin-right: 8px; text-transform: uppercase;
font-family: $font-family;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-black;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 33px;
align-self: baseline;
}
} }
} }
} }

View File

@ -2,13 +2,16 @@
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
$font-family: "Open Sans", sans-serif; $font-family: "Open Sans", sans-serif;
$font-family-secundary:"Tenor Sans", sans-serif; $font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */ /* Colors */
$black-padrao: #000000;
$color-black: #292929; $color-black: #292929;
$color-white: #fff; $color-white: #fff;
$color-gray-100: #c4c4c4;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray2: #7d7d7d; $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
@ -21,18 +24,18 @@ $color-green: #4caf50;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 400,
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,
xl: 1200px xl: 1200px,
) !default; ) !default;
$z-index: ( $z-index: (
level1: 5, level1: 5,
level2: 10, level2: 10,
level3: 15, level3: 15,
level4: 20, level4: 20,
level5: 25 level5: 25,
) !default; ) !default;

25
package-lock.json generated
View File

@ -23,7 +23,8 @@
"concurrently": "^6.0.0", "concurrently": "^6.0.0",
"husky": "^5.2.0", "husky": "^5.2.0",
"lerna": "^4.0.0", "lerna": "^4.0.0",
"lint-staged": "^10.5.4" "lint-staged": "^10.5.4",
"yarn": "^1.22.19"
} }
}, },
"checkout": { "checkout": {
@ -45,6 +46,7 @@
"jquery": "^3.6.0", "jquery": "^3.6.0",
"m3-utils": "^0.1.0", "m3-utils": "^0.1.0",
"sass": "^1.38.1", "sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4" "terser-webpack-plugin": "^5.1.4"
}, },
"devDependencies": { "devDependencies": {
@ -17668,6 +17670,20 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/yarn": {
"version": "1.22.19",
"resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz",
"integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==",
"dev": true,
"hasInstallScript": true,
"bin": {
"yarn": "bin/yarn.js",
"yarnpkg": "bin/yarn.js"
},
"engines": {
"node": ">=4.0.0"
}
},
"node_modules/yocto-queue": { "node_modules/yocto-queue": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@ -19345,6 +19361,7 @@
"m3-utils": "^0.1.0", "m3-utils": "^0.1.0",
"prettier": "^2.3.2", "prettier": "^2.3.2",
"sass": "^1.38.1", "sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4", "terser-webpack-plugin": "^5.1.4",
"webpack": "^5.51.1", "webpack": "^5.51.1",
"webpack-merge": "^5.8.0" "webpack-merge": "^5.8.0"
@ -30672,6 +30689,12 @@
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
"integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==" "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA=="
}, },
"yarn": {
"version": "1.22.19",
"resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz",
"integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==",
"dev": true
},
"yocto-queue": { "yocto-queue": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

View File

@ -30,7 +30,8 @@
"concurrently": "^6.0.0", "concurrently": "^6.0.0",
"husky": "^5.2.0", "husky": "^5.2.0",
"lerna": "^4.0.0", "lerna": "^4.0.0",
"lint-staged": "^10.5.4" "lint-staged": "^10.5.4",
"yarn": "^1.22.19"
}, },
"dependencies": { "dependencies": {
"@commitlint/cli": "^12.0.1", "@commitlint/cli": "^12.0.1",