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 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/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 diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss index 53167e9996..538cd8e6c1 100644 --- a/app/webpacker/css/admin_v3/components/pagination.scss +++ b/app/webpacker/css/admin_v3/components/pagination.scss @@ -1,10 +1,14 @@ .pagination { text-align: center; margin: 0 0 1em; - padding: 10px 0; + padding: 20px 0 28px 0; background-color: $color-7; + display: flex; + justify-content: center; + gap: 8px; + .page { width: 40px; line-height: 40px; @@ -14,7 +18,13 @@ background-color: $color-1; @include defaultBoxShadow; border-radius: 4px; - color: $color-9; + color: $color-8; + font-weight: 600; + + &.current, + &.gap { + cursor: default; + } &.current { background-color: $color-5; @@ -22,15 +32,28 @@ } &.prev { - margin-right: 20px; + margin-right: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers + & > i { + padding-left: 2px; + } } &.next { - margin-left: 20px; + margin-left: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers + & > i { + padding-left: 6px; + } } - &.disabled { - cursor: default; + &[href]:hover { + background-color: $color-5; + color: $white; + } + + &.gap { + background-color: transparent; + box-shadow: none; + width: auto; } } @@ -46,9 +69,5 @@ background-color: $red; cursor: default; } - - &.disabled { - display: none; - } } } 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