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

feat:finalizando projeto para entrega

Browse Source 
acabei não conseguindo fazer a responsividade para 4k na televisão porque fiquei preso no slick
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2022-12-26 23:57:55 -03:00
parent a1936066ff
commit a01fe114b7
6 changed files with 122 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
checkout/src/arquivos/js/components/Footer.js
View File

@ -184,6 +184,8 @@ export default class Footer {
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
variableWidth:false, variableWidth:false,
adaptiveHeight: false,
prevArrow: $(".Fakebutton-Prev"), prevArrow: $(".Fakebutton-Prev"),
nextArrow: $(".Fakebutton-Next"), nextArrow: $(".Fakebutton-Next"),
responsive:[{ responsive:[{
@ -193,6 +195,7 @@ export default class Footer {
slidesToShow: 2, slidesToShow: 2,
slidesToScroll: 1, slidesToScroll: 1,
variableWidth:false, variableWidth:false,
adaptiveHeight: false,
prevArrow: $(".Fakebutton-Prev"), prevArrow: $(".Fakebutton-Prev"),
nextArrow: $(".Fakebutton-Next"), nextArrow: $(".Fakebutton-Next"),
} }
@ -204,6 +207,7 @@ export default class Footer {
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 1, slidesToScroll: 1,
variableWidth:false, variableWidth:false,
adaptiveHeight: false,
prevArrow: $(".Fakebutton-Prev"), prevArrow: $(".Fakebutton-Prev"),
nextArrow: $(".Fakebutton-Next"), nextArrow: $(".Fakebutton-Next"),
} }

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

@ -69,7 +69,7 @@ export default class Header {
step2.classList.remove('completed'); step2.classList.remove('completed');
step3.classList.remove('completed'); step3.classList.remove('completed');
li.children[1].classList.add('completed'); li.children[1].classList.add('completed');
target2.classList.toggle('hide') target2.classList.remove('hide')
Footer.classList.add('footerCheckout__ComSlick') Footer.classList.add('footerCheckout__ComSlick')
} }
} }

