Fix: issue-340

[tblivet]

Questions	Answers
Description?	Fix #340
Type?	improvement
BC breaks?	no
Deprecations?
Fixed ticket?	Fix #340
Sponsor company	@PrestaShopCorp
How to test?	⬇️

Most of the points described in the issue have already been addressed. The remaining ones have been tackled as follows:

• Enhanced pagination to prevent overflow on mobile devices:
  
• Added a Bootstrap breakpoint to provide more flexibility on small devices (use to improve product list on mobile).
• Updated product list display based on page layouts.
• Improved mobile display of the product list to feature only one product per row on mobile devices.
  

[Hlavtox]

Please keep one column for mobile. In the issue, it was just a suggestion from the author.

[tblivet]

Please keep one column for mobile. In the issue, it was just a suggestion from the author.

Hi @Hlavtox, I don't really understand, you want me to remove one column for mobile?
I think it's a good optimization as it will concern only devices with screen width < 375. What do you think?

[Hlavtox]

@tblivet Ah sorry, too early in the morning. :-) I meant to keep two columns on mobiles, unless on VERY small screen sizes. We can fit more data without as much scrolling.

[tblivet]

@Hlavtox, I think removing it is not a good idea because with 2 products per line on very small devices, we really lose in terms of visibility. As you say, we can fit more data, but we display more data in a bad way.
I suggest keeping this in place but reducing the breakpoint to 360.
With the previous value of 375, the new iPhones will display 2 products per line as it will trigger if < 375. If we lower the value to 360, we will also cover Galaxy, and some other phones, which have a width of 360 for their latest models. This way, one column will only display for small and older devices.
https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide

I think it's a good compromise. What do you think?

[Hlavtox]

@tblivet Yeah! Good solution. :-) Do you want to move the breakpoint or add another one?

[tblivet]

@Hlavtox, Perfect 👍 No, just move it because it's already a new breakpoint!

[florine2623]

Hello @tblivet ,

Thanks for the PR.

When I try on desktop screen, the 3 dots button doesn't work :

Screen.Recording.2024-06-06.at.11.46.12.mov

On mobile 320px size, the pagination design is as expected.

But it doesn't work so well. The 3-dots button doesn't always work.

Screen.Recording.2024-06-06.at.11.47.44.mov

Although this is not blocking, before this PR, it was already like this. It can be fixed later.

The products are well displayed on mobile size.

It is QA ✅

[tblivet]

Thank you, @florine2623 🙏
The three dots are just there to indicate that there are pages between page X and page Y.
They allow us to keep all the pagination on a single line, instead of showing every page. So, it's normal if they do nothing, they're just visual elements.