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

feat: Responsividade < 1024 Pagina Cart 2

Browse Source
This commit is contained in:
José Carlos Lins 2022-12-13 22:40:33 -03:00
parent cffddb1ead
commit a2567f6707
6 changed files with 143 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,12 +66,21 @@ export default class Footer {
async addCarrossel() {
const elemento = document.querySelector(".sliderPratileira");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
if (window.screen.width > 1024) {
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
} else {
$(elemento).slick({
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
}
}
async api() {

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

@ -19,11 +19,82 @@
padding: 16px;
margin-bottom: 48px;
@include mq(md, max) {
margin: 0px 0 25px 0;
border-left: none;
border-right: none;
border-radius: 0;
@media (max-width: 1024px) {
.table.cart-items {
thead {
display: none;
}
tbody {
.product-item {
display: grid;
grid-template-areas: "colunaOne colunaTwo colunaThree";
grid-template-columns: 60px 1fr 1fr;
justify-content: space-between;
.product-image {
grid-area: colunaOne;
}
.product-name {
grid-area: colunaTwo;
padding-left: 16px;
}
.quantity {
grid-area: colunaTwo;
margin-left: 16px;
align-self: end;
input {
padding: 16px 0;
}
}
.product-price {
grid-area: colunaThree;
align-self: end;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0;
.list-price {
display: flex;
justify-content: flex-end;
}
.best-price {
display: flex;
justify-content: flex-end;
gap: 0;
.new-product-price {
padding-left: 5px;
}
}
}
.item-remove {
grid-area: colunaThree;
align-self: start;
padding: 0;
width: inherit;
.item-link-remove {
display: flex;
padding: 0;
justify-content: end;
}
}
}
}
}
.shipping-date,
.quantity-price {
display: none;
}
}
}
@ -496,6 +567,19 @@
}
.summary {
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
.cart-more-options {
margin-bottom: 48px;
}
.summary-totalizers.cart-totalizers {
width: 100%;
margin: 0;
}
}
.cart-more-options {
margin: 0;
width: max-content;
@ -946,16 +1030,9 @@
flex-direction: column;
width: 354px;
@include mq(md, max) {
padding: 0 16px;
width: calc(100% - 32px);
float: none;
margin-bottom: 50px;
}
@include mq(md, min) {
margin: 0;
padding-bottom: 50px;
@media screen and (max-width: 1024px) {
width: 100%;
padding-bottom: 43px;
}
.link-choose-more-products-wrapper {

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

@ -55,6 +55,11 @@ body {
.container-order-form,
.container-cart {
width: 80%;
@media screen and (max-width: 1024px) {
width: 100%;
padding: 16px;
}
}
}

9
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -115,6 +115,15 @@
z-index: 4;
right: 20px;
}
@media (max-width: 1024px) {
.slick-next {
right: 27px;
}
.slick-prev {
left: 29px;
}
}
.slick-arrow.slick-hidden {
display: none;
}

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

@ -241,6 +241,24 @@
font-size: 13px;
}
}
@media (max-width: 1024px) {
width: 100%;
padding: 0 8px;
.slick-track {
gap: 15px;
}
.card-list-pratileira {
figure {
.image-card-pratileira {
width: 100%;
height: 320px;
}
}
}
}
}
.slick-track {
display: flex;

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

@ -24,12 +24,10 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
sm: 375px,
md: 1024px,
// lg: 992px,
// xl: 1200px,,
) !default;
$z-index: (