search

humanmade / altis-analytics

Analytics module for Altis
https://www.altis-dxp.com/resources/docs/analytics/
GNU General Public License v3.0
9 stars 3 forks source link

Pagination in Altis dashboard needs wrapping #239

Closed shadyvb closed 2 years ago

shadyvb commented 2 years ago

Steps to reproduce:

  1. Add many pages worth of posts, say 1000
  2. Notice how the pagination links are not wrapped and go outside visible screen.

Pagination links container should be wrapped.

t28cOD

Acceptance criteria:

It was noted that adding flex-wrap:wrap; to the container should help fix the bug.

roborourke commented 2 years ago

Adding some additional Acceptance Criteria:

Some examples based on having 250 total pages:

Hope that makes sense - please feel free to suggest any changes / improvements.

rmccue commented 2 years ago

FYI, WordPress has a paginate_links helper you can use:

    $page_links = paginate_links( array(
        'base' => 'base_url?paged=%#%',
        'format' => '',
        'prev_text' => $args['prev_text'],
        'next_text' => $args['next_text'],
        'total' => $number_pages,
        'current' => $current_page,
        'mid_size' => $mid_size,
        'end_size' => 1,
        'show_all' => $args['show_all'],
        'type' => 'array'
    ) );
roborourke commented 2 years ago

Does it have a similar thing for React?

Maybe we can grab one these components:

Or just roll our own.

robindevitt commented 2 years ago

In a use case where a user has 200+ pages on their site. Pagination will start "1 2 3 4 ... 398 399 400" for example. If the user was needing to navigate to page 150, they would need to click through roughly 147 times until they can click page 150, having an option for a user to select a page or input a page number to navigate to quickly be useful.

In Posts in WordPress you can navigate to the previous/next, first/last or specify a page number to navigate too.

I have come across https://www.npmjs.com/package/react-pagination-bar which has some options too, as well as an option for an input to navigate to a specific page : https://react-pagination-bar.vercel.app/

roborourke commented 2 years ago

@robindevitt good shout, the default WP pagination is like this so I think it's good to add the option with a go to input. Do you want to update the acceptance criteria?

robindevitt commented 2 years ago

Looking through the two packages, trust the one package to have functionality that the other one doesn't. react-pagination-bar has the the input functionality but doesn't offer the option to have 1 2 3 4 ... 250 with the ellipses in-between, so I'm going to see if I can find a package that contains both options/possibilities.

robindevitt commented 2 years ago

@roborourke I'm leaning towards using a package to get this done as at the moment it's a single use case. If we were using it multiple times over then I would say to develop our own pagination component.

rc-pagination - Ticks all the boxes, unpacked size 157 kB

react-pagination-bar - Doesn't tick all the boxes is the sense of that it doesn't have an option to show pagination like - 1 2 3 4 ... 250. However its unpacked size is 72.6 kB.

I think implementing rc-pagination based on acceptance criteria would be good start unless we would want a smaller package and compromise on acceptance criteria?

roborourke commented 2 years ago

Your reasoning for using an existing package makes sense to me 👍

The ellipsis is just a common pattern but I wouldn't get too hung up on it if it's clear that there are more pages after the visible ones.

I'd more inclined to use the lighter weight solution and compromise a bit as you note.

robindevitt commented 2 years ago

Merged and closed by PR 372