From 9396e7580664294c47b858d905a7bcda17a4bfef Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 10:42:02 +0200
Subject: [PATCH 01/16] Increase padding top and padding bottom

---
 app/webpacker/css/admin_v3/components/pagination.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 53167e9996..ba96765cef 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -1,7 +1,7 @@
 .pagination {
   text-align: center;
   margin: 0 0 1em;
-  padding: 10px 0;
+  padding: 20px 0 28px 0;
 
   background-color: $color-7;
 

From a2da3c2f6186a4e514e88414627bcf0eb3db77c4 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 10:45:45 +0200
Subject: [PATCH 02/16] Better management of margin/gap between each button
 with flex display

---
 app/webpacker/css/admin_v3/components/pagination.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index ba96765cef..5db30c8973 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -5,6 +5,10 @@
 
   background-color: $color-7;
 
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+
   .page {
     width: 40px;
     line-height: 40px;

From 6e29dd95eff16266f0bb5c50ab54550c76c42b05 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 10:46:35 +0200
Subject: [PATCH 03/16] Increase distance between numbers to be 8px

---
 app/webpacker/css/admin_v3/components/pagination.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 5db30c8973..a7dc01db87 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -7,7 +7,7 @@
 
   display: flex;
   justify-content: center;
-  gap: 5px;
+  gap: 8px;
 
   .page {
     width: 40px;

From 06af58e923bacd5a4bf46456911bd501b3887801 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 10:49:38 +0200
Subject: [PATCH 04/16] increase distance between arrows and numbers to be 36px

---
 app/webpacker/css/admin_v3/components/pagination.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index a7dc01db87..12311e6369 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -26,11 +26,11 @@
     }
 
     &.prev {
-      margin-right: 20px;
+      margin-right: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
     }
 
     &.next {
-      margin-left: 20px;
+      margin-left: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
     }
 
     &.disabled {

From d914644c35d2899468967bc47546be25e534c204 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 10:57:33 +0200
Subject: [PATCH 05/16] change not selected font color to $near-black, also for
 arrows

---
 app/webpacker/css/admin_v3/components/pagination.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 12311e6369..30ec9e0e79 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -18,7 +18,7 @@
     background-color: $color-1;
     @include defaultBoxShadow;
     border-radius: 4px;
-    color: $color-9;
+    color: $color-8;
 
     &.current {
       background-color: $color-5;

From 9d8325c0d986b3eaca33b92cb13b677be70f8f5c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 10:58:22 +0200
Subject: [PATCH 06/16] font weight to be 600

---
 app/webpacker/css/admin_v3/components/pagination.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 30ec9e0e79..2ba4c820b7 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -19,6 +19,7 @@
     @include defaultBoxShadow;
     border-radius: 4px;
     color: $color-8;
+    font-weight: 600;
 
     &.current {
       background-color: $color-5;

From 5fc4f7bdafac29c0d1a482972232c551920dbf61 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 11:01:00 +0200
Subject: [PATCH 07/16] Design hover (like current)

---
 app/webpacker/css/admin_v3/components/pagination.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 2ba4c820b7..6ab2191b6b 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -37,6 +37,11 @@
     &.disabled {
       cursor: default;
     }
+
+    &:hover:not(.disabled) {
+      background-color: $color-5;
+      color: $white;
+    }
   }
 
   button {

From c252de87b696597e67f447cd0d64d850fd10c8de Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 11:08:42 +0200
Subject: [PATCH 08/16] Specify cursor in order to not be `text`

---
 app/webpacker/css/admin_v3/components/pagination.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 6ab2191b6b..fe5953690b 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -20,6 +20,7 @@
     border-radius: 4px;
     color: $color-8;
     font-weight: 600;
+    cursor: default;
 
     &.current {
       background-color: $color-5;
@@ -34,8 +35,8 @@
       margin-left: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
     }
 
-    &.disabled {
-      cursor: default;
+    &:not(.disabled):not(.current) {
+      cursor: pointer;
     }
 
     &:hover:not(.disabled) {

From b1ea77e611659c6dc6f75da47990b156f9a41896 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 11:10:01 +0200
Subject: [PATCH 09/16] Remove white background from dots

---
 app/webpacker/css/admin_v3/components/pagination.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index fe5953690b..ff97a51673 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -39,10 +39,16 @@
       cursor: pointer;
     }
 
-    &:hover:not(.disabled) {
+    &:hover:not(.disabled):not(.gap) {
       background-color: $color-5;
       color: $white;
     }
+
+    &.gap {
+      background-color: transparent;
+      box-shadow: none;
+      width: auto;
+    }
   }
 
   button {

From 3fb8726c6a42d6c53bd425295d10a3512b56b642 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 11:24:15 +0200
Subject: [PATCH 10/16] Do not display arrows if they're disabled

---
 app/views/admin/shared/v3/_pagy.html.haml | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/app/views/admin/shared/v3/_pagy.html.haml b/app/views/admin/shared/v3/_pagy.html.haml
index 3ba80ea464..6456fae45a 100644
--- a/app/views/admin/shared/v3/_pagy.html.haml
+++ b/app/views/admin/shared/v3/_pagy.html.haml
@@ -2,9 +2,6 @@
   - if pagy.prev
     %a.page.prev{ href: "#", id: "pagy-prev", "data-reflex": reflex, "data-perPage": pagy.items, "data-page": pagy.prev || 1, "aria-label": "previous"}
       %i.icon-chevron-left
-  - else
-    %span.page.prev.disabled
-      %i.icon-chevron-left
   - pagy.series.each do |item|       # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
     - if item.is_a?(Integer)         # page link
       %a.page{ href: "#", id:"pagy-#{item}", "data-reflex": reflex, "data-perPage": pagy.items, "data-page": item, "aria-label": "page #{item}"}
@@ -16,6 +13,3 @@
   - if pagy.next
     %a.page.next{ href: "#", id:"pagy-next", "data-reflex": reflex, "data-perPage": pagy.items, "data-page": pagy.next || pagy.last, "aria-label": "next"}
       %i.icon-chevron-right
-  - else
-    %span.page.next.disabled
-      %i.icon-chevron-right

From 66a106b1c94d101f7bc7d9016ac6a91facdc481b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 11:39:15 +0200
Subject: [PATCH 11/16] hide pagination for single page catalogue

+ update specs then
---
 app/views/admin/products_v3/_content.html.haml | 3 ++-
 spec/system/admin/products_v3/products_spec.rb | 5 -----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/views/admin/products_v3/_content.html.haml b/app/views/admin/products_v3/_content.html.haml
index b598120c14..c9f33c55ef 100644
--- a/app/views/admin/products_v3/_content.html.haml
+++ b/app/views/admin/products_v3/_content.html.haml
@@ -11,7 +11,8 @@
       .sixteen.columns
         = render partial: 'sort', locals: { pagy: pagy, search_term: search_term, producer_id: producer_id, category_id: category_id }
     = render partial: 'table', locals: { products: products }
-    = render partial: 'admin/shared/v3/pagy', locals: { pagy: pagy, reflex: "click->Products#fetch" }
+    - if pagy.pages > 1
+      = render partial: 'admin/shared/v3/pagy', locals: { pagy: pagy, reflex: "click->Products#fetch" }
   - else
     #no-products
       = render partial: "no_products", locals: { search_term: search_term, producer_id: producer_id, category_id: category_id }
diff --git a/spec/system/admin/products_v3/products_spec.rb b/spec/system/admin/products_v3/products_spec.rb
index 1935200e6d..bddcfab8c1 100644
--- a/spec/system/admin/products_v3/products_spec.rb
+++ b/spec/system/admin/products_v3/products_spec.rb
@@ -73,7 +73,6 @@ describe 'As an admin, I can see the new product page' do
         search_for "searchable product"
 
         expect(page).to have_field "search_term", with: "searchable product"
-        expect_page_to_be 1
         expect_products_count_to_be 1
       end
 
@@ -85,14 +84,12 @@ describe 'As an admin, I can see the new product page' do
         expect_per_page_to_be 15
         expect_products_count_to_be 15
         search_for "searchable product"
-        expect_page_to_be 1
         expect_products_count_to_be 1
       end
 
       it "can clear filters" do
         search_for "searchable product"
         expect(page).to have_field "search_term", with: "searchable product"
-        expect_page_to_be 1
         expect_products_count_to_be 1
         expect(page).to have_selector "table.products tbody tr td", text: product_by_name.name
 
@@ -118,7 +115,6 @@ describe 'As an admin, I can see the new product page' do
         search_by_producer "Producer 1"
 
         expect(page).to have_select "producer_id", selected: "Producer 1"
-        expect_page_to_be 1
         expect_products_count_to_be 1
       end
     end
@@ -133,7 +129,6 @@ describe 'As an admin, I can see the new product page' do
         search_by_category "Category 1"
 
         expect(page).to have_select "category_id", selected: "Category 1"
-        expect_page_to_be 1
         expect_products_count_to_be 1
         expect(page).to have_selector "table.products tbody tr td", text: product_by_category.name
       end

From 1a8a4ee72bc18de90326f0ab4a9e4191c552f9e6 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 11:42:39 +0200
Subject: [PATCH 12/16] Change size of pagination

"it becomes extremely long for big catalogues"
---
 app/reflexes/products_reflex.rb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/reflexes/products_reflex.rb b/app/reflexes/products_reflex.rb
index 295341bc02..bc8bcd9081 100644
--- a/app/reflexes/products_reflex.rb
+++ b/app/reflexes/products_reflex.rb
@@ -82,7 +82,8 @@ class ProductsReflex < ApplicationReflex
   def fetch_products
     product_query = OpenFoodNetwork::Permissions.new(current_user)
       .editable_products.merge(product_scope).ransack(ransack_query).result
-    @pagy, @products = pagy(product_query.order(:name), items: @per_page, page: @page)
+    @pagy, @products = pagy(product_query.order(:name), items: @per_page, page: @page,
+                                                        size: [1, 2, 2, 1])
   end
 
   def product_scope

From 2405dfdaa3df2bb3733a42c2347d50d28ddeacd3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 15 Aug 2023 11:50:29 +0200
Subject: [PATCH 13/16] Refine and adjust position of icon in button

---
 app/webpacker/css/admin_v3/components/pagination.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index ff97a51673..a9ebf77f51 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -29,10 +29,16 @@
 
     &.prev {
       margin-right: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
+      & > i {
+        padding-left: 2px;
+      }
     }
 
     &.next {
       margin-left: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
+      & > i {
+        padding-left: 6px;
+      }
     }
 
     &:not(.disabled):not(.current) {

From e7d36ed77251d7b7f20924ee6aa8a8ffc32dab22 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 17 Aug 2023 08:53:17 +0200
Subject: [PATCH 14/16] Let link have the cursor: pointer by default, and
 specify only for current

---
 app/webpacker/css/admin_v3/components/pagination.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index a9ebf77f51..8d7a651ad2 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -20,7 +20,12 @@
     border-radius: 4px;
     color: $color-8;
     font-weight: 600;
-    cursor: default;
+
+    &.current,
+    &.disabled,
+    &.gap {
+      cursor: default;
+    }
 
     &.current {
       background-color: $color-5;
@@ -41,10 +46,6 @@
       }
     }
 
-    &:not(.disabled):not(.current) {
-      cursor: pointer;
-    }
-
     &:hover:not(.disabled):not(.gap) {
       background-color: $color-5;
       color: $white;

From 394e964b91e034bf2ededeafa349dacf891e1ac9 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 17 Aug 2023 08:58:48 +0200
Subject: [PATCH 15/16] Specify for element that have href attr: the ones we
 want to hover

---
 app/webpacker/css/admin_v3/components/pagination.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 8d7a651ad2..b3c9e71dfa 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -46,7 +46,7 @@
       }
     }
 
-    &:hover:not(.disabled):not(.gap) {
+    &[href]:hover {
       background-color: $color-5;
       color: $white;
     }

From fa4dda9976a9f23ba7ee6f7270fbf252988368c4 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 17 Aug 2023 09:05:44 +0200
Subject: [PATCH 16/16] Finally, remove disabled rule that is unused

We only display active link
---
 app/webpacker/css/admin_v3/components/pagination.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index b3c9e71dfa..538cd8e6c1 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -22,7 +22,6 @@
     font-weight: 600;
 
     &.current,
-    &.disabled,
     &.gap {
       cursor: default;
     }
@@ -70,9 +69,5 @@
       background-color: $red;
       cursor: default;
     }
-
-    &.disabled {
-      display: none;
-    }
   }
 }