Fix responsiveness issue for casa and volunteer data tables

[SajjadAhmad14]

What github issue is this PR for, if any?

Resolves #5261

What changed, and why?

The pagination for volunteers and casa cases tables is now responsive.

How will this affect user permissions?

• Volunteer permissions:
• Supervisor permissions:
• Admin permissions:

Screenshots please :)

[schoork]

@SajjadAhmad14 Could you give me some steps to get to a page to see this in action? The best page I can find only has two pages.

[SajjadAhmad14]

@SajjadAhmad14 Could you give me some steps to get to a page to see this in action? The best page I can find only has two pages.

@schoork How I approached is by tweaking into the db/seeds files to increase the size of entries for volunteers and casa cases so that I could test the resposiveness for large set of data in the tables. Please send me a message in slack if you want my help to seed the data for volunteers and casa cases. Thanks!

[schoork]

@SajjadAhmad14 I'm still getting the pagination links set vertically. Are you seeing something different?

[SajjadAhmad14]

Hi Samuel! Yes the page numbers and buttons(previous and next) on large screen (>1200px) are showing vertically. You want to be them horizontal on all screens? Also please confirm that buttons(previous and next) should also be in one line so that they are also horizontal on all screens? Thanks for the kind review!

…

On Thu, Nov 2, 2023 at 2:35 PM Samuel Williams ***@***.***> wrote: @SajjadAhmad14 <https://github.com/SajjadAhmad14> I'm still getting the pagination links set vertically. Are you seeing something different? [image: Screenshot 2023-11-02 at 5 33 18 AM] <https://user-images.githubusercontent.com/50247514/279932465-25b95525-d3a1-4fd1-b21c-8978e48aef42.png> [image: Screenshot 2023-11-02 at 5 33 12 AM] <https://user-images.githubusercontent.com/50247514/279932467-4ddb7d91-541e-4ad1-978b-33cea678ec7e.png> — Reply to this email directly, view it on GitHub <#5308 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIO4AFL2YW7XHIRZKIDIXWTYCNSN5AVCNFSM6AAAAAA6M7DBLCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJQGM3TQMJUGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[schoork]

Yes, please make all buttons horizontal across all screen sizes. Ticket is a little confusing.

[SajjadAhmad14]

Great! I pushed recent changes and now both previous and next buttons are in one line. Also the page numbers are responsive on all screens as well.

[schoork]

Wow! Very quick @SajjadAhmad14 . I'm actually a fan of the previous and next buttons being on the same line as the page number buttons, but I'd like to see if we can @bcastillo32 or @MalloryPriceDesign to weigh in.

[MalloryPriceDesign]

Wow! Very quick @SajjadAhmad14 . I'm actually a fan of the previous and next buttons being on the same line as the page number buttons, but I'd like to see if we can @bcastillo32 or @MalloryPriceDesign to weigh in.

@SajjadAhmad14 thanks for working on this! If possible, could you align the previous and next buttons on the same line as the page number buttons?

[SajjadAhmad14]

Wow! Very quick @SajjadAhmad14 . I'm actually a fan of the previous and next buttons being on the same line as the page number buttons, but I'd like to see if we can @bcastillo32 or @MalloryPriceDesign to weigh in.

@SajjadAhmad14 thanks for working on this! If possible, could you align the previous and next buttons on the same line as the page number buttons?

Thanks for the review! These buttons can be on the same line but only for desktop and large screen size. These buttons got hidden on tablet and small sizes if they are on the same line with the page numbers. So for medium and small screen sizes I have to adjust them to be on a separate line for the reason of visibilty and this way the pagination style does not look same for all the screen sizes. I think the better user experience is that if we can make it look same for all the screens sizes and that's only possible with the solution that numbers and buttons align on different lines. But I am open for suggestions! Thanks!

[schoork]

What's the reason for using the id of the tables in these? CSS won't get propagated to all data tables.

[SajjadAhmad14]

@schoork How do you propose to target the pagination? I am currently using CSS media queries to target different classes to make the pagination responsive. Can you guide me should I not use the CSS and use some JavaScript instead?

[schoork]

I just wouldn't use an id here.

#casa-cases_paginate.dataTables_paginate.paging_simple_numbers {

.dataTables_paginate.paging_simple_numbers {

[schoork]

@SajjadAhmad14 We need to find a solution where

1. all the buttons are on the same line, and
2. the previous and next buttons are shown in some form

Here are some screenshots of [PlainAdmin's pagination|https://demo.plainadmin.com/tables-responsive#0] (we use a lot of PlainAdmin styling in the site). The >> and << buttons might be helpful for fitting in the mobile view if the Previous and Next are too wide.

Happy to jump in/help if you get stuck.

[schoork]

Screenshots for the new changes.

[schoork]

FYI. There is currently no way to change the number of numbered page buttons based on the size of the window (mobile does work better with fewer buttons).
https://datatables.net/forums/discussion/73664