49
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -18,12 +18,10 @@
border-top-right-radius: 0 !important; border-top-right-radius: 0 !important;
} }
a { a {
position: relative; position: static;
left: -15px;
} }
small{ small{
left: -42px; position: inherit;
position: relative;
} }
} }
.totalizers-list{ .totalizers-list{
@ -58,16 +56,17 @@
} }
} }
} }
} }
.cart-template { .cart-totalizers{
@include mq(xll, max) {
width: 100% !important;
}
}
.cart-template {
font-family: $font-family; font-family: $font-family;
.summary-template-holder{ .summary-template-holder{
div{ div{
border: 0 !important; border: 0 !important;
@include mq(xll, max) {
width: 100% !important;
}
} }
} }
@include mq(md, max) { @include mq(md, max) {
@ -144,7 +143,9 @@
margin-top: 8px; margin-top: 8px;
padding-top: 8px; padding-top: 8px;
} }
.shipping-date{
display: none;
}
.shipping-date, .shipping-date,
.price { .price {
color: #7d7d7d; color: #7d7d7d;
@ -169,7 +170,7 @@
background: $color-white; background: $color-white;
width: 330px; width: 330px;
@include mq(IVK, min) { @include mq(IVK, min) {
width: 90.22%; width: 94.89%;
} }
} }
@ -245,6 +246,10 @@
height: 60px; height: 60px;
max-width: 100%; max-width: 100%;
width: auto; width: auto;
@include mq(IVK, min) {
height: 146px;
width: auto;
}
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; height: 72px;
@ -268,7 +273,6 @@
line-height: 14px; line-height: 14px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
font-family: $font-family-secundary; font-family: $font-family-secundary;
&:hover { &:hover {
color: darken($color-blue, 10); color: darken($color-blue, 10);
text-decoration: none; text-decoration: none;
@ -857,10 +861,18 @@
&.info { &.info {
text-align: left; text-align: left;
@include mq(IVK, min) {
font-size: 28px;
line-height: 38px
}
} }
&.monetary { &.monetary {
text-align: right; text-align: right;
@include mq(IVK, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
} }
@ -874,6 +886,19 @@
line-height: 21px; line-height: 21px;
color: $color-black; color: $color-black;
} }
td.monetary {
@include mq(IVK, min) {
font-size: 28px;
line-height: 38px;
text-align: right;
}
}
td.info{
@include mq(IVK, min) {
font-size: 36px;
line-height: 49px
}
}
} }
} }
.flex{ .flex{

34
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -20,15 +20,18 @@ body .container-main.container-order-form .orderform-template.active {
height: 100%; height: 100%;
} }
} }
.body-order-form{ .body-order-form{
.totalizers-list{ .totalizers-list{
tr{ tr{
border-bottom: 1px solid black; border-bottom: 1px solid black;
border-top: 1px solid black; border-top: 1px solid black;
margin-right: 17px; margin-left: 17px;
left: 20px; left: 20px;
position: relative; position: relative;
text-align-last: start; text-align-last: start;
@include mq(IVK, min) {
left: -6px;
}
.info{ .info{
width: 100% !important; width: 100% !important;
} }
@ -45,6 +48,9 @@ body .container-main.container-order-form .orderform-template.active {
position: relative; position: relative;
text-align-last: start; text-align-last: start;
text-indent: -17px; text-indent: -17px;
@include mq(IVK, min) {
position: inherit;
}
} }
} }
@ -67,6 +73,10 @@ body .container-main.container-order-form .orderform-template.active {
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
margin: 24px 0px 34px 0; margin: 24px 0px 34px 0;
@include mq(IVK, min) {
font-size: 32px !important;
line-height: 37px;
}
} }
} }
.hproduct{ .hproduct{
@ -79,6 +89,12 @@ body .container-main.container-order-form .orderform-template.active {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@include mq(IVK, min) {
font-size: 24px;
line-height: 28px;
width: 228px !important;
height: 64px;
}
} }
} }
.summary-cart-template-holder{ .summary-cart-template-holder{
@ -88,7 +104,7 @@ body .container-main.container-order-form .orderform-template.active {
height: auto !important; height: auto !important;
} }
@include mq(IVK, min) { @include mq(IVK, min) {
width: 90.89%; width: 94.89%;
height: auto !important; height: auto !important;
} }
} }
@ -96,9 +112,13 @@ body .container-main.container-order-form .orderform-template.active {
display: none; display: none;
} }
.photo{ .photo{
width: 60px !important; width: 60px;
height: 60px !important; height: 60px;
margin-left: 16px; margin-left: 16px;
@include mq(IVK, min) {
width: 120px;
height: 120px;
}
} }
#postalCode-finished-loading{ #postalCode-finished-loading{
.shipping-method-wrapper{ .shipping-method-wrapper{

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

@ -17,7 +17,6 @@ header {
width: 79.53125%; width: 79.53125%;
margin: 0 auto; margin: 0 auto;
} }
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

82
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -1,12 +1,31 @@
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
/* _footer.scss */ /* _footer.scss */
#product-name2616,
#product-name2621{
font-size: 24px;
line-height: 28px;
}
#shipping-estimate-date{
font-size: 24px;
line-height: 28px;
}
.footerCheckout { .footerCheckout {
position: relative; position: relative;
border-top: 1px solid; border-top: 1px solid;
color: $color-gray2; color: $color-gray2;
margin-top: 100px; margin-top: 100px;
&__ComSlick{ &__ComSlick{
margin-top: 450px !important; margin-top: 32.33%;
@media screen and (min-width: 0px) and (max-width: 575px){
margin-top: 400px;
}
@media screen and (min-width: 576px) and (max-width: 768px){
margin-top: 500px;
}
@media screen and (min-width: 769px) and (max-width: 1280px){
margin-top: 600px;
}
} }
&__payments{ &__payments{
&__images{ &__images{
@ -146,24 +165,22 @@
} }
} }
&__prateleira{ &__prateleira{
// background: gray;
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
width: 100% !important; width: 100% !important;
height: 390px; // height: 390px;
// margin-bottom: 54px !important; margin-top: 54px;
top: -505px; margin-bottom: 54px !important;
bottom: 70px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
.slick{ .slick{
display: flex; display: flex;
width: 100%; width: 123%;
height: 100%; height: 100%;
align-items: center;
justify-content: center; justify-content: center;
@include mq(xll, max) {
}
} }
.SLick_title{ .SLick_title{
font-family: 'Tenor Sans', sans-serif; font-family: 'Tenor Sans', sans-serif;
@ -200,15 +217,14 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
text-align: center; text-align: center;
width: 242px !important; width: 100% !important;
height: 390px; // height: 390px;
margin-right: 16px; margin-right: 16px;
background: transparent; background: transparent;
flex-direction: column; flex-direction: column;
background: pink;
@include mq(xll, max) { @include mq(xll, max) {
width: 43.7% !important; // width: 43.7% !important;
height: 112.734% !important; // height: 112.734% !important;
} }
&__btn{ &__btn{
button{ button{
@ -230,32 +246,29 @@
} }
} }
.cor{ .cor{
width: 54px !important; width: 54px;
height: 28px !important; height: 28px;
@include mq(xll, max) { @include mq(xll, max) {
width: 46px ; width: 46px ;
height: 28px; height: 28px;
} }
} }
.verde{ .verde{
width: 54px !important; width: 54px;
height: 28px !important; height: 28px;
} }
.azul{ .azul{
width: 46px !important; width: 46px;
height: 28px !important; height: 28px;
} }
.jaq__azul{ .jaq__azul{
width: 112px !important; width: 112px;
height: 28px !important; height: 28px;
white-space: nowrap; white-space: nowrap;
@include mq(xll, max) {
width: 164px ;
height: 42px;
}
} }
} }
.Ver__produto{ .Ver__produto{
margin-top: 5px;
width: 100%; width: 100%;
height: 42px; height: 42px;
color: $color-white; color: $color-white;
@ -278,12 +291,23 @@
position: relative; position: relative;
} }
.slick-list { .slick-list {
width: 1016px; width: 68.84%;
// left: -49px; position: initial;
position: absolute;
top: 0px; top: 0px;
left: 10.78125%; left: 10.78125%;
} }
/* the slides */
.slick-slide {
// min-width: 242px;
margin-left: 16px;
}
/* the parent */
.slick-list {
min-width: 242px;
margin: 0 16px;
}
} }
} }