ManuelaLuanaSchumackerTavares/m3-academy-template-checkout-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(checkout): Cria barra de progresso desktop e 4k #1

Merged
ManuelaLuanaSchumackerTavares merged 1 commits from feature/header into develop 2022-12-12 13:34:06 +00:00
Conversation 0 Commits 1 Files Changed 4 +192 -20
4 changed files with 192 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a95858376c - Show all commits

49
checkout/src/arquivos/js/components/Header.js
View File

@ -8,14 +8,51 @@ export default class Header {
async init() {
await this.selectors();
console.log(this.item);
this.progressBarContent();
}
async selectors() {
this.item = await waitElement("#my-element", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
}
progressBarContent() {
// console.log(this.progressBar.innerHTML);
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul>
<li>
<div class="containerProgressBar">
<div>
<p class="progress-bar-first-text">Meu carrinho</p>
<p id="progress-bar-first-circle" class="progress-bar-first-circle"></p>
<p class="progress-bar-first-line"></p>
</div>
</div>
</li>
<li class="center-li">
<div class="containerProgressBar">
<div>
<p>Dados Pessoais</p>
<p id="progress-bar-second-circle" class="progress-bar-second-circle"></p>
</div>
</div>
</li>
<li>
<div class="containerProgressBar">
<div>
<p>Pagamento</p>
<p id="progress-bar-third-circle" class="progress-bar-third-circle"></p>
<p class="progress-bar-second-line"></p>
</div>
</div>
</li>
</ul>
`;
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}
}
}

2
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -13,7 +13,7 @@ footer .footerCheckout__wrapper {
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {
header .container {
width: 79.53125%;
margin: 0 auto;
}

134
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -7,16 +7,125 @@
align-items: center;
display: flex;
justify-content: space-between;
padding: 29px 131px;
border-bottom: 1px solid $color-black2;
@include mq(pg, max) {
padding: 16px;
}
@include mq(xxl, min) {
padding: 29px 256px;
}
}
#progressBar {
width: 439px;
@include mq(xxl, min) {
width: 1078.86px;
}
}
#progressBar ul {
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
}
#progressBar li .containerProgressBar {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
font-family: "Tenor Sans", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 14px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
}
#progressBar li.center-li {
width: auto;
}
.containerProgressBar .progress-bar-first-line,
.progress-bar-second-line {
width: 181px;
bottom: 5px;
border: 1px solid $color-black2;
position: absolute;
margin: 0;
@include mq(xxl, min) {
width: 444px;
bottom: 10px;
}
}
.progress-bar-first-line {
left: 60%;
// transform: translate(-50%);
}
.progress-bar-second-line {
right: 40%;
z-index: -1;
@include mq(xxl, min) {
right: 58%;
}
// transform: translate(-50%);
}
.containerProgressBar .progress-bar-first-circle,
.progress-bar-second-circle,
.progress-bar-third-circle {
margin: 0 auto;
width: 12px;
height: 12px;
margin-top: 9px;
border: 1px solid $color-black2;
border-radius: 50%;
background: $color-white;
@include mq(xxl, min) {
width: 24px;
height: 24px;
}
}
&__logo {
img {
height: 52px;
width: auto;
cursor: pointer;
@include mq(pg, max) {
height: 32.12px;
width: 155px;
}
@include mq(cstm, max) {
height: 33px;
width: 155px;
}
@include mq(xxl, min) {
height: 91.2px;
}
}
}
&__safeBuy {
display: flex;
span {
align-items: center;
display: flex;
@ -27,10 +136,33 @@
font-size: 12px;
line-height: 14px;
color: $color-gray;
@include mq(pg, max) {
line-height: 16px;
color: $color-black;
}
i {
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
color: $color-black;
}
}
img {
margin-right: 8px;
max-width: 12px;
height: 15px;
@include mq(pg, max) {
height: 13.33px;
}
@include mq(xxl, min) {
margin-right: 7.9px;
height: 41.46px;
max-width: 29.47px;
}
}
}
}

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

@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
/* Colors */
$color-black: #292929;
$color-black2: #000000;
$color-white: #fff;
@ -26,7 +27,9 @@ $grid-breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
pg: 1025px,
xl: 1200px,
xxl: 2500px,
) !default;
$z-index: (
@ -34,5 +37,5 @@ $z-index: (
level2: 10,
level3: 15,
level4: 20,
level5: 25
level5: 25,
) !default;