paginations styles on mobile was fixed and icons in checkout cards we…

…re improved
mate-academy · Jul 27, 2023 · fa049b5 · fa049b5
1 parent 0bd3a62
commit fa049b5
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 7 deletions.
diff --git a/src/components/CheckoutCard/checkoutCard.scss b/src/components/CheckoutCard/checkoutCard.scss
@@ -54,7 +54,12 @@
   }
 
   &__button {
-    @include button-arrows;
+    @include button-more-less;
+
+    &_prev {
+      content: "+";
+
+    }
   }
 
   &__count {

diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
@@ -16,7 +16,7 @@
   }
 
   &__logo {
-    background: center/contain no-repeat url("https://i.gstatvb.com/c389a77ca305ee5d9f0ee6f87f74fcfb1688922827.rng.png");
+    background: center/contain no-repeat url($logo);
     height: 24px;
     width: 40px;
     margin: 0 64px 0 8px;

diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
@@ -17,7 +17,7 @@
   }
 
   &__logo {
-    background: center/contain no-repeat url("https://i.gstatvb.com/c389a77ca305ee5d9f0ee6f87f74fcfb1688922827.rng.png");
+    background: center/contain no-repeat url($logo);
     height: 24px;
     width: 40px;
     margin: 0 64px 0 26px;

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import classNames from 'classnames';
 import { getSearchWith } from '../../helpers/searchHelper';
@@ -10,15 +10,37 @@ export type Props = {
   currentPage: number,
 };
 
+const DEFAULT_VISIBLE_PAGES = 4;
+
 export const Pagination: React.FC<Props> = ({
   total,
   itemsOnPage,
   currentPage,
 }) => {
   const [searchParams, setSearchParams] = useSearchParams('');
   const lastPage = Math.ceil(total / itemsOnPage);
-  const numberOfPages = new Array(lastPage)
-    .fill(1).map((_, index) => (index + 1));
+  const [visiblePages, setVisiblePages] = useState<number[]>([]);
+
+  useEffect(() => {
+    const adjacentPages = Math.round(DEFAULT_VISIBLE_PAGES / 2);
+    let startPage = Math.max(1, currentPage - adjacentPages);
+    let endPage = Math.min(lastPage, currentPage + adjacentPages);
+
+    while (endPage - startPage < DEFAULT_VISIBLE_PAGES) {
+      if (startPage > 1) {
+        startPage -= 1;
+      } else if (endPage < lastPage) {
+        endPage += 1;
+      } else {
+        break;
+      }
+    }
+
+    const numberOfPages = [...Array(endPage - startPage + 1)]
+      .map((_, index) => startPage + index);
+
+    setVisiblePages(numberOfPages);
+  }, [currentPage, lastPage]);
 
   useEffect(() => {
     if (currentPage > lastPage) {
@@ -46,7 +68,7 @@ export const Pagination: React.FC<Props> = ({
       />
 
       <ul className="pagination__list">
-        {numberOfPages.map(pageNumber => (
+        {visiblePages.map(pageNumber => (
           <li key={pageNumber} className="pagination__item">
             <Link
               to={{

diff --git a/src/components/Pagination/pagination.scss b/src/components/Pagination/pagination.scss
@@ -12,6 +12,12 @@
   grid-gap: 16px;
   gap: 16px;
 
+  // &__container {
+  //   max-width: 200px;
+  //   overflow-x: hidden;
+  //   transition: transform 0.3s ease;
+  // }
+
   &__list {
     display: flex;
     grid-gap: 8px;

diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import classNames from 'classnames';
 import { Product } from '../../types/Product';
 import { sortProducts } from '../../helpers/sortHelper';
 import { Dropdown } from '../Dropdown/Dropdown';
@@ -99,6 +100,19 @@ export const ProductList: React.FC<Props> = ({
                   />
                 </div>
               )}
+              {isPaginationBarShown && (
+                <div className={classNames(
+                  'product-list__pagination',
+                  'product-list__pagination_top',
+                )}
+                >
+                  <Pagination
+                    total={sortedProducts.length}
+                    itemsOnPage={itemsOnPage}
+                    currentPage={page}
+                  />
+                </div>
+              )}
             </div>
           )}
 

diff --git a/src/components/ProductList/productList.scss b/src/components/ProductList/productList.scss
@@ -28,6 +28,10 @@
 
   &__pagination {
     margin-top: 24px;
+
+    &_top {
+      display: none;
+    }
   }
 }
 
@@ -39,6 +43,10 @@
       flex-direction: column;
     }
 
+    &__container {
+      flex-direction: column;
+    }
+
     &__dropdowns {
       flex-direction: column;
       margin: 0 auto;
@@ -48,5 +56,9 @@
         margin-top: 20px;
       }
     }
+
+    &__pagination_top {
+      display: block;
+    }
   }
 }
diff --git a/styles/utils/mixins.scss b/styles/utils/mixins.scss
@@ -83,6 +83,39 @@
   }
 };
 
+@mixin button-more-less($width: 32px, $height: 32px) {
+  @include button-transparent;
+  height: 32px;
+
+  &:before {
+    width: unset;
+    height: unset;
+    font-family: inherit;
+    font-size: 14px;
+    color: $main-gray-color;
+  }
+
+  &.disabled::before {
+    color: $light-gray-color;
+  }
+
+  &_prev {
+    margin-right: 16px;
+
+    &::before {
+      content: "-";
+    }
+  }
+
+  &_next::before {
+    content: "+";
+  }
+
+  &.disabled {
+    pointer-events: none;
+  }
+};
+
 @mixin button-header {
   height: 64px;
   width: 64px;

diff --git a/styles/utils/variables.scss b/styles/utils/variables.scss
@@ -5,6 +5,7 @@ $borders-gray-color: #e2e6e9;
 $accent-green: #27ae60;
 $accent-red: #eb5757;
 
+$logo: "https://i.gstatvb.com/c389a77ca305ee5d9f0ee6f87f74fcfb1688922827.rng.png";
 $arrow-left: 'https://i.gstatvb.com/666bd175cdc8706e8a3f147f985a8ebe1689008383.rng.png';
 $arrow-left-light: 'https://i.gstatvb.com/56257d53833d634b58ca1095b4d5ab0b1689364322.rng.png';
 $arrow-right: 'https://i.gstatvb.com/8f63a520b73400d453500cf67939b8ab1689008556.rng.png';