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

Compare commits

base: andreamatsunaga:development
Branches Tags
andreamatsunaga:main
andreamatsunaga:feature/cart
andreamatsunaga:development
andreamatsunaga:feature/header
andreamatsunaga:feature/responsiveness
andreamatsunaga:feature/order-form
andreamatsunaga:feature/footer
..
compare: andreamatsunaga:main
Branches Tags
andreamatsunaga:feature/cart
andreamatsunaga:development
andreamatsunaga:feature/header
andreamatsunaga:main
andreamatsunaga:feature/responsiveness
andreamatsunaga:feature/order-form
andreamatsunaga:feature/footer

2 Commits
developmen ... main

Author SHA1 Message Date
Andrea Matsunaga
b6fb8fc094 Merge pull request 'development' (#2) from development into main 
Reviewed-on: #2
 2022-12-19 04:54:38 +00:00
Andrea Matsunaga
e6b5ad810e Merge pull request 'development' (#1) from development into main 
Reviewed-on: #1
 2022-12-19 04:49:08 +00:00
4 changed files with 66 additions and 101 deletions
Show Stats Expand all files Collapse all files

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

@ -7,41 +7,38 @@ export default class Header {
}
async init() {
console.log("entrou no init do header")
await this.selectors();
await this.progressBarStructure();
await this.progressBarMove();
}
async selectors() {
// this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
console.log("progressBar await element")
}
async progressBarStructure() {
if (this.progressBar && window.innerWidth > 1024) {
console.log("entrou no if do progressBarStructure")
this.progressBar.innerHTML = `
<ul class="progress-bar__container">
<div class="progress-bar__stage-wrapper">
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Meu carrinho</p>
<div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
</li>
</div>
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Meu carrinho</p>
<div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
</li>
<div class="progress-bar__stage-wrapper">
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Dados Pessoais</p>
<div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
</li>
</div>
<div class="progress-bar__stage-wrapper">
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Pagamento</p>
<div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
</li>
</div>
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Dados Pessoais</p>
<div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
</li>
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Pagamento</p>
<div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
</li>
</ul>
`
}
@ -55,6 +52,8 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) {
console.log("entrou no if do progressBarMove")
const progressBarStages = document.querySelectorAll(".progress-bar__stage");
progressBarStages.forEach((stage) => {

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

@ -16,7 +16,8 @@ footer .footerCheckout__wrapper {
width: 100%;
// margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira {
footer .footerCheckout__prateleira,
header {
width: 79.53125%;
margin: 0 auto;
}

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

@ -1,15 +1,17 @@
/* _header.scss */
.headerCheckout {
// position: relative;
margin: 0;
padding: 29px 131px;
padding: 30px 131px;
width: 100%;
border-bottom: 1px solid $black-500;
@include mq(xl, min) {
padding: 29px 256px;
padding: 30px 256px;
}
@include mq(lg, max) {
padding: 16px;
padding: 16px 16px;
}
.container {
@ -17,14 +19,15 @@
}
&__wrapper {
width: 100%;
display: grid;
grid-template-columns: 1fr 43.22% 1fr;
//repeat(3, 1fr);
// display: flex;
// justify-content: space-between;
align-items: center;
justify-content: center;
@include mq(xl, min) {
grid-template-columns: 1fr 54.22% 1fr;
grid-template-columns: 1fr 54.27% 1fr;
}
@include mq(lg, max) {
@ -35,101 +38,41 @@
&__logo {
img {
width: 155.58px;
height: 37.14px;
width: auto;
@include mq(xl, min) {
width: 382.07px;
height: 91.2px;
}
@include mq(lg, max) {
height: 33px;
}
@include mq(xs, max) {
width: 114px;
height: auto;
height: 32.12px;
}
}
}
.progress-bar {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// width: 43.22%; //440px;
&__container {
// position:relative;
margin: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
// display: flex;
// align-items: center;
// justify-content: space-between;
list-style: none;
}
&__stage-wrapper {
position: relative;
display: flex;
&::before,
&::after {
content: "";
position: absolute;
bottom: 6.5px;
height: 1px;
background: $black-500;
@include mq(xl, min) {
bottom: 12.5px;
}
}
&:nth-child(1) {
justify-content: flex-start;
&::after{
width: calc(100% - 45.23px);//68.81%;
right: 0;
@include mq(xl, min) {
width: calc(100% - 89.965px);//77.63%;
}
}
};
&:nth-child(2) {
justify-content: center;
&::before,
&::after {
width: calc(50% - 7px);
@include mq(xl, min) {
width: calc(50% - 13px);
}
}
&::before {
left: 0;
}
&::after{
right: 0;
}
};
&:nth-child(3) {
justify-content: flex-end;
&::before{
width: calc(100% - 38.315px);//73.54%;
left: 0;
@include mq(xl, min) {
width: calc(100% - 76.125px); //81.05%;
}
}
};
};
&__stage {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
@ -146,7 +89,6 @@
color: $black-500;
@include mq(xl, min) {
margin-bottom: 15px;
line-height: 28px;
font-size: 24px;
}
@ -167,6 +109,29 @@
height: 24px;
}
}
&::before,
&::after {
content: '';
position: absolute;
bottom: 6.5px;
width: calc(50% - 7px);
height: 1px;
background: $black-500;
}
&::before {
left: 0;
}
&::after{
left: calc(50% + 7px);
}
&:first-child::before,
&:last-child::after {
display: none;
}
}
}

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

@ -30,7 +30,7 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 375px,
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,