diff --git a/src/features/Pagination/view/paginationView.module.scss b/src/features/Pagination/view/paginationView.module.scss index 2aac1f73..f550b4a1 100644 --- a/src/features/Pagination/view/paginationView.module.scss +++ b/src/features/Pagination/view/paginationView.module.scss @@ -2,7 +2,10 @@ display: flex; flex-wrap: wrap; align-items: center; - gap: var(--tiny-offset); + margin-top: auto; + margin-left: var(--tiny-offset); + max-width: max-content; + gap: 0 var(--tiny-offset); } .pageButton { @@ -40,10 +43,6 @@ opacity: 0.5; pointer-events: none; } - - &:nth-child(1) { - margin-left: var(--tiny-offset); - } } .active { diff --git a/src/widgets/Catalog/model/CatalogModel.ts b/src/widgets/Catalog/model/CatalogModel.ts index c3fb03a8..e7bda29b 100644 --- a/src/widgets/Catalog/model/CatalogModel.ts +++ b/src/widgets/Catalog/model/CatalogModel.ts @@ -25,10 +25,14 @@ import { showErrorMessage } from '@/shared/utils/userMessage.ts'; import CatalogView from '../view/CatalogView.ts'; +const PRODUCT_COUNT_FOR_HIDDEN_PAGINATION = 7; + class CatalogModel { private currentSize: null | string = null; - private pagination: PaginationModel | null = null; + private paginationBottom: PaginationModel | null = null; + + private paginationTop: PaginationModel | null = null; private productFilters: ProductFiltersModel | null = null; @@ -96,7 +100,8 @@ class CatalogModel { productList.innerHTML = ''; const options = this.getOptions(); const productsInfo = await this.getProductsInfo(options); - this.pagination?.getHTML().remove(); + this.paginationTop?.getHTML().remove(); + this.paginationBottom?.getHTML().remove(); if (productsInfo?.products?.length) { const cart = await getCartModel().getCart(); productsInfo.products.forEach((productData) => { @@ -104,12 +109,20 @@ class CatalogModel { productList.append(product.getHTML()); }); this.view.switchEmptyList(!productsInfo?.products?.length); - this.pagination = new PaginationModel( + this.paginationTop = new PaginationModel( + { productTotalCount: productsInfo?.totalProductCount, productsPerPageCount: PRODUCT_LIMIT }, + this.setCurrentPage.bind(this), + ); + this.paginationBottom = new PaginationModel( { productTotalCount: productsInfo?.totalProductCount, productsPerPageCount: PRODUCT_LIMIT }, this.setCurrentPage.bind(this), ); - this.pagination.getView().setSelectedButton(options.page ?? DEFAULT_PAGE); - this.view.getRightTopWrapper().append(this.pagination.getHTML()); + this.paginationTop.getView().setSelectedButton(options.page ?? DEFAULT_PAGE); + this.paginationBottom.getView().setSelectedButton(options.page ?? DEFAULT_PAGE); + this.view.getRightTopWrapper().append(this.paginationTop.getHTML()); + if (productsInfo.products.length >= PRODUCT_COUNT_FOR_HIDDEN_PAGINATION) { + this.view.getRightBottomWrapper().append(this.paginationBottom.getHTML()); + } } this.productFilters?.getView().updateParams(productsInfo); this.view.switchEmptyList(!productsInfo?.products?.length); diff --git a/src/widgets/Catalog/view/catalogView.module.scss b/src/widgets/Catalog/view/catalogView.module.scss index 7007e5b8..7741d873 100644 --- a/src/widgets/Catalog/view/catalogView.module.scss +++ b/src/widgets/Catalog/view/catalogView.module.scss @@ -46,8 +46,10 @@ justify-content: center; order: 2; grid-template-columns: repeat(3, auto); + grid-template-rows: max-content max-content; + margin-bottom: var(--tiny-offset); height: max-content; - min-height: calc(var(--extra-large-offset) * 5); // 500px + min-height: calc(var(--extra-large-offset) * 13.5); font-size: var(--regular-font); letter-spacing: var(--one); text-align: center;