feat: Finaliza layout tablet

This commit is contained in:
Cainã Milech 2022-12-18 16:14:12 -03:00
parent 0a300c74d5
commit c5b7a30187
5 changed files with 110 additions and 23 deletions

View File

@ -2,7 +2,7 @@ Stack trace:
Frame Function Args Frame Function Args
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
000FFFFCD30 002100484A2 (000007F0000, 000007F0101, 00000000001, F6F414F9291F) 000FFFFCD30 002100484A2 (000000E0000, 000000E0101, 00000000001, 94FEDA51F366)
000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)

View File

@ -88,23 +88,21 @@ export default class Footer {
} }
async addCarrossel() { async addCarrossel() {
const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 }); const prateleira = await waitElement(".carrosel-items", { timeout: 5000, interval: 500 });
if (window.screen.width > 102) { if (window.screen.width > 1024) {
$(prateleira).slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
} else if (window.screen.width <= 1024) {
$(prateleira).slick({ $(prateleira).slick({
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 1, slidesToScroll: 1,
infinite: true, infinite: true,
arrows: true, arrows: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
},
},
],
}); });
} }
} }

View File

@ -5,9 +5,17 @@ h1#orderform-title {
line-height: 33px; line-height: 33px;
color: $color-black-500; color: $color-black-500;
margin: 17px 0; margin: 17px 0;
@include mq(tablet, max) {
margin: 17px 16px;
}
} }
.checkout-container { .checkout-container {
.link.link-cart.pull-right {
margin-right: 16px;
}
.client-pre-email { .client-pre-email {
border-color: $color-black-500; border-color: $color-black-500;
font-family: $font-family; font-family: $font-family;
@ -88,6 +96,7 @@ h1#orderform-title {
@include mq(tablet, max) { @include mq(tablet, max) {
width: 100%; width: 100%;
text-align: initial; text-align: initial;
padding: 0 16px;
} }
input { input {
@ -137,7 +146,7 @@ h1#orderform-title {
text-transform: uppercase; text-transform: uppercase;
@include mq(tablet, max) { @include mq(tablet, max) {
right: 0; right: 1.7%;
} }
&:hover { &:hover {
@ -231,6 +240,7 @@ h1#orderform-title {
//DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE //DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE
.row-fluid.orderform-template { .row-fluid.orderform-template {
@include mq(tablet, max) { @include mq(tablet, max) {
padding: 0 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -249,6 +259,7 @@ h1#orderform-title {
//IDENTIFICAÇÃO //IDENTIFICAÇÃO
.span6.client-profile-data { .span6.client-profile-data {
box-sizing: border-box;
@include mq(tablet, max) { @include mq(tablet, max) {
width: 100%; width: 100%;
} }
@ -257,19 +268,19 @@ h1#orderform-title {
.client-last-name, .client-last-name,
.client-document, .client-document,
.client-phone { .client-phone {
width: 47.4%;
@include mq(tablet, max) { @include mq(tablet, max) {
width: 49.4%; width: 49.4%;
} }
input { input {
@include mq(tablet, max) {
width: 100%; width: 100%;
} }
} }
}
.client-first-name, .client-first-name,
.client-document { .client-document {
margin-right: 5.14%;
@include mq(tablet, max) { @include mq(tablet, max) {
margin-right: 1.2%; margin-right: 1.2%;
} }
@ -630,7 +641,30 @@ h1#orderform-title {
} }
/*IDENTIFICAÇÃO*/ /*IDENTIFICAÇÃO*/
.client-profile-data { .client-profile-data {
//INDENTIFICACAO INPUTS PORCENTAGEM
/*.span6.client-profile-data {
width: 100%;
box-sizing: border-box;
.client-first-name,
.client-last-name,
.client-document,
.client-phone {
width: 49.4%;
input {
width: 100%;
}
}
.client-first-name,
.client-document {
margin-right: 1.2%;
}
}*/
.accordion-group { .accordion-group {
padding: 24px 17px; padding: 24px 17px;
@ -1144,6 +1178,12 @@ h1#orderform-title {
} }
//RESUMO DO PEDIDO (MINI CART CARRINHO) //RESUMO DO PEDIDO (MINI CART CARRINHO)
/*.summary-cart-template-holder {
@include mq(tablet, max) {
height: unset;
}
} TESTE */
.cart-fixed.cart-fixed-transition { .cart-fixed.cart-fixed-transition {
height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO
@ -1247,6 +1287,10 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
margin-right: 17px; margin-right: 17px;
@include mq(tablet, max) {
margin-right: 0;
}
} }
} }
@ -1276,10 +1320,17 @@ h1#orderform-title {
&.info { &.info {
margin-left: 17px; margin-left: 17px;
@include mq(tablet, max) {
margin-left: 0;
}
} }
&.monetary { &.monetary {
margin-right: 17px; margin-right: 17px;
@include mq(tablet, max) {
margin-right: 0;
}
} }
} }
} }

View File

@ -10,13 +10,10 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-black; color: $color-black;
margin: 17px 0 16px; margin: 17px 0 16px;
}
.cart-template .cart-items th { @include mq(tablet, max) {
font-family: $font-family-secundary; margin-left: 16px;
font-weight: 400; }
padding: 0 0 17px;
text-align: start;
} }
} }
@ -189,6 +186,47 @@
} }
} }
//CART TABLET MOBILE
.cart-template-holder {
@include mq(tablet, max) {
}
.cart {
@include mq(tablet, max) {
padding: 16px;
margin: 16px 0;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
/*.product-image {
@include mq(tablet, max) {
margin-left: 16px;
}
.quantity {
@include mq(tablet, max) {
margin-left: 16px;
}
}
}*/
}
}
}
.summary-template-holder {
@include mq(tablet, max) {
margin: 0 16px;
width: auto;
}
}
.cart-links-bottom {
span {
@include mq(tablet, max) {
margin: 0 16px;
}
}
}
.lookatme { .lookatme {
background-color: $color-white; background-color: $color-white;
} }

View File

@ -60,7 +60,7 @@ body {
@include mq(tablet, max) { @include mq(tablet, max) {
width: 100%; width: 100%;
padding: 0 16px; padding: 0; /*APLICAR EM OUTROS ELEMENTOS 16px*/
} }
} }
} }