Addons store: Use swiper for addon cards on mobile & Reduce size of addon card on desktop

[florian-h05]

Fixes #2205 and fixes #1668.

This slighly reduces the addon card size on desktop and uses a swiper (like in many app stores) instead of a flex on mobile.

[relativeci]

#2416 Bundle Size — 10.85MiB (+0.01%).

919f65c(current) vs 331f794 main#2413(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics   2 changes

	Current #2416	Baseline #2413
Initial JS	1.9MiB	1.9MiB
Initial CSS	577.21KiB	577.21KiB
Cache Invalidation	17.74%	22.69%
Chunks	226	226
Assets	249	249
Modules	2930(+0.1%)	2927
Duplicate Modules	151	151
Duplicate Code	1.88%	1.88%
Packages	96	96
Duplicate Packages	2	2

Bundle size by type   2 changes 2 regressions

	Current #2416	Baseline #2413
JS	9.06MiB (+0.02%)	9.06MiB
CSS	864.19KiB (+0.02%)	864.03KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.38KiB	1.38KiB
Other	871B	871B

Bundle analysis report Branch florian-h05:addon-logo-size Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[florian-h05]

This is how it looks (Click me to expand):

[ghys]

Thanks, good attempt. Maybe a few remarks here:

• Could you just fix the horizontal gap between cards so that it matches the vertical one?

• My concerns were firstly that most titles would be truncated (word-wrapping didn't look well), in the above screenshot that's okay because you can guess the truncated word, but in other cases (in the UI tab for instance) it's more difficult. I'm not opposed to a 2-column view for bindings etc. and a single-column view for UI widgets in those cards (with a parameter on the component). But in any case, in the end, the title truncating, well we can live with it. Another idea would be to just not display the "install/remove" button at least when space is too tight, as you can always go to the details and install from there.

• Lastly I considered the fact that having 3 cards on 2 rows doesn't look too good (you have an empty space), but if we're not limiting the amount of "featured" add-ons to 3 in sections in the future then we can have what you find in "app store"-like UIs - a single line of horizontally-scrollable list of cards/ icons.

[florian-h05]

Could you just fix the horizontal gap between cards so that it matches the vertical one?

I tried to fix that, while doing that, I noticed that the vertical gap actually was not to large, but there was no horizontal gap left.

My concerns were firstly that most titles would be truncated (word-wrapping didn't look well), in the above screenshot that's okay because you can guess the truncated word, but in other cases (in the UI tab for instance) it's more difficult.

Yes, that's not nice, but I don't have a better idea ...

I'm not opposed to a 2-column view for bindings etc. and a single-column view for UI widgets in those cards (with a parameter on the component).

The problem is, that this is controlled by CSS, so it is not that easy to control it from JS.

Another idea would be to just not display the "install/remove" button at least when space is too tight, as you can always go to the details and install from there.

I have had a look at this, it feels a bit weird to not have the install/remove button for those, but for the list.

Lastly I considered the fact that having 3 cards on 2 rows doesn't look too good (you have an empty space), but if we're not limiting the amount of "featured" add-ons to 3 in sections in the future then we can have what you find in "app store"-like UIs - a single line of horizontally-scrollable list of cards/ icons.

That is a really nice proposal.

[florian-h05]

@ghys

Could you just fix the horizontal gap between cards so that it matches the vertical one?

Done 👍

Lastly I considered the fact that having 3 cards on 2 rows doesn't look too good (you have an empty space), but if we're not limiting the amount of "featured" add-ons to 3 in sections in the future then we can have what you find in "app store"-like UIs - a single line of horizontally-scrollable list of cards/ icons.

Implemented:

[florian-h05]

Let’s give it a try 👍
We can always adjust later on — I will merge now.