Merge pull request #49 from Sattturday/develop

Небольшие правки пагинации
Sattturday · Jul 23, 2024 · 41731aa · 41731aa
2 parents 066f073 + 26cd7c2
commit 41731aa
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/src/pages/Catalog/Catalog.jsx b/src/pages/Catalog/Catalog.jsx
@@ -69,15 +69,15 @@ export const Catalog = () => {
 
   // Определение limit
   useEffect(() => {
-    if (windowWidth >= 1440) {
+    if (windowWidth >= 1457) {
       dispatch(setLimitFilter(8));
-    } else if (windowWidth < 1440 && windowWidth >= 1107) {
+    } else if (windowWidth < 1440 && windowWidth >= 1124) {
       dispatch(setLimitFilter(9));
-    } else if (windowWidth < 1107 && windowWidth >= 1025) {
+    } else if (windowWidth < 1124 && windowWidth >= 1025) {
       dispatch(setLimitFilter(6));
-    } else if (windowWidth < 1025 && windowWidth >= 998) {
+    } else if (windowWidth < 1025 && windowWidth >= 1015) {
       dispatch(setLimitFilter(8));
-    } else if (windowWidth < 998 && windowWidth >= 766) {
+    } else if (windowWidth < 1015 && windowWidth >= 766) {
       dispatch(setLimitFilter(9));
     } else if (windowWidth < 766 && windowWidth >= 751) {
       dispatch(setLimitFilter(6));

diff --git a/src/pages/Catalog/components/ShowList/ShowList.jsx b/src/pages/Catalog/components/ShowList/ShowList.jsx
@@ -38,6 +38,7 @@ export const ShowList = ({
       setSecondBtn(currentPage - 1);
       setThirdBtn(currentPage);
     }
+    window.scrollTo(0, 0);
   }, [currentPage, totalPages]);
 
   const handlePreviousPage = () => {
@@ -55,13 +56,14 @@ export const ShowList = ({
   const getPaginationButtons = () => {
     const buttons = [];
 
-    if (totalPages > 3 && currentPage > 2) {
-      buttons.push(
-        <span key="ellipsis-prev" className="pagination__dots">
-          ...
-        </span>,
-      );
-    }
+    buttons.push(
+      <span
+        key="ellipsis-prev"
+        className="pagination__dots pagination__dots_prev"
+      >
+        {totalPages > 3 && currentPage > 2 ? '...' : ''}
+      </span>,
+    );
 
     buttons.push(
       <button
@@ -103,20 +105,21 @@ export const ShowList = ({
       );
     }
 
-    if (totalPages > 3 && currentPage < totalPages - 1) {
-      buttons.push(
-        <span key="ellipsis-next" className="pagination__dots">
-          ...
-        </span>,
-      );
-    }
+    buttons.push(
+      <span
+        key="ellipsis-next"
+        className="pagination__dots pagination__dots_next"
+      >
+        {totalPages > 3 && currentPage < totalPages - 1 ? '...' : ''}
+      </span>,
+    );
 
     return buttons;
   };
 
   return (
     <>
-      <div className="show-list__block">
+      <div className="show-list">
         {message ? (
           <p className="info-message">{message}</p>
         ) : data.length !== 0 ? (

diff --git a/src/pages/Catalog/components/ShowList/ShowList.scss b/src/pages/Catalog/components/ShowList/ShowList.scss
@@ -2,7 +2,7 @@
 @import '../../../../styles/abstract/mixins.scss';
 @import '../../../../styles/abstract/placeholders.scss';
 
-.show-list__block {
+.show-list {
   width: 100%;
   grid-column: 2 / 4;
   display: grid;
@@ -82,6 +82,7 @@
   }
 
   &_disable {
+    @include disabled;
     opacity: 0.6;
   }
 
@@ -112,9 +113,23 @@
 
 .pagination__dots {
   @include text($color-bg);
-  padding: 0 0.6rem;
+  width: 16px;
+
+  &_prev {
+    padding: 0 0 0 0.6rem;
+  }
+
+  &_next {
+    padding: 0 0.6rem 0 0;
+  }
 
   @include media-mobile {
-    padding: 0 0.4rem;
+    &_prev {
+      padding: 0 0 0 0.4rem;
+    }
+
+    &_next {
+      padding: 0 0.4rem 0 0;
+    }
   }
 